CSS color-mix() builder
Choose two colors, how much of the first to keep and the space to mix in. The tool writes the color-mix() function and shows the color a browser gives for it.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Enter two colors, or use the pickers.
- Move the slider: the percentage is how much of the first color is kept.
- Choose the space to mix in. For HSL, LCH and OKLCH, also choose the hue path.
- Copy the
color-mix() function into your stylesheet.
What the output means
color-mix(in oklch, #ff0000 50%, #0000ff) mixes half red and half blue in OKLCH. The second percentage is implied: it is 100% minus the first.
Example
Red and blue at 50% in sRGB gives #800080, a dark purple. In HSL the hue travels the short way through magenta and gives #ff00ff. In OKLab you get a different, more even purple.
Tips
- Add a fallback line, such as
background: #800080;, above the color-mix() line for old browsers.
- Mixing with white or black in OKLCH is a quick way to make tints and shades.
- Rule of thumb: pick the space where the colors should stay vivid (OKLCH) or even (OKLab) and compare the result with the sRGB value shown.
Frequently asked questions
What does color-mix() do?
It blends two colors in a color space you choose and returns a new color: color-mix(in oklch, red 30%, blue). The first color contributes the given percentage and the second one the rest.
Which color space should I pick?
sRGB matches old mixing but can look muddy in the middle. OKLab keeps lightness even and is a good default; OKLCH keeps colorfulness and travels around the hue wheel, so mixes stay vivid.
What is the hue path?
In polar spaces (HSL, LCH, OKLCH) the hue can be reached by the shorter or longer arc of the wheel, or by always increasing or decreasing. Shorter is the CSS default and is left out of the code.
Is the shown color exactly what the browser renders?
It follows the CSS Color 4 interpolation rules in double precision and is rounded to 8-bit sRGB. Browsers may differ by one step in a channel, and colors outside sRGB are clipped here.
Which browsers support color-mix()?
Current versions of Chrome, Edge, Safari and Firefox support it. Older browsers ignore the declaration, so give them a plain color fallback before it.