About Color Mixer
Mixing two colours answers a question that comes up constantly in interface work: what sits halfway between these? That might be a midpoint for a chart scale, a tint of a brand colour against white, or a border colour that belongs to both of the surfaces it separates. This mixer blends at any ratio you choose and also shows the full scale of steps between the two colours, so you can take an evenly spaced sequence rather than eyeballing individual values. The generated CSS gradient uses the same interpolation, so what you see here is what a gradient between those colours will actually look like.
What people use it for
Building a chart colour scale
A sequence of steps between two brand colours gives a scale that stays on-brand while keeping series distinguishable.
Creating tints and shades
Blending a colour toward white produces tints and toward black produces shades, both anchored to the original.
Finding a border or divider colour
A colour mixed between two adjacent surfaces separates them without introducing a third colour into the design.
Previewing a gradient's midpoint
Gradients can pass through an unexpectedly dull middle; seeing the midpoint first avoids that surprise.
Using Color Mixer
- 1
Pick the two colours you want to blend.
- 2
Move the mix slider toward whichever colour should dominate — 50% is the exact midpoint.
- 3
Set how many steps to show if you need a sequence rather than a single result.
- 4
Copy the mixed HEX value, or take the swatches as a ready-made scale.
What mixing light does that mixing paint does not
This mixer interpolates each of the red, green and blue channels independently, which is how a screen combines light and how a CSS gradient behaves. It is not how pigment behaves, and the difference regularly surprises people. Mixing blue and yellow light gives a pale grey or white, not green, because the two are close to opposite on the additive colour wheel and their combined wavelengths stimulate all three cone types roughly equally. Green from blue and yellow paint comes from subtractive mixing, where each pigment absorbs part of the spectrum and only the overlap of what neither absorbed is reflected back. Neither model is more correct — they describe genuinely different physical processes — but only the additive one applies to anything rendered on a screen. If you are trying to predict what mixing two inks or paints will produce, this tool will mislead you, and a subtractive model is what you need.
Why some blends look muddy in the middle
Interpolating straight through sRGB treats the colour values as plain numbers, but sRGB values are gamma-encoded rather than proportional to physical light intensity. The consequence is that the numerical midpoint of two colours is often darker and less saturated than the visual midpoint, and the effect is worst when the two colours sit far apart on the wheel — a blue-to-yellow blend passes through a distinctly grey middle rather than through anything you would have chosen. This is the same reason many default gradients look slightly dirty in the centre. Interpolating in a perceptually uniform space avoids it, and CSS now supports this directly: writing linear-gradient(in oklch, blue, yellow) blends through OKLCH and produces a much cleaner path, with the option of taking the long or short way around the hue wheel. The swatches here use plain sRGB interpolation, matching a default CSS gradient, so if a midpoint looks disappointing the fix is usually to switch the gradient's interpolation space rather than to choose different endpoints.
Practical notes
- Blend toward white for tints and toward black for shades; both keep an obvious relationship to the original colour.
- If a midpoint looks muddy, try linear-gradient(in oklch, …) in CSS, which interpolates perceptually instead.
- For categorical chart colours, vary lightness as well as hue so the series stay distinguishable in greyscale and for colour-blind readers.