Color Converter
Convert colours between hex, RGB, HSL and HWB, with the luminance that contrast is calculated from.
About this tool
Converts colours between every notation CSS accepts — hex, `rgb()`, `hsl()`, `hwb()` — and reports the relative luminance of each.
The conversions are arithmetic and every tool does them. The luminance is the part worth having, because it is the number all contrast calculations are built on and it does not behave the way people expect. Green contributes far more to perceived brightness than blue does, so two colours that look equally dark can differ in luminance by a factor of three. That is why a palette that looks consistent passes contrast in one place and fails in another.
Named CSS colours are recognised, and an alpha channel is carried through rather than dropped.
Common questions
What is relative luminance?
A measure of perceived brightness on a scale from 0 for black to 1 for white, weighted so green counts for far more than blue. Every WCAG contrast ratio is computed from it, which is why it is shown here rather than left implicit.
Which notation should I use in CSS?
Hex for fixed values, HSL when you want to derive variants — a hover state is usually the same hue at a different lightness, which is one number in HSL and three in hex.
Why does the same colour give slightly different values back and forth?
Rounding. Hex has 8 bits per channel while HSL is expressed in degrees and percentages, so a round trip lands on the nearest representable value. The difference is never visible.
Does this handle transparency?
It carries alpha through and reports it, but luminance is calculated on the colour itself. What a translucent colour actually looks like depends on what is behind it, which this cannot know.