How to Convert between RGB and Hex in JavaScript

Colors can be represented in different formats depending on the context.

For example, on the web in CSS, you can represent colors using RGB, HSL, HEX, and HSB.

Unfortunately, there is no built-in way to convert between these in JavaScript, so we will need to write our own code.

In this post, we will learn how to convert from RGB to Hex, the most popular format for colors.

How to convert from RGB to Hex

The biggest difference between these two values is that the RGB value is a 3-tuple of numbers between 0 and 255, and the Hex value is a 6-digit string.

Let's first start with the RGB value.

JAVASCRIPT
const red = 255;
const green = 0;
const blue = 0;

Now let's define a function that takes a single color and converts it to its hex representation.

For this, we will make use of the toString(16) method, which converts a number to a hexadecimal string.

If the value is only one digit, it will be padded with a 0.

JAVASCRIPT
const colorToHex = (color) => {
    const hexadecimal = color.toString(16);
    return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
}

Now we can define a separate function that calls this function with our 3 values to get the final hex string:

JAVASCRIPT
const red = 255;
const green = 0;
const blue = 0;

const colorToHex = (color) => {
    const hexadecimal = color.toString(16);
    return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
}

const RGBtoHex = (red, green, blue) => {
    return "#" + colorToHex(red) + colorToHex(green) + colorToHex(blue);
}

console.log(RGBtoHex(red, green, blue));

BASH
#ff0000

How to convert from Hex to RGB

In the reverse direction, we can convert from Hex to RGB. Rather than use the toString(16) method, we can use the parseInt method.

Let's start with the hex we want to convert:

JAVASCRIPT
const hex = "#12ee42";

Now let's use the parseInt method and pull out 2-character pieces of this string to get a numerical value from this:

JAVASCRIPT
const hex = "#12ee42";

const red = parseInt(hex.substring(1, 3), 16);
const green = parseInt(hex.substring(3, 5), 16);
const blue = parseInt(hex.substring(5, 7), 16);

console.log(red, green, blue);

BASH
18 238 66

You can alternatively make a reusable function from this as well:

JAVASCRIPT
const hex = "#12ee42";

const hexToRGB = (hex) => {
    const red = parseInt(hex.substring(1, 3), 16);
    const green = parseInt(hex.substring(3, 5), 16);
    const blue = parseInt(hex.substring(5, 7), 16);

    return [red, green, blue];
}

console.log(hexToRGB(hex));

BASH
(3) [18, 238, 66]

Conclusion

In this post, we learned how you can convert from RGB to Hex and vice versa.

This is especially useful when you are working with web technologies, specifically front-end development.

Hopefully, this has been useful to you. Thanks for reading!

• Support Us