Color Mixer

How to use the Color Mixer

Enter Colour A and Colour B.

Drag the Mix ratio slider to set how much of each colour goes into the result.

Pick the colour space in Blend in colour space and the number of Steps.

Copy the mixed colour, any step, or the CSS / HEX list / JSON output.

Mix colors online and see every step

Mixing two colours sounds simple, but the result depends on the colour space you mix in. This color mixer shows the blended colour at any ratio, the in-between steps for gradients and charts, and the equivalent native CSS color-mix() expression.

Why the colour space matters

sRGB: mixes the raw channel values. Complementary colours meet in a muddy grey, e.g. blue + orange.
Linear RGB: mixes light physically, like overlapping spotlights; results look brighter.
OKLab (default): a perceptual space where equal steps look equally different, giving smooth, natural blends.
Lab / LCH / OKLCH / HSL: the polar spaces (LCH, OKLCH, HSL) rotate through the hue wheel, producing vivid intermediate colours — sometimes unexpected ones.

Example: #0ea5e9 and #f97316 at 50% give #ab9798 in OKLab, a soft neutral, while HSL passes through saturated greens and yellows.

Worked example: black and white at 50%

Mixing black and white halfway is the clearest way to see how much the colour space changes a result. The same two colours and the same ratio give three different greys:

sRGB        #808080   (channel values averaged: 127.5 → 128)
Linear RGB  #bcbcbc   (half the light energy, which looks lighter)
OKLab       #636363   (perceptual lightness 0.5, which looks darker)

None of them is wrong. Linear RGB models what happens when two lights overlap, which is why it suits glows and physical blends. OKLab places the mid-point where the eye expects it, which is why it is the default for UI palettes and gradient stops. Try the pair in the mixer and switch the colour space to watch the result move.

CSS color-mix()

.mixed {
  background: color-mix(in oklab, #0ea5e9 50%, #f97316);
}

color-mix() is supported by all current browsers, so you can let the browser do the mixing and keep the source colours as variables. The computed HEX value from this tool is a fallback for older environments and design files.

Using the steps

Blend steps make good sequential chart colours, hover states and gradient stops. Paste them into the CSS gradient generator, or create a full 50–950 scale from a single colour with the tints and shades generator.

Mix ratio explained

The ratio slider sets how far the result moves from colour A towards colour B. At 0% you get colour A, at 100% colour B, and at 25% a colour that is three-quarters A. In the CSS output this becomes the percentage given to the first colour, so a slider value of 30% produces color-mix(in oklab, A 70%, B). The Result in other formats panel converts the mixed colour to HEX, RGB, HSL, HSV, OKLCH, Lab and CMYK, and each value can be copied with one click.

Practical recipes

Hover states: mix your button colour with 10–15% black.
Subtle backgrounds: mix a brand colour with 90% white.
Brand-tinted greys: mix a neutral grey with 5–10% of your primary colour.

Privacy

The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.

Frequently asked questions

What happens when I mix blue and yellow?

Unlike paint, screen colours are light, not pigment. In RGB or OKLab, blue and yellow blend into a grey or a desaturated tone rather than green; a hue-based space like LCH can pass through green.

Which color space should I use?

OKLab gives the most even, natural-looking blends for UI work. Use LCH or OKLCH when you want vivid intermediate hues, and sRGB to match older tools.

Is CSS color-mix() safe to use?

Yes, it is supported in all current versions of Chrome, Edge, Firefox and Safari. Provide a HEX fallback if you must support very old browsers.

How many steps can I generate?

Between 3 and 21 steps, including both source colours.