Color Mixer

Mix two colours at any ratio and get an even colour scale — in perceptual OKLab or sRGB — with CSS color-mix().

What colour do you get when you mix two colours?

Pick two colours and a ratio; the mixer blends them in the OKLab colour space (perceptually even, like CSS color-mix(in oklab, …)) or in sRGB, and shows the result and a step-by-step scale between them with hex codes.

OKLab vs sRGB

Mixing in sRGB (simple averaging of red, green and blue) often gives dull, greyish midpoints — for example between blue and yellow. OKLab mixes in a way that matches how we perceive colour, so scales look smooth and vivid. Modern CSS supports both via color-mix().

Frequently asked questions

Is this the same as mixing paint?

No — screens mix light (additive), paint mixes pigments (subtractive), so results differ.

Can I use the scale in Tailwind?

Yes, copy the hex codes into your config.

Which browsers support color-mix()?

All current browsers since 2023.