Build

Colour Converter — Hex, RGB, HSL and Back

This converts a colour between the notations CSS accepts — hex, RGB, HSL and named colours — including alpha. They describe the same colours in different coordinate systems, and which one you work in changes how easy certain tasks are.

When it helps

The immediate reason is that tools disagree: a design file gives you one notation, a stylesheet uses another, and a component library expects a third. The better reason is that HSL makes systematic work possible. Producing a consistent set of tints and shades by adjusting lightness while holding hue and saturation constant is straightforward in HSL and essentially guesswork in hex, which is why palettes built by hand in hex tend to drift.

Worth running automatically

Colour belongs in variables generated from one source rather than converted repeatedly by hand — that is a build-time concern. What is worth checking continuously is the result: extracting the palette a live page actually renders and comparing it against the intended one catches a stylesheet that failed to load, a component shipping its own defaults, or a third-party widget introducing colours nobody approved. That drift is invisible in review and obvious in an extraction.

What you get out of it

Removes friction between tools that disagree about notation, and makes systematic palette work possible rather than approximate — generating a consistent set of tints from one base colour is arithmetic in HSL and guesswork in hex, which is why hand-built palettes drift.

Also in Build