What Is the Color Mixer?
Blend two colors at any ratio and see the steps between them. Mix in sRGB, linear sRGB, OKLab, OKLCH or HSL; the tool uses the same rules as CSS color-mix(), and gives you the matching color-mix() line to paste into a stylesheet.
Why Use This Tool?
Understanding how colors combine is fundamental to palette design. Different color spaces produce different blends. sRGB averages the stored channel values, which tends to give dark, muddy midpoints; OKLab and OKLCH were designed so equal steps look roughly equal to the eye, and OKLCH also keeps chroma up by travelling around the hue circle.
How to Use This Color Mixer
- Select two base colors — Pick or paste hex codes for the two colors you want to mix.
- Adjust the mix ratio — Use the slider to control the blend — 50% gives you an equal mix, while lower/higher values weight toward one color.
- View the result — Pick a color space, then see the mixed color in real time with its hex, RGB and HSL values, plus the intermediate steps.
- Copy the mixed color — Click the swatch to copy the hex, or copy the color-mix() line for the same mix. We checked 240 mixes across all five spaces against Chrome's own color-mix(): every one matched within rounding (0.5 of a channel step).
Worked examples: the same mix in five colour spaces
The colour space changes the result more than most people expect. Both examples below were mixed in this tool and, separately, by Chromium's own CSS color-mix() on October 12, 2026; every result matched to the hex digit. Chroma is how colourful the result is (0 is grey).
Blue and yellow, 50/50
| Space | Result | OKLCH lightness | OKLCH chroma |
|---|---|---|---|
| sRGB | #808080 | 0.600 | 0.000 |
| Linear sRGB | #bcbcbc | 0.795 | 0.000 |
| OKLab | #6cabc7 | 0.709 | 0.077 |
| OKLCH | #00cfbd | 0.768 | 0.136 |
| HSL | #00ff80 | 0.875 | 0.234 |
Opposite colours cancel out in sRGB and linear sRGB and leave grey. OKLab gives a soft desaturated blue, OKLCH keeps the colour by travelling round the hue wheel and lands on a teal, and HSL takes the same route through the greens but keeps full saturation, giving a bright green. If you want something between the two colours that still looks like a colour, use OKLCH; if you want a neutral, sRGB does it.
A hover tint: #0575E6 with 15% white
| Space | Result | OKLCH lightness | OKLCH chroma |
|---|---|---|---|
| sRGB | #2b8aea | 0.628 | 0.168 |
| Linear sRGB | #6c95ea | 0.677 | 0.134 |
| OKLab / OKLCH | #3f8bec | 0.637 | 0.164 |
| HSL | #2b8ae9 | 0.627 | 0.167 |
For small tints the spaces are close, with one exception: linear sRGB lightens much more and drifts toward violet (#6c95ea), losing about a fifth of the chroma. OKLab and OKLCH agree exactly here because white has no hue. Mixed with 15% black instead, OKLCH gives #035db9 and sRGB #0463c4: the sRGB shade comes out lighter, because sRGB mixing does not follow perceived lightness.
To use a result directly in a stylesheet, Copy CSS gives the matching color-mix() expression; MDN lists color-mix() from Chrome 111, Safari 16.2 and Firefox 113, so for older browsers paste the hex value instead.
Related tools
- To quantify how different a mixed result actually looks from the inputs (in Delta-E rather than RGB distance) use the Perceptual Color Difference tool.
- Mixing two colors and interpolating a gradient between them are related operations. The Gradient Interpolator visualizes the full continuum in multiple color spaces.
- Two-color mixing is one operation; CSS blend modes are another. The Color Blend Modes tool previews multiply, screen, overlay, and nine total Photoshop-style modes.
- A separate but related operation is warm/cool shifting along the blackbody locus. The Color Temperature Shifter handles white-balance-style tonal adjustments.
Frequently Asked Questions
📖 Learn More
Related Article The Complete Guide to Color Mixing and Palettes → Related Article How to Mix Colors with CSS →Built by Derek Giordano · Part of Ultimate Design Tools