How to convert RGB to HEX in JavaScript

Converting RGB (Red, Green, Blue) colors to hexadecimal format is a common task in web development. Hexadecimal color codes are widely used, especially in web design and CSS.

In this article, we will explore how efficiently we can convert CSS RGB to HEX values programmatically using JavaScript.

Understand RGB and HEX Color Codes

RGB (Red, Green, Blue) and HEX are two common codes to represent colors in web development.

RGB Color Codes

RGB color codes use a combination of red, green, and blue values to create a wide array of colors. Each value ranges from 0 to 255.

For example, RGB(255, 0, 0) represents pure red, RGB(0, 255, 0) represents pure green, and RGB(0, 0, 255) represents pure blue. White is represented as RGB(255, 255, 255), while black is RGB(0, 0, 0).

HEX Color Codes

HEX color codes are hexadecimal values that represent colors. They are commonly used in web development.

Each HEX color code starts with a hash symbol (#) followed by a combination of six characters (0-9 and A-F), representing the intensity of red, green, and blue.

For example, #FF0000 represents red, #00FF00 represents green, and #0000FF represents blue. White is represented as #FFFFFF, while black is #000000.

Convert RGB to HEX in JavaScript

The RGB to HEX conversion involves converting three separate values (R, G, B) into a single hexadecimal color code. The formula to convert RGB to HEX is as follows:

const rgbToHex = (r, g, b) => {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};
        

In the above code snippet, the rgbToHex function takes three parameters representing the Red, Green, and Blue values and returns the corresponding hexadecimal color code.

Explanation of RGB to Hex Conversion Function

This function takes three parameters representing the red, green, and blue values of a color and converts them into a hexadecimal color code.

Code Breakdown:

The function code is as follows:

const rgbToHex = (r, g, b) => {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};

r g b: Values representing the red, green, and blue components of the color, respectively.

• <<: Bitwise left shift operator used for shifting the bits to the left.
• .toString(16): Converts the computed value to a hexadecimal representation.
• .slice(1): Removes the leading '0' in the hexadecimal value to ensure it is a 6-digit color code.

Let's break down the expression inside the return statement:

1. (1 << 24): Shifts '1' 24 bits to the left, effectively creating '0x1000000'.
2. (r << 16): Shifts the red value 16 bits to the left.
3. (g << 8): Shifts the green value 8 bits to the left.
4. b: Represents the blue value.
5. .toString(16): Converts the sum into a hexadecimal string.
6. .slice(1): Removes the leading '1' to get the final 6-digit hexadecimal color code.

Combining these operations, the function returns a string that represents the color in hexadecimal format.

💡Also checkout How to convert HEX to RGB in JavaScript

Example: Convert RGB to HEX

Let's see an example of how to use the rgbToHex function to convert RGB values to HEX:

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

const hexColor = rgbToHex(red, green, blue);
console.log(hexColor); // Output: #ffa500
        

Tools to convert HEX to RGB and RGB to HEX 🚀

Explore the quick tools for the conversion.

1. HEX to RGB Converter Online
2. RGB to HEX Converter Online