Rgb to hex and hex to RGB

javascript

functions

performance

best-practices

byAnton Shumikhin·Nov 12, 2024

// RGB to Hex conversion
const rgbToHex = (r, g, b) => `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;

// Hex to RGB conversion
const hexToRgb = hex => {
    // Using Array destructuring and parseInt
    let [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
    return { r, g, b }
};

// Snapshot of the conversion
let hex = rgbToHex(255, 165, 0); // "#ffa500" 
let rgb = hexToRgb("#ffa500");   // { r: 255, g: 165, b: 0 }

The rgbToHex and hexToRgb functions above showcase how to convert between RGB and hex color formats in a compact and efficient manner.

Unpacking conversion functions

Component to hex helper function

To make the conversions simpler, you could use the following helper function:

function componentToHex(c) {
    const hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

This function converts an RGB component to hex, taking care of single-digit results by padding them with 0.

Dealing with non-integer RGB values

When the RGB values are not integers, ensure to round off:

function roundAndConvert(r, g, b) {
    return rgbToHex(Math.round(r), Math.round(g), Math.round(b));
}

Parsing shorthand hex codes

The hexToRgb function can be enhanced to handle shorthand hex codes:

function expandShorthandHex(hex) {
    // Wait, only 3 digits! Let's double up
    if(hex.length === 4) {
        hex = hex.replace(/([^#])/g, '$1$1');
    }
    return hex;
}

This function expands shorthand hex codes, providing a more flexible approach to hexadecimal conversion.

Conversions at the speed of light

For maximum efficiency, we can use operations known for their speed, namely bitwise operators:

function rgbToHexFast(r, g, b) {
    return ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
}

This speedy alternative uses bit shifting and addition for quick and precise conversion.

Best practices and optimization

Boost performance with typed arrays

In high-performance scenarios like image processing, using typed arrays can reduce time complexity:

function rgbToHexTyped(r, g, b) {
    const rgb = new Uint8Array([r, g, b]);
    // Let's map this RGB data into the Hex world
    return Array.from(rgb)
        .map(n => n.toString(16).padStart(2, '0'))
        .join('');
}