How to Convert a Hexadecimal Value to an Array of RGB Values in JavaScript?

You can convert a hexadecimal value to an array of RGB values using JavaScript, in the following ways:

• Using a Regular Expression;
• Using String.prototype.substring();
• Using Bitwise Right Shift Operator (>>).

Using a Regular Expression

You can convert a hexadecimal value to an array of RGB values using regular expression in the following way:

1. Use a regular expression to split the hexadecimal value into a pair of two characters (one for each channel of red, green and blue);
2. Convert each channel of red, green and blue to their corresponding decimal value;
3. Return an array of red, green and blue values.

For example, you can implement this like so:

const hexToRGB = (hexValue) => {
    const hex = hexValue.match(/.{2}/g);

    const r = parseInt(hex[0], 16);
    const g = parseInt(hex[1], 16);
    const b = parseInt(hex[2], 16);

    return [r, g, b];
};

console.log(hexToRGB('4287f5')); // [66, 135, 245]
console.log(hexToRGB('ffffff')); // [255, 255, 255]
console.log(hexToRGB('000000')); // [0, 0, 0]

Using String.prototype.substring()

You can convert a hexadecimal value to an array of RGB values using String.prototype.substring() in the following way:

1. Use String.prototype.substring() to split the hexadecimal value into a pair of two characters (one for each channel of red, green and blue);
2. Convert each channel of red, green and blue to their corresponding decimal value;
3. Return an array of red, green and blue values.

For example, you can implement this like so:

const hexToRGB = (hexValue) => {
    const r = parseInt(hexValue.substring(0, 2), 16);
    const g = parseInt(hexValue.substring(2, 4), 16);
    const b = parseInt(hexValue.substring(4, 6), 16);

    return [r, g, b];
};

console.log(hexToRGB('4287f5')); // [66, 135, 245]
console.log(hexToRGB('ffffff')); // [255, 255, 255]
console.log(hexToRGB('000000')); // [0, 0, 0]

Using Bitwise Right Shift Operator (>>)

You can convert a hexadecimal value to an array of RGB values by shifting binary bits of the hexadecimal value in the following way:

1. Parse the hexadecimal value into its integer equivalent;
2. Use bitwise operators to extract the red, green, and blue components from the hex value as follows:
   1. The red component is extracted by shifting the bits of the hex value to the right by 16 positions (discarding the bits representing green and blue components), and then performing a bitwise AND operation with 255 to only retain the lowest 8 bits of the value;
   2. The green component is extracted by shifting the bits of the hex value to the right by 8 positions, and then performing a bitwise AND operation with 255 to only retain the lowest 8 bits of the value;
   3. The blue component is extracted by performing a bitwise AND operation with 255 directly on the hex value to retain the last 8 bits of the value.
3. Return an array of red, green and blue values.

For example, you can implement this like so:

function hexToRGB(hexValue) {
    const hex = parseInt(hexValue, 16);

    const r = (hex >> 16) & 255;
    const g = (hex >> 8) & 255;
    const b = hex & 255;

    return [r, g, b];
}

console.log(hexToRGB('4287f5')); // [66, 135, 245]
console.log(hexToRGB('ffffff')); // [255, 255, 255]
console.log(hexToRGB('000000')); // [0, 0, 0]

To understand how this works, let's suppose the hexadecimal value you're working with is "4287f5", which is represented in binary as:

const hex = parseInt(hexValue, 16); // 0b010000101000011111110101 (or 4360181)

When extracting the red component, for example, the bits are shifted 16 positions to the right, resulting in:

4360181 >> 16 = 0b10000101000011111110101

Finally, performing a bitwise AND operation between the shifted value and 255 (or 0b11111111 in binary) extracts the last 8 bits of the shifted value, which results in the final value for the red color channel being:

0b01000010 & 0b11111111 = 0b01000010 (or 66)

Similarly, the green component is extracted as follows:

const g = (hex >> 8) & 255;
// g = (4360181 >> 8) & 255 = 0b010000101000011111110101
// g = 0b0100001010000111 & 0b11111111
// g = 0b10000111 (or 135)

Finally, the blue component is extracted as follows:

const b = hex & 255;
// b = 4360181 & 255 = 0b010000101000011111110101
// b = 0b010000101000011111110101 & 0b11111111
// b = 0b11110101 (or 245)