Colour converter
HEX, RGB, HSL and contrast checks
Lightness steps, keeping the hue. Click any one to copy it.
Large text looks like this
And body text at a normal size looks like this.
This tool runs entirely inside your browser. Your files are never uploaded, never stored, and never seen by anyone but you.
What it takes
HEX in any length — #abc, #aabbcc, and both with an alpha digit or pair — rgb() and hsl() in either the comma form or the modern space form, percentages or numbers, and all 148 CSS colour names. Copy whatever your dev tools printed and it will read it.
Everything converts through one place
Every input becomes RGB, and every output is derived from that. It is the straightforward way to build a converter and it avoids the classic failure where HEX to HSL and HSL back to HEX disagree by a digit, because there is only ever one conversion in each direction.
The contrast check
The ratio is WCAG's, including the gamma expansion that a naive average of the channels leaves out — the shortcut produces numbers that look plausible and are wrong, which matters when a pass or fail badge is the thing being relied on.
AA asks for 4.5:1 for body text and 3:1 for large text, meaning 18pt or 14pt bold. AAA asks for 7:1 and 4.5:1. Those are minimums for legibility, not targets — text well above the line is easier to read for everyone, not only for people the standard had in mind.
Shades
The scale walks lightness while holding hue and saturation, rather than mixing toward white and black. Mixing desaturates as it goes and gives you nine washed-out variants; this keeps the character of the colour at every step.
Alpha
Translucent colours are shown over a checkerboard so they read as translucent. Note that the contrast figure uses the colour itself, not the colour as blended over the background — translucency over an unknown backdrop has no single answer, and reporting one would be a guess dressed up as a number.
Is anything sent anywhere?
No. It is arithmetic, and it happens in your browser.