Color converter

One colour, three dialects

In a normal working day the same colour arrives in three costumes: the brand guide hands you a HEX code, a canvas or charting library wants the RGB numbers, and modern CSS is nicest to tweak in HSL. This page keeps all three in step — type into whichever field matches what you were given and the other two rewrite themselves as you type, with the swatch showing you what the numbers actually look like. Shorthand HEX works too: paste #f80 and it expands to #ff8800, exactly as a browser would read it. There is no colour picker to fight with; the point here is translating a value you already have, precisely.

Building a palette with HSL

HSL earns its keep the moment you need variations of a colour rather than the colour itself. Keep the hue fixed and slide only the lightness: drop it ten points for a hover state, raise it forty for a tinted background, and every variant stays recognisably the same colour — something almost impossible to do by editing HEX digits directly. Lowering the saturation gives the muted, greyed version that works for disabled buttons and subtle borders. Because the fields update each other live, a quick workflow is to paste your brand HEX, read off the HSL, nudge one number, and copy the fresh HEX back out — a small palette in under a minute, no design software involved.

Honest limits, and a neighbouring trick

Two things this converter deliberately does not do. It has no alpha channel — the RGB field speaks rgb(), not rgba() — so transparency is something you add afterwards in your CSS, where it belongs. And HSL values are rounded to whole numbers for readability, which means a HEX to HSL to HEX round trip can drift by a single point; invisible on screen, but worth knowing if you diff style files. The tool is free without limits, like all our developer tools. A pairing worth remembering: once this page has told you exactly which colour a logo background is, our image transparency tool can remove precisely that colour from the image — a handy two-step when preparing graphics for a website.

Three ways to describe the same color

HEX and RGB describe a color by red, green and blue light intensity (just in different notations) — HSL describes it by hue, saturation and lightness instead, which is often more intuitive for picking or adjusting a shade by hand.