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

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)
```

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.