Mix two colors in any ratio and get the exact result. Blending runs in OKLab — the perceptual space CSS color-mix() uses by default, which avoids the muddy grays of naive RGB averaging — or in plain sRGB if you want the classic behavior. An 11-step blend scale comes with every mix.
Settings
Generated locally in your browser — your settings and results never leave this page.
Mixing light, correctly
Digital color mixing has a correct answer and a common answer, and they differ. The common answer averages the stored channel values — but sRGB channels are gamma-encoded, so their average is physically meaningless; blends dip dark and complementary pairs meet in mud. The correct answer mixes where the geometry is honest: this tool’s OKLab mode, the same space CSS color-mix() defaults to, where the midpoint of two colors actually looks like their midpoint.
The sRGB mode is retained deliberately — it reproduces what canvas operations and legacy tools compute, and matching existing output is sometimes the requirement. The 11-step scale renders both philosophies visible: compare the midpoints and the difference stops being abstract.
What the ratio slider is really doing
At ratio t, each OKLab coordinate travels t of the way from A to B — linear interpolation in a perceptual space. Alpha, when present, interpolates alongside. The endpoints are exact (0% is A, 100% is B, verified in tests), and the scale samples the path at 10% intervals — which doubles as a ready-made tint ladder when B is white or black.
Uses beyond curiosity
Flattening translucent colors (mix with the background at the alpha ratio — the exact compositing formula); building intermediate brand tones between two approved colors; generating hover states as 15% mixes toward black; predicting color-mix() output before shipping it (copy the generated declaration directly).
The paint disclaimer
None of this predicts pigment. Paint mixing is subtractive chemistry — blue and yellow make green because of absorption spectra, not interpolation. This tool models light and screens; the gradient tools extend the same math to multi-stop blends; the easel keeps its own counsel.
The 11-step scale as a design artifact
The blend scale is quietly the most reused output of this page: mixed toward white it is a tint ladder, toward black a shade ladder, toward a second brand color a relationship spectrum — and design reviews consume all three as visual arguments. A practical trick: mix your two brand colors and inspect the 40–60% region; if those midpoints look muddy even in OKLab, the pair will fight in every gradient and chart you build from them, and knowing before committing is worth the thirty seconds.
How to use the Color Mixer and Blender
- Pick colors A and B and slide the mix ratio.
- Choose the space: OKLab (perceptual, CSS default) or plain sRGB.
- Read the mixed color and the 11-step scale.
- Copy the value, the scale, or the equivalent CSS color-mix() line.
Frequently asked questions
Why do my two colors mix into gray mud in some tools?
Those tools average gamma-encoded sRGB channels – the numerically easy, perceptually wrong method. Complementary-ish pairs meet near the gray axis and the encoded average dips dark. Mixing in OKLab (this tool's default) travels a path that keeps lightness honest, which is why CSS chose it for color-mix().
What is the difference between the two mixing spaces here?
sRGB mode reproduces what canvas blends and old design tools do – useful for matching legacy output. OKLab mode produces what the mix should look like – and matches modern CSS. The 11-step scale makes the difference visible: watch the midpoints.
Does this predict how paints would mix?
No – paint is subtractive pigment chemistry (and famously non-linear); this is light math. Blue+yellow gives green in paint but near-gray in light. For screen work this tool is correct; for the easel, trust the brush.
How do I recreate the mix in plain CSS?
Copy the color-mix() output line – color-mix(in oklab, A x%, B) – which modern browsers compute natively, with the resolved hex in a comment as fallback for older ones. The css color-mix() Generator offers more spaces and options.
What is the mixed color's alpha if my inputs differ in opacity?
Alpha interpolates linearly with the same ratio – mixing a solid with a 50%-alpha color at 50% gives 75% alpha. The preview flattens against the checker background so you can see the effect.
Can I mix more than two colors?
Chain the tool: mix A+B, then mix the result with C – order matters slightly in sRGB, not in OKLab (it is a proper average). For scale generation between two ends, the Gradient Palette Generator does multi-step output directly.
Why is the 50% OKLab midpoint not what I expected numerically?
Because OKLab averages appearance, not channels – the midpoint's RGB numbers can land far from the channel-wise average while looking exactly "in between". Trust the swatch; the numbers serve it.
