RGBA to HSLA conversion

Benchmark created on August 20, 2025

Setup

function toHslaArrayOld(r, g, b, a) {
        const red = Math.min(Math.max(r, 0.0), 1.0);
        const green = Math.min(Math.max(g, 0.0), 1.0);
        const blue = Math.min(Math.max(b, 0.0), 1.0);

        const min = Math.min(red, green, blue);
        const max = Math.max(red, green, blue);

        const l = (min + max) / 2;

        if (min === max) {
            return [0, 0, l * 100, a];
        }

        const delta = max - min;

        const s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);

        let h = 0;
        if (max === red) {
            h = (green - blue) / delta + (green < blue ? 6 : 0);
        } else if (max === green) {
            h = (blue - red) / delta + 2;
        } else if (max === blue) {
            h = (red - green) / delta + 4;
        }

        h *= 60;

        return [
            Math.min(Math.max(h, 0), 360),
            Math.min(Math.max(s * 100, 0), 100),
            Math.min(Math.max(l * 100, 0), 100),
            a
        ];
    }
        
function toHslaArrayNew(r,g,b,a) {
  	const red = Math.min(Math.max(r, 0), 1);
    const green = Math.min(Math.max(g, 0), 1);
    const blue = Math.min(Math.max(b, 0), 1);

    const min = Math.min(red, green, blue);
    const max = Math.max(red, green, blue);
    const delta = max - min;

    const l = (min + max) * 0.5;

    if (delta === 0) {
        return [0, 0, l * 100, a];
    }

    const s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);

    let h;
    switch (max) {
        case red:
            h = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
            break;
        case green:
            h = ((blue - red) / delta + 2) * 60;
            break;
        default: // blue
            h = ((red - green) / delta + 4) * 60;
    }

    return [h, s * 100, l * 100, a];
    }
    
    const colors = Array.from({length: 500}, () => [Math.random(), Math.random(), Math.random(), Math.random()])

Test runner

for (let i = 0; i<colors.length; ++i) toHslaArrayOld(...colors[i])

for (let i = 0; i<colors.length; ++i) toHslaArrayNew(...colors[i])

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on August 20, 2025