Colour Mixer
Mix two colours at any ratio in sRGB, linear or OKLab, with steps.
About this tool
Pick two colours and a ratio, and choose the colour space to mix in. The result shows as a swatch with hex, rgb() and color-mix() values, a nine-step blend from one colour to the other (click any step to copy it), and the 50/50 mix in each space for comparison.
Why the colour space changes the mix
Screens store colours as gamma-encoded sRGB numbers, which aren't proportional to light. Averaging those numbers directly (sRGB mixing, what many tools do) produces midpoints that are too dark and often muddy: blue and yellow make a dull grey-olive. Converting to linear RGB first mixes the way real light adds up, giving brighter midpoints. OKLab, a perceptual colour space published in 2020 and now built into CSS, is designed so equal numeric steps look like equal visual steps. Gradients and palettes made in OKLab stay vivid and evenly spaced, and the midpoint of black and white is a true perceptual mid-grey (#636363) rather than #808080. The tool uses the published OKLab matrices and the standard sRGB transfer function. The CSS color-mix() function lets browsers do the same mixing live, for example color-mix(in oklab, #1d4ed8 50%, #facc15), and is supported in all current browsers. Honest limits: this is light mixing for screens, not paint. Pigments mix subtractively, which is why blue and yellow paint make green. Colours that fall outside the sRGB range are clipped to the nearest displayable colour. The colour palette generator, the colour converter and the CSS gradient generator are related.
Frequently asked questions
How do I mix two colours?
Pick both colours and a ratio here. OKLab gives the most natural-looking blend.
Why do sRGB gradients look muddy?
sRGB values are gamma-encoded, so averaging them darkens and desaturates midpoints. OKLab avoids this.
What is color-mix() in CSS?
A CSS function that blends two colours in a chosen colour space, such as color-mix(in oklab, red 40%, blue).
Is anything stored or sent?
No. Everything is generated in your browser and nothing is stored or sent.