Color mixer
Blend two colors in any proportion. Compare a plain sRGB average with perceptual OKLab mixing and see why they disagree.
#7D94A2#808466Every step from A to B
Top row OKLab, bottom row sRGB. Click to copy.
Why screens and paint mix differently
Paint mixes subtractively: yellow pigment absorbs blue light and blue pigment absorbs red and yellow, so only green survives — the reason the painter’s RYB wheel treats green as a secondary color. Screens mix additively: red, green and blue light add up to white. A digital “mix” is neither; it is an average of numbers, and the result depends on the space you average in. Averaging sRGB values of blue (rgb(0, 0, 255)) and yellow (rgb(255, 255, 0)) gives exactly middle grey. Averaging in OKLab, which models perceived lightness and opponent colors, keeps the lightness in between and lands on a pale neutral with a hint of green.
Frequently asked questions
What do you get when you mix blue and yellow?
With paint (subtractive mixing) you get green, because each pigment absorbs part of the spectrum. With light or a digital sRGB average you get grey (#808080 for pure blue and yellow), because the channels cancel out. Mixing in OKLab gives a light, slightly greenish neutral that is closer to what people expect.
Which mixing mode should I use for design?
OKLab for UI work: it gives even-looking steps and matches the CSS color-mix(in oklab, …) function. sRGB matches older tools and color-mix(in srgb, …).
Can I use this in CSS?
Yes. Copy the color-mix() snippet, which is supported in all current major browsers, or copy the resulting hex.