Color Mixer
Mix two colours together in any ratio and see the blend steps between them, using either perceptual OKLab mixing or traditional sRGB averaging.
Result
Choose two colours to mix.
How to use this tool
- Choose two colours and how much of the second colour to mix in.
- Choose OKLab for natural-looking blends or sRGB to match most design software.
- The result shows the mixed colour, the blend steps between the two colours and the equivalent CSS
color-mix().
How it works
sRGB: each channel is interpolated directly: mix = first + (second − first) × amount.
OKLab: both colours are converted to the perceptual OKLab space, interpolated there, and converted back. Because OKLab models how bright colours look, blends keep an even perceived lightness instead of passing through a dull middle.
Example
Black and white, half and half
In sRGB the midpoint is #808080. In OKLab it is #636363, which looks like a true perceptual mid-grey.
Privacy and limitations
- Mixing happens in your browser.
- This is light (additive) mixing on screen. Mixing paints is subtractive — blue and yellow paint make green, but blending blue and yellow light gives grey or pink tones.
Frequently asked questions
Why does blue plus yellow not make green here?
Screens mix light, not pigment. Blending blue and yellow light averages their wavelengths, which does not produce the green you get from mixing paint.
Can I use the result in CSS directly?
Yes — modern browsers support color-mix(in oklab, …); the tool shows the equivalent expression.