Colour Mixer (sRGB vs OKLab)
Mix two colours in plain sRGB and in OKLab side by side, with a hex ramp.
A straight average of the gamma-encoded hex numbers — exactly what a naive lerp does.
Mixing in OKLab space, which matches human perception; the midpoint comes out lighter and more natural than a plain RGB blend.
Averaged inside OKLab, so lightness and chroma stay even across the ramp.
Like OKLab, but hue rotates along the shortest arc so the ramp stays saturated.
About Colour Mixer (sRGB vs OKLab)
Averaging two hex codes averages gamma-encoded sRGB numbers, not light. Blend #0000ff with #ffff00 that way and you land on dead grey #808080; the same blend in OKLab gives #6cabc7. This tool runs both paths at once and shows them side by side, plus an OKLCH version that rotates hue along the shortest arc.
How to use Colour Mixer (sRGB vs OKLab)
- 1
Pick two colours with the swatch pickers, or type their hex codes in the field next to each one.
- 2
Drag the share slider to the percentage you want — 0 is pure first colour, 100 is pure second colour.
- 3
Compare the sRGB, OKLab and OKLCH cards side by side and copy whichever hex you need.
- 4
Change the step count and click any swatch in the ramps to copy that step's hex code.
- 5
Take the CSS box: it holds the variables, the equivalent color-mix() call and an OKLab gradient.
Frequently asked questions
Why do the sRGB and OKLab results differ so much?
A hex code is not a light value — it is a number encoded with roughly a 2.2 gamma. Averaging two gamma-encoded numbers does not land on the perceptual midpoint. Concrete case: the midpoint of black and white in sRGB is #808080, but the grey the eye reads as halfway is #636363, which is exactly what OKLab gives at L=50%.
Does this match the browser's color-mix(in oklab, …)?
For opaque colours, yes. Both do a linear interpolation in OKLab, and the matrices implemented here are the original OKLab ones. The only possible difference is out-of-gamut results: this tool clips each channel, whereas some browsers apply a more careful gamut mapping.
So should I always use OKLCH?
No. OKLCH is excellent for single-hue ramps or colours close on the wheel, but red to blue travels through magenta and the midpoint comes out as #ba00c2, which falls outside sRGB and gets clipped — the card warns you when that happens. For two distant colours, OKLab is usually the safer result.
Are alpha and semi-transparent colours supported?
No. The inputs accept opaque 3- or 6-digit hex only, and any alpha channel is ignored. If you are mixing a translucent layer, first compute the flattened colour over its background, then mix that here. Everything runs in your own browser; nothing is uploaded.