Color Mixer
Mix two colors in sRGB, HSL, OKLab, OKLCH, LAB or LCH and preview the result live. Copy the mixed color as HEX, RGB, HSL, OKLCH or CSS.
Which color space should I mix in?
| Space | Behavior | When to use |
|---|---|---|
| sRGB | Direct channel interpolation | Matching browser default blending |
| HSL | Hue walks the shortest path | Intuitive mental model of "hue shift" |
| OKLab | Perceptually uniform | Most design and UI work |
| OKLCH | Perceptual + hue control | Palettes and gradients that stay bright |
| LAB | CIE perceptual | Print matching, color science |
| LCH | CIE perceptual (cylindrical) | Perceptual with hue anchoring |
Why OKLab is often the best choice
Mixing in sRGB can produce muddy transitions between complementary colors because the intermediate values sit in a darker region of the gamut. OKLab is designed so that equal steps in the numbers look like equal steps to the eye. This is why gradients built in OKLab look smoother and more even than the same gradients built in sRGB.
Frequently asked questions
Why do the results differ between spaces?
Each space models color differently. Two colors that are far apart in sRGB may be close in HSL, or vice versa. The result of a mix depends entirely on how the space represents the intermediate values.
Does this use CSS color-mix()?
The mixing math runs in JavaScript so you can see the result live. When you click Copy CSS color-mix(), the tool outputs the equivalent color-mix() function so you can use native CSS if your target browsers support it.
Can I mix with alpha?
Yes. If either input color has alpha, the alpha channel is interpolated along with the color channels and reflected in the RGBA output.
What happens at 0% or 100%?
At 0% the result is exactly Color A; at 100% it is exactly Color B. The intermediate values are what the color space interpolation produces.