Convert an RGB color to HEX in JavaScript

In RGB, each color channel (red, green, and blue) is represented by an 8-bit value, ranging from 0 to 255. The combination of these three values determines the overall color.

For example:

• RGB(255, 0, 0) represents pure red 🔴;
• RGB(0, 255, 0) represents pure green 🟢;
• RGB(0, 0, 255) represents pure blue 🔵.

The HEX code is a hexadecimal representation of the RGB values. It uses a six-character code, where the first two characters represent the red component, the next two represent green, and the last two represent blue. Each pair of characters in the HEX code corresponds to a value between 00 and FF in hexadecimal, which is equivalent to 0 to 255 in decimal.

For example:

• #ff0000 represents pure red 🔴;
• #00ff00 represents pure green 🟢;
• #0000ff represents pure blue 🔵.

The conversion from RGB to HEX involves taking the decimal values of the RGB components, converting them to hexadecimal, and then concatenating them to form the six-character HEX code.

Let's create a function in JavaScript to illustrate this functionality.

function rgbToHex(red, green, blue) {
    // Ensure that the values are within the valid range (0 to 255)
    red = Math.min(255, Math.max(0, red));
    green = Math.min(255, Math.max(0, green));
    blue = Math.min(255, Math.max(0, blue));

    // Convert decimal to hexadecimal
    const redHex = red.toString(16).padStart(2, '0');
    const greenHex = green.toString(16).padStart(2, '0');
    const blueHex = blue.toString(16).padStart(2, '0');

    // Concatenate the HEX values
    const hexCode = `#${redHex}${greenHex}${blueHex}`;

    // Convert to uppercase for consistency
    return hexCode.toUpperCase();
}

Using the rgbToHex function:

const red = 31;
const green = 78;
const blue = 47;

const hexCode = rgbToHex(red, green, blue);
console.log(hexCode); // #1F4E2F

If you want to parse a string in the format "rgb(255, 255, 255)" and extract the individual RGB values, you can use the following JavaScript function:

function parseRgb(rgbString) {
    // Extract the numbers from the string
    const regex = /(\d+),\s*(\d+),\s*(\d+)/;
    const matches = rgbString.match(regex);

    if (!matches) {
      // Return null or handle the case where the input doesn't match the expected format
      return null;
    }

    // Extract RGB values from the matches
    const red = parseInt(matches[1], 10);
    const green = parseInt(matches[2], 10);
    const blue = parseInt(matches[3], 10);

    // Return an object with the RGB values
    return { red, green, blue };
}

Using the parseRgb function:

const rgbString = "rgb(31, 78, 47)";
const rgbValues = parseRgb(rgbString);

console.log(rgbValues); // { red: 31, green: 78, blue: 47 }

Using the parseRgb and rgbToHex functions together:

const rgbString = "rgb(31, 78, 47)";
const rgbValues = parseRgb(rgbString);
const { red, green, blue } = rgbValues;
const hexString = rgbToHex(red, green, blue);

console.log(hexString); // #1F4E2F