Skip to content
HexSlate

Color Mixer

Steps
Blend scaleOKLCH
The same blend, two spaces

The number under each strip is the chroma of its midpoint, measured in OKLCH. A midpoint that has lost its chroma is the grey dead zone.

OKLCHmidpoint chroma 0.124
sRGBmidpoint chroma 0.000
Some steps do not fit in sRGBThe steps marked with an asterisk landed outside what sRGB can display. They are brought back by holding their lightness and hue and dropping chroma until they fit, so the hex you copy is the nearest displayable colour rather than the one the arithmetic produced.
All steps
#0000ff, #006dac, #0087ac, #00a0af, #00baae, #00d5a1, #19f268, #b0fa36, #ffff00
9 steps in OKLCHmidpoint chroma 0.124 OKLCH, 0.000 sRGB5 of 9 mapped into sRGB

Two colours, a step count and the space the blend runs through. Both ends count, so nine steps is your two colours plus seven mixes. The space is the whole question: the same pair gives a dead grey midpoint in sRGB and a saturated one in OKLCH, and neither of those is a rendering fault.

The interpolation space decides the route, not the ends

Mixing two colours walks a straight line between two points, and the space decides where those points sit and what the line passes through. In sRGB the coordinates are the values a display is driven with: blue is (0, 0, 255), yellow is (255, 255, 0), halfway along each axis is 128, so the midpoint of #0000ff and #ffff00 is exactly #808080. Saturation is not one of the three coordinates, so nothing preserves it and the colour drops out of the middle. That is the grey dead zone.

OKLab, published by Björn Ottosson in 2020 and now part of CSS Color 4, puts the coordinates on axes fitted to how people report seeing colour: one lightness axis and two opponent axes. OKLCH is the same space in polar form, so its numbers are lightness, chroma and hue, and interpolation moves them separately. Chroma carries all the way across and the hue travels around the circle rather than through the neutral point at its centre. The chroma reading under each strip above is that difference as a number rather than as an impression.

When sRGB is still the right answer

Pick sRGB when you are reproducing something rather than designing something. Matching a palette built in a tool that mixed in sRGB is the obvious case: OKLCH would hand you better colours that are visibly not the ones already in the file. A CSS gradient with no interpolation space stated runs in sRGB, and alpha compositing, which is what opacity and a translucent rgb() do, happens in gamma-encoded sRGB too, so sRGB is the model that predicts a translucent overlay. HSL is the one to avoid: its lightness is geometric rather than perceptual, and a saturated yellow and a saturated blue both sit at 50% while one is obviously brighter.

Hue takes the short way round

There are two ways round the circle from one hue to another, and the shorter arc is the default here and in CSS: 350° to 10° is a 20° step through red, not a 340° sweep through everything else. CSS can ask for the other route with color-mix(in oklch longer hue, …), or force a direction with increasing hue and decreasing hue. This tool only does the shorter arc.

Mixing towards white, black or a grey is the case that catches people. A neutral has no hue: its chroma is zero and the angle the maths returns is noise. Interpolating towards that angle swings the ramp through an unrelated part of the wheel, which is where "why did my blue-to-white ramp turn purple" comes from. CSS calls such a hue powerless and substitutes the other endpoint's, and this tool does the same, so a mix towards white keeps the hue you started from.

color-mix() and the fallback it needs

The line under the single mix hands the blend to the browser rather than freezing it as a hex, and color-mix() is safe to ship: Chrome and Edge 111, Safari 16.2 and Firefox 113, all during 2023. Email clients and old embedded webviews still miss it, and the fallback costs one line. Declare the plain hex first and the color-mix() second: any engine that cannot parse the second discards it and keeps the first, so no @supports block is needed. One detail people get backwards is that the percentage belongs to the colour it follows, so color-mix(in oklch, #0000ff, #ffff00 40%) is 40% of the yellow over 60% of the blue.

Mixing light is not mixing paint

Blue and yellow paint make green. Blue and yellow light do not, and neither does this tool, color-mix(), or any CSS gradient: all of them interpolate between two colour values, while paint mixes by subtraction, each pigment absorbing part of the spectrum until what reaches you is what neither took. Predicting that needs a Kubelka-Munk model and absorption data for the specific pigments, which no hex code carries. The OKLCH route from blue to yellow does pass through teal, nearer the painter's answer than sRGB's grey, but that is only where the shorter arc of the hue circle happens to run. It is geometry, not pigment, and another pair will not be so flattering.

Common problems

  • A step is marked with an asterisk. It fell outside sRGB, which happens easily in OKLCH because the space describes colours no sRGB display can produce. It is mapped back by holding lightness and hue and dropping chroma, rather than by clipping each channel, which would shift the hue.
  • The browser renders color-mix() slightly differently. On a wide-gamut display it maps an out-of-gamut mix to the screen rather than to sRGB. The hex here is always the sRGB answer.
  • The scale looks uneven even in OKLCH. A mix is a straight line between two colours, which is not an even tonal ramp. For a 50 to 950 scale, step lightness at constant chroma and hue instead.
  • The copied hex has eight digits. One of your colours is not opaque, and alpha is interpolated with everything else.

Frequently asked questions

OKLCH or OKLab, when they are the same space?

Same space, different coordinates, and the coordinates change the path. OKLab interpolates on the rectangular axes, so the line runs straight through the space and passes nearer the neutral axis when the hues are far apart: the middle desaturates a little but the hue never surprises you. OKLCH rotates the hue and interpolates chroma separately, so the middle stays saturated. For opposites, OKLCH is the more colourful route and OKLab the more predictable one.

Can I mix three or more colours?

Not in one operation. color-mix() takes exactly two colours and this tool matches it. Three in a row is a gradient rather than a mix, and a gradient generator models stops and positions properly. Nesting color-mix() works, but the weights stop meaning what you expect after the first level.

Is the midpoint the average of two colours?

Only relative to a space, which is why this page shows two answers at once. The average of #0000ff and #ffff00 is #808080 in sRGB and a teal in OKLCH, and neither is wrong. Asked for the average of two colours with no space named, the useful reply is to ask which.

Does anything I type get uploaded?

No. Every conversion, mix and gamut mapping here is arithmetic running in your browser, and there is no request to send anywhere. The colours in the address bar are there so a link reproduces what you are looking at.