# Convert Rgb Number Array To Hexadecimal Color String

## 09 June 2020 - 1 answer

I have already written a working method, that can convert an array of rgb values to a hexadecimal color string:

``````/**
* @param {Number[]} arr Array with three entries (rgb: [0-255, 0-255, 0-255]).
* @return {String} Hex color as a string (rgb: '#000000' - '#ffffff').
*/
function arrToHex(arr) {
return '#' + arr
.map(v => ('0' + v.toString(16)).slice(-2))
.join('');
}
``````

But I'm unsure whether this method is the best approach when it comes to efficiency. This method is called pretty often in my code.

Especially the part with `('0' + v.toString(16)).slice(-2)` (to get a double hexadecimal) seems too complicated to me. Can this be done better? Is this functional approach even the best?

# Performance evaluations:

Results show average seconds calculated by console.time if run with Google Chrome v83 (64bit, Linux). Ordered from best to worst.

### Iterative and lookup table solution by selbie: (~1.1sec)

``````const hextable = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
function arrToHex(arr) {
let s = '#';
for (let i = 0; i < arr.length; i++) {
s += hextable[(arr[i] / 16) | 0];
s += hextable[arr[i] % 16 | 0];
}
return s;
}

console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');``````

### Iterative and no lookup table solution by selbie: (~1.8sec)

``````function arrToHex(arr) {
let s = '#';
for (let i = 0; i < arr.length; i++) {
s += ((arr[i] / 16) | 0).toString(16);
s += ((arr[i] % 16) | 0).toString(16);
}
return s;
}
console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');``````

### Non-iterative solution by [deleted]: (~2.6sec)

``````function arrToHex(arr) {
const rgb = arr[2] | (arr[1] << 8) | (arr[0] << 16);
}

console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');``````

### My bad functional approach: (~6.5sec)

``````function arrToHex(arr) {
return '#' + arr
.map(v => ('0' + v.toString(16)).slice(-2))
.join('');
}

console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');``````

You could try benchmarking this code:

``````const hextable = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];

function arrToHex(arr) {
let s = '#';
for (let i = 0; i < arr.length; i++) {
s += hextable[(arr[i] / 16) | 0];
s += hextable[arr[i] % 16 | 0];
}
return s;
}
``````

Or as discussed in the comments, to avoid the table lookup and rely on the runtime to do the mapping:

``````function arrToHex(arr) {
let s = '#';
for (let i = 0; i < arr.length; i++) {
s += ((arr[i] / 16) | 0).toString(16);
s += ((arr[i] % 16) | 0).toString(16);
}
return s;
}
``````