A colour on a screen is three numbers, and every format on this page is a different way of writing the same three. What separates them is not what they can express but how they behave when you change one number.

#7c3aed
rgb(124 58 237)
hsl(262.1 83.3% 57.8%)
hwb(262.1 22.7% 7.1%)
oklch(53.44% 0.2447 292.16)

The same colour. The last one is the only spelling that knows
how light it looks.

HSL lies about lightness

hsl(60 100% 50%)    yellow    perceived lightness 97%
hsl(240 100% 50%)   blue      perceived lightness 45%

Both are "50% lightness" in HSL. One of them is nearly white
and the other is nearly black.

HSL is a geometric transform of RGB, which makes it easy to compute and useless as a description of how a colour looks. Its "lightness" is the midpoint between the largest and smallest channel, and that has almost nothing to do with brightness: yellow at 50% is dazzling and blue at 50% is nearly black.

The practical consequence is that a palette built by rotating hue at fixed saturation and lightness comes out wildly uneven, with the yellows glaring and the blues disappearing. Every hand-tuned palette in every design system has been fixed for exactly this, one colour at a time.

OKLCh is the one that behaves

Same three ideas, lightness and chroma and hue, but this time built on a model of the human eye instead of the geometry of a cube. Its lightness tracks what you actually perceive, so two colours sharing an L value look equally light no matter what hue they are.

That makes a few jobs suddenly easy:

A scale. Hold hue and chroma, step the lightness. The ramp above is that and nothing else, and it stays recognisably one colour from top to bottom.
A palette. Rotate the hue at fixed lightness and every colour carries the same weight on the page.
Interpolation. Gradients in OKLCh keep their colour through the middle. Cross between complements in sRGB and you get a grey sag halfway.

Lab and LCh do the same job and predate it by decades. OKLab fixes Lab's known weaknesses around blue, where Lab's hue lines bend badly enough that a blue-to-white ramp visibly turns purple.

Not every colour fits on a screen

oklch(), lab() and their polar forms can describe colours far outside what sRGB can show. Ask foroklch(70% 0.4 145) and you have named a green that no ordinary monitor can produce.

Those are marked above. The scale is built by searching for the most saturated chroma that actually fits at each lightness. The obvious approach, keeping the original chroma and clamping the channels afterwards, goes wrong because clamping works one channel at a time. It drags the colour sideways as well as inwards. That is exactly why the light and dark ends of hand-built ramps drift off towards some other hue.

Contrast, and the two answers to it

#767676 on white        WCAG 4.54:1   passes AA
#949494 on black        WCAG 4.51:1   passes AA

The second one is noticeably harder to read. WCAG 2 cannot
tell them apart, because a ratio of luminances has no idea
which one is the text.

WCAG 2's contrast ratio is a ratio of relative luminances with 0.05 added to each to keep the arithmetic away from zero. It is from 2008, it is written into accessibility law in several countries, and it has two known failings: it over-rates light grey on white, and it under-rates almost everything on a dark background.

The second one is why a dark theme built to pass 4.5:1 often reads worse than a light one that barely passes. Polarity matters to the eye and the ratio has no way to express it. The formula is symmetric, so it has no idea which of the two colours is the text.

APCA is the candidate replacement being developed for WCAG 3. It models perceived lightness contrast and it knows about polarity, so a negative value means light text on a dark background. Instead of a ratio you get a number somewhere between -108 and 106. It is still a draft and the numbers shift between revisions. This one is 0.98G-4g.

Use both, and when they disagree, trust your eyes. The thresholds worth remembering:

WCAG 2	For
3:1	Large text (24px, or 18.66px bold), icons, form borders, focus rings
4.5:1	Body text. The AA line, and the one most audits check
7:1	Body text at AAA
21:1	The maximum: black on white

CMYK here is a rough guide and nothing more

Real CMYK is a property of an ink set, a paper stock and a press, described by an ICC profile. The conversion on this page knows about none of that: it is the same naive arithmetic every design tool does when you have not given it a profile.

It is fine for a starting point and it is not what will come off a press. Bright greens, oranges and blues in particular are outside what CMYK inks can reach at all, and the printer's profile will do something about that which this formula cannot predict.

Alpha is not a colour

#7c3aed80 is not darker; it is see-through, and what it looks like depends entirely on what is behind it. Two consequences worth knowing: the contrast numbers above use the colour as if it were opaque, because contrast against an unknown background is not a question with an answer; and a semi-transparent colour on a semi-transparent colour compounds, which is how overlays end up muddier than anybody intended.

What the simulations are for

About one man in twelve and one woman in two hundred has some form of colour vision deficiency, most often in the red-green axis. The panels above show what a published model predicts for the extreme cases, which is not the same as what any individual sees, and is not an accessibility test.

There is one question they answer well: if the two things you are asking somebody to tell apart come out the same colour here, then colour alone was never doing the job. Add a shape, a label, a pattern or a difference in lightness, and the colour becomes a bonus instead of the whole signal.

Color Converter & Contrast

Every way of writing it

Contrast

A scale from this colour

Seen with a colour vision deficiency