Colour Lab

Features

• Mixing: RGB linear and OKLab side by side, so the difference is visible
• Lighten / darken in either OKLCH L (perceptual) or HSL L (geometric)
• Scales: tints, shades, or an even-lightness ladder in OKLCH
• Colour difference: CIE76, CIE94 and CIEDE2000, one at a time or all three
• Sort a set by hue, lightness, saturation or WCAG perceived luminance
• Colour-wheel geometry: midpoint, split complementary, triadic, analogous
• One colour per line: #hex, rgb(), hsl() and CSS colour names
• Every result gets a swatch and hex, rgb and hsl forms
• Copy a row on its own, or copy the whole list
• Everything is computed locally; the page makes no requests

How to use

1. Type one colour per line (mixing and difference need at least two)
2. Pick a mode: mix, adjust, scales, difference, sort or harmonies
3. Set the ratio, amount, number of steps or metric for that mode
4. Results appear at once; copy a row with the button beside it

FAQ

How exactly do RGB and OKLab mixing differ?

RGB linear mixing takes the midpoint of each of the three channels, which is how a display combines two pixels. Its flaw is that the middle passes through grey: half red and half green give `#808000`, a dark olive. OKLab mixing first converts to the perceptually uniform OKLab space and interpolates there, so the middle never falls into grey — red and green give a brighter yellow. For gradients, mixes and midpoints, OKLab is closer to what people expect, which is why modern design tools default to it.

Why two readings for lightening?

OKLCH L is perceptual lightness; pushing L towards 1 gives another light colour of the same hue and keeps saturated hues saturated, which is the design-tool default. HSL L is geometric lightness; pushing L towards 100 washes the colour out, so saturated cyans, blues and magentas near the ends of the wheel lose chroma and turn grey. Both are kept, because washing out is sometimes the effect you want.

Which of the three difference metrics should I read?

CIE76 is a plain Euclidean distance in Lab, the simplest and crudest. CIE94 adds weighting for chroma and hue and is a common graphic-arts compromise. CIEDE2000 is closest to the eye, adding a hue-rotation term, and is the recommended metric today. Rough perceptibility: below 1 is invisible, 1 to 2 is visible to a trained eye, above 5 is clearly a different colour. The thresholds shift a little between metrics, so compare like with like.

Which input formats are accepted?

One per line: `#hex` (3 or 6 digits), `rgb()`, `hsl()`, and CSS colour names such as `tomato`. Parsing reuses the same code as the Colour Converter tool, so anything that tool accepts works here. A line that cannot be parsed is reported rather than silently dropped.