Color Mixer

About the Color Mixer

Mix two to six colours at any ratio and see the result straight away, as a swatch with its HEX, RGB and OKLCH values and the CSS color-mix() that gives the same colour. The same mix is worked out in seven colour spaces side by side — OKLab (the CSS default), OKLCH, CIELAB, CIE LCH, sRGB, linear sRGB and HSL — because the space changes the result: red and lime make olive in sRGB, a golden yellow in OKLab and pure yellow in HSL.

The mixer also makes evenly spaced steps from the first colour to the last, through any colours in between, for tints and shades, hover and pressed states, chart scales and gradient stops. Mixing follows the CSS specifications exactly: percentages are normalised as color-mix() does, colours with transparency are mixed premultiplied, and hue-based spaces can go the shorter or longer way round the colour wheel. Everything runs in your browser.

Common uses

• Making hover, pressed and disabled shades of a button colour with color-mix() instead of hand-picked HEX values.
• Building tint and shade scales for a design system from one brand colour.
• Choosing gradient stops that do not turn muddy in the middle.
• Seeing why a gradient between two colours looks grey or neon, and which space fixes it.

How color-mix() works out a mix

color-mix(in oklab, #1d5fcb 40%, #f97316) converts both colours into the named space, normalises the percentages and interpolates each coordinate. The rules, from CSS Color 5 and CSS Values 5:

• A colour without a percentage gets what the others leave: #1d5fcb 40%, #f97316 is 40 % and 60 %.
• Percentages that add up to more than 100 % are scaled to 100 %. If they add up to less, they are scaled up too, and the mix is made transparent by what was left over: red 30%, blue 30% is a 50/50 mix at 60 % opacity.
• Colours with transparency are mixed premultiplied, so a transparent colour does not darken the mix.
• More than two colours are mixed one after another, in order: the first two, then that result with the next. The page also gives this as nested two-colour color-mix() calls, which every browser that has color-mix() understands; the single function with more than two colours is newer and not supported everywhere yet.
• With no space named, CSS mixes in OKLab.

Which space to mix in

• OKLab: perceptually even steps, so gradients and tint scales look smooth. The default of color-mix() and a good first choice.
• OKLCH: keeps colours vivid by going round the hue wheel instead of through the grey middle; mixes of far-apart hues can leave the sRGB gamut.
• CIELAB and CIE LCH: the older perceptual spaces (D50, as CSS defines them); they predict blue hues badly, so blues mixed with white drift towards purple.
• sRGB: averages the RGB values, as browsers did before color-mix(): middles of complementary colours turn grey and muddy.
• Linear sRGB: mixes light as it adds up physically, as with two lamps; results look brighter.
• HSL: interpolates hue, saturation and lightness; it keeps saturation but lightness can jump.

Greys and white have no hue, so in OKLCH, LCH and HSL they take the hue of the other colour: mixing blue with white makes lighter blues, not purple or green.

Hue paths and colours outside sRGB

In OKLCH, LCH and HSL a mix travels round the hue circle. Shorter (the default) takes the shorter arc, longer the other way round, increasing and decreasing always turn the same way. Blue and yellow are nearly opposite on that circle, so shorter and longer give very different colours (teal or pink).

Vivid mixes can fall outside what sRGB screens show. The page then keeps the exact colour in its own space (the last column of the step table) and gives the HEX of the nearest displayable colour, mapped with the CSS Color 4 gamut-mapping algorithm; such steps are marked “outside sRGB, mapped”.

Colours you enter outside sRGB, such as a vivid oklch() or color(display-p3 …), are mixed as they are, as color-mix() mixes them; only the results are mapped for their HEX, so the CSS the page writes gives the same colour as the page shows. A lightness typed without a unit in oklch() or oklab(), such as oklch(62.8 0.2 260), is read as a percentage here, and the CSS writes it as 62.8%, because CSS itself would read 62.8 as more than 100 %.

Limitations

• These are mixes of light on a screen. Paint, ink and dye mix subtractively (blue and yellow paint make green), which no screen colour space reproduces.
• HEX values are 8-bit sRGB: colours outside sRGB lose some of their vividness in HEX, and very small steps can round to the same HEX value.
• Up to six colours and 24 steps. The ramp spaces the colours evenly; for uneven stops use the gradient CSS and change the positions.
• In the free preview the first half of each space’s steps, of the step table and of the CSS is shown, and copying and the CSS file stay locked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.