Colour Mixer
Choose two colours and slide between them. Compare mixing in screen colour, in linear light and in the perceptual colour space, and copy the CSS.
Worked examples
Black and white, halfway
#000000 and #ffffff, 50%
#808080 in screen colour, #bcbcbc in linear light, #636363 in Oklab
The three methods give very different greys for the same mix.
About Colour Mixer
Mixing two colours is a common design task: finding a midpoint, building an in-between hover state, or filling a gap in a palette. The result depends on how the mixing is done, and this tool lets you compare three methods side by side with the same two colours.
Pick two colours and slide between them. The result is shown as a hex code, red green blue values and hue, saturation and lightness, and a strip shows evenly spaced steps from the first colour to the second. The CSS line uses color-mix(), which a modern browser can work out itself.
How to use Colour Mixer
- Choose the first and second colours.
- Pick the space to mix in.
- Move the slider to set the share of the second colour, and set the number of steps.
- Copy the colour or the CSS line.
Common uses
- Finding the colour halfway between two brand colours
- Making intermediate steps for a custom gradient
- Comparing mixing methods for a palette
- Writing a color-mix() value for a stylesheet
Frequently asked questions
Why does the mixing space matter?
Screens store colour in a non-linear form, so averaging those numbers directly gives darker midpoints than blending real light would. Linear light mixing is brighter, and Oklab aims for even-looking steps to the eye.
What does the percentage in color-mix mean?
The first colour gets the percentage written beside it and the second colour takes the rest. This tool shows the share of the second colour on its slider and converts it for the CSS.
Why do some midpoints look muddy?
Mixing two bright, different colours in screen colour often passes through a dull grey. Trying Oklab usually gives a livelier midpoint.
Can I use the strip as a gradient?
Yes. The strip shows evenly spaced colours from the first to the second, so you can copy any of them as a stop in a gradient. For a smooth two-colour gradient, a browser can also interpolate in the same spaces by itself, which avoids the muddy middle.
Does color-mix work in every browser?
It works in current versions of the major browsers. For older ones, copy the hex result instead.