Color Mixer
Blend two colours and see every step between them — then copy any of them.
Click any step to copy it.
Why the colour space matters: mixing blue and yellow in plain sRGB passes through a dull grey; OKLab keeps the blend bright and even because it models how we actually see lightness. Modern CSS can do this natively with color-mix(in oklab, …) — the copy button gives you that snippet too.
About the Color Mixer
The Colour Mixer blends two colours and shows every step between them. Mix in OKLab for natural, perceptual blends, OKLCH for vivid blends that travel around the colour wheel, or classic sRGB, then copy any step’s HEX code or the CSS color-mix() function for gradients, hover states and palettes.
How to use the Color Mixer
- Choose colour A and colour B.
- Pick the mixing space: OKLab, OKLCH or sRGB.
- Set the mix amount and the number of steps.
- Click any step to copy it, or copy the CSS color-mix().
Frequently asked questions
Why does mixing in RGB look muddy?
Blending red, green and blue values in a straight line passes through dull, greyish colours. Perceptual spaces such as OKLab keep the blend bright and even.
What is CSS color-mix()?
color-mix() is a CSS function that blends two colours in the browser, for example color-mix(in oklab, red 40%, blue).
What is the difference between OKLab and OKLCH?
Both model how people see colour. OKLab blends in a straight line; OKLCH blends around the hue wheel, which gives more vivid in-between colours.