Color mixer
Choose two colors and slide between them. You see the blend calculated two ways, the HEX code of each and a color-mix() line for your CSS.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Enter color A and color B, or use the pickers.
- Move the slider to set how much of color B goes into the mix.
- Copy the HEX code or the CSS
color-mix() line of the version you prefer.
How it works
sRGB: each of the red, green and blue values moves in a straight line from A to B. OKLab: both colors are converted to OKLab (lightness plus two color axes, Björn Ottosson, 2020), each of the three numbers moves in a straight line, and the result is converted back to sRGB. Results are rounded to whole 0–255 values.
Example
Red #ff0000 and blue #0000ff at 50 percent give #800080 in sRGB, a dark purple. The OKLab mix is a brighter #8c53a2.
Tips
- Mixing complementary colors in sRGB tends to give a dull grey-brown; OKLab keeps more color.
- To build a series of steps, change the slider in equal parts, or use the tints and shades generator for white and black.
Frequently asked questions
Why do the two results differ?
sRGB values are gamma-encoded, so averaging them is not an even step in how bright or colorful a color looks. OKLab is designed so equal steps look more even to people. For black and white at 50 percent, sRGB gives #808080 and OKLab gives the darker #636363.
Which one should I use?
Use OKLab when the result is meant to look smooth, as in gradients, hover states or generated themes. Use sRGB when you must match what older tools or plain CSS gradients produce.
What does the ratio slider mean?
It is the share of color B in the mix. At 0 percent you get color A, at 100 percent color B, and at 50 percent an even blend.
Can I use the CSS line directly?
Yes. The color-mix() function with in srgb or in oklab is supported by current versions of Chrome, Edge, Firefox and Safari. The HEX code is a fallback for older browsers.