Colour Converter

Colour models are different coordinate systems over the same perceptual space, and converting between them is lossless only when both can express the colour. Understanding what each model is for explains why they disagree.

RGB — how screens work

A display produces colour by adding red, green and blue light. RGB is therefore an additive model, and its values describe a device instruction rather than a perception. CSS uses 0–255 per channel, which is 8-bit precision per channel and 16.7 million possible colours.

RGB's weakness is that it does not match human perception. The difference between (0,0,0) and (16,16,16) is far more visible than between (240,240,240) and (255,255,255), even though both are a distance of 16.

HEX — RGB written in base 16

#rrggbb is exactly the same information as rgb(r, g, b), expressed compactly for use in markup. There is no separate colour space and no conversion in the perceptual sense — it is a formatting difference.

HSL — designed for humans

Hue is the position on the colour wheel (0–360°). Saturation is the intensity, from grey to vivid. Lightness runs from black through the pure colour to white.

HSL is the model to reach for when you want to make a colour "a bit darker" or "less intense", because those operations map to a single component change. It is also how design systems generate a scale: hold hue and saturation, step lightness.

Its flaw is that lightness is not perceptual. Yellow at L=50% looks far brighter than blue at L=50%, so a scale generated by stepping lightness produces visually uneven results.

HSV/HSB — the colour picker model

Same hue and saturation as HSL, but Value is the maximum channel rather than the average. This is the model most native colour pickers use internally, because it maps cleanly onto the familiar cone or cylinder widget.

CMYK — how printers work

Printing subtracts light: cyan, magenta and yellow inks absorb red, green and blue respectively. Black (K) is added because mixing the three inks produces a muddy brown rather than a true black, and because black text is common enough that a dedicated ink is cheaper.

CMYK is device-dependent and gamut-limited. A saturated RGB blue simply cannot be reproduced in CMYK, and any conversion has to decide what to substitute. Without an ICC profile that decision is arbitrary, which is why on-screen CMYK previews routinely mislead.

Contrast and accessibility

The WCAG contrast ratio compares the relative luminance of two colours:

ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

The 0.05 offset accounts for ambient light reflecting off a screen in a typical room. The result ranges from 1:1 (identical) to 21:1 (black on white).

Luminance itself is not a simple average of the channels. Each is linearised to undo the sRGB gamma curve, then weighted 0.2126, 0.7152, 0.0722 — because the human eye is most sensitive to green and least to blue. Averaging raw RGB values gives noticeably wrong results for yellows and cyans.

Practical workflow

1. Pick a base colour in HSL, where adjustments are intuitive.
2. Generate a scale by stepping lightness in consistent increments.
3. Test each pairing you intend to use for text with the contrast checker.
4. Where a pair fails, adjust lightness — not hue or saturation, which change the brand colour.
5. Export as HEX for CSS, and as RGB or CMYK only when a specific downstream system requires it.

For serious colour work, consider OKLCH. It is a perceptually uniform space available in modern CSS, meaning equal numeric steps produce equal perceived steps — which HSL does not.