🎨 color-mix() — blend colors in native CSS

color-mix() takes two colors, a ratio, and a color space, and hands back the blend — no Sass, no build step. Drag the ratio, switch the space, and watch the CSS and the browser-resolved value update live. Then build a whole shade scale from one source color, the way the post does.

⚠️ This browser doesn't support color-mix(), so the swatches below fall back to a plain color. Try the latest Chrome, Firefox, or Safari (Baseline 2023).

1 Mix two colors

color A

80% A · 20% B

color B

Color space

rgb(…)

2 Why the color space matters

Here is the same 50/50 mix of your two colors, computed in every space at once. In srgb the channels just average — mixing complementary colors muddies toward gray. oklch/oklab travel through a perceptually uniform space, so the midpoint stays vivid. Click a tile to load it above.

3 One source color → a whole scale

This is the Sass-replacement pattern. Pick a brand color; every step below is color-mix(in oklch, brand X%, white|black) — derived in CSS, no preprocessor. Change the source and the entire scale re-derives instantly.

--brand

4 Delete the preprocessor

Baseline 2023 — Chrome 111, Firefox 113, Safari 16.2. Unsupported browsers just ignore the declaration, so a pre-computed fallback value stays visible.