patternjavascriptModerate
Hexadecimal to RGB conversion
Viewed 0 times
conversionrgbhexadecimal
Problem
I am trying to convert hex to rgb, and rgb to hex. My current code doesn't seem optimal, and there is an issue with 0's in the hexadecimal. What do you think about the overall quality of this code? Can you think of a more efficient way of converting?
Here is a sample plunker:
$scope.$watch('hex', function() {
var rgb = parseInt($scope.hex, 16);
$scope.r = (rgb >> 16) & 0xFF;
$scope.g = (rgb >> 8) & 0xFF;
$scope.b = rgb & 0xFF;
$scope.rgb = 'rgb(' + $scope.r + ',' + $scope.g + ',' + $scope.b + ');';
});
$scope.$watch('r+g+b', function() {
$scope.rgb = 'rgb(' + $scope.r + ',' + $scope.g + ',' + $scope.b + ');';
$scope.hex = parseInt($scope.r << 16 | $scope.g << 8 | $scope.b).toString(16);
});Here is a sample plunker:
Solution
A few notes:
-
I am confused as to why you need AngularJS for this.
-
I prefer to use the bitwise
-
Your function can't handle non-hex characters such as
-
You can simplify your creation of the RGB string by using the
Final function:
-
I am confused as to why you need AngularJS for this.
-
I prefer to use the bitwise
& with 255 instead of 0xFF in this case.-
Your function can't handle non-hex characters such as
#. I would remove them before parsing.-
You can simplify your creation of the RGB string by using the
join() method.Final function:
function hexToRgb(hex) {
hex = hex.replace(/[^0-9A-F]/gi, '');
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return [r, g, b].join();
}Code Snippets
function hexToRgb(hex) {
hex = hex.replace(/[^0-9A-F]/gi, '');
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return [r, g, b].join();
}Context
StackExchange Code Review Q#60515, answer score: 11
Revisions (0)
No revisions yet.