Convert RGB to HEX color in JavaScript
Implement a function in JavaScript that converts the RGB number to HEXA color codes.
Example
Input:
255, 51, 255
Output:
"#ff33ff"
RGB format is a combination of three colors, red, green, and blue in the range of 0 – 255. A hex color code is the hexadecimal representation of the RGB numbers.
Hexadecimal uses 16 unique symbols, representing values as “0 – 9” for value between 0 – 9 and “A – F” or “a – f” for value between “10 – 15”.
There are multiple ways in which we can convert a given number to a Hexa value, just pad the number with 0 if it is a single digit and append it with “#”.
Approach 1. Using toString() method
The toString() method accepts a radix value and converts the value to that.
const componentToHex = (c) => {
const hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
const rgbToHex = (r, g, b) => {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
console.log(rgbToHex(255, 51, 255));
//"#ff33ff"
Approach 2. Using left shift (<<) operator
const rgbToHex = (r, g, b) => {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
console.log(rgbToHex(255, 51, 255));
//"#ff33ff"
Approach 3. Using Array.map
const rgbToHex = (r, g, b) => '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0')).join('')
console.log(rgbToHex(255, 51, 255));
//"#ff33ff"
Hope you enjoy reading. Thanks