Orpheus

HEX, RGB and HSL Color Converter

Convert between colour notations, with contrast ratios.

Result

Everything is processed in this tab. Nothing you paste is sent anywhere.

Every tool runs entirely in your browser. Your files are never uploaded to a server.

HEX, RGB and HSL describe the same colours in different notations. HEX and RGB are the same numbers in different bases; HSL restates them as hue, saturation and lightness, which is far easier to adjust by hand.

How to use Color Converter

  1. Paste colours. One per line, in any of the three notations. Short hex like #fff works.
  2. Read all three notations. Each line is converted to HEX, RGB and HSL together.
  3. Check contrast. Give two colours and the WCAG ratio between them is shown.

About converting colour values

The three common notations describe the same sRGB colour space and differ only in how they present it. HEX and RGB are numerically identical — one is base sixteen and the other base ten — so converting between them is a formatting change rather than a calculation. HSL is a genuine transformation, restating the three channels as hue, saturation and lightness, and it earns its place by being adjustable. Producing a lighter variant of a brand colour is a single number in HSL and a guess in HEX, which is why design systems are usually specified that way. Contrast is where colour choices stop being aesthetic. The WCAG ratio is computed from relative luminance rather than from the raw channel values, weighting green far more heavily than blue because human vision does. That is why light grey text on white so often fails despite looking fine to the person who chose it, and why dark blue on black can fail even at what looks like a large difference. The thresholds — 4.5:1 for body text, 3:1 for large — are minimums rather than targets, and the formula has known limitations: it takes no account of font weight, and it is unkind to thin typefaces that clear it on paper and remain hard to read in practice.

Frequently asked questions

What is the difference between HEX and RGB?
Only notation. #ff8800 and rgb(255 136 0) are the same colour — hexadecimal against decimal for the same three channel values. HEX is more compact and RGB is easier to read and to compute with.
Why use HSL?
Because it maps onto how people describe colour. Making something lighter means raising one number rather than adjusting three, and a set of related shades is the same hue at different lightness values. Building a palette in HSL is far easier than in HEX.
What contrast ratio do I need?
WCAG AA requires 4.5:1 for body text and 3:1 for large text, which means 18pt or 14pt bold. AAA requires 7:1. The ratio runs from 1:1 for identical colours to 21:1 for black on white.
Does a passing contrast ratio mean it is readable?
It means it clears a measurable threshold, which is not the same thing. The formula ignores font weight, size beyond the two bands, and the known weakness of pure-blue text. Treat it as a floor, and check the result with your eyes.

Last updated