CSS color-mix() Builder
Build a CSS color-mix() expression.
Overview
The CSS color-mix() Builder composes a color-mix() expression — two colours, an interpolation colour space, and optional per-colour weights — and previews the result. It is the modern replacement for the SCSS mix() function: a pure-CSS way to blend two colours at runtime, perfect for hover states derived from a base brand colour.
Useful for designers and front-end developers learning how to use CSS color-mix for darker hover states or how to blend two CSS colours without preprocessor. The expression evaluates in the browser, so design tokens stay portable across themes.
How it works
The CSS Color Module Level 5 defines color-mix(in <colorspace>, color1 <pct>, color2 <pct>). The colour space (srgb, srgb-linear, hsl, oklch, lab, etc.) controls how the two colours interpolate — oklch produces the most perceptually uniform mixes and is the recommended default for UI work.
Percentages are optional; without them each colour contributes 50%. Specifying one (e.g. red 30%) implies the other is 70%. The generator validates that percentages don't exceed 100% combined and warns when mixing across colour spaces produces surprising hue rotations (e.g. red + green in HSL goes through grey, while in OKLCH it goes through yellow).
Examples
- Mid-grey from black and white in OKLCH →
color-mix(in oklch, black, white). - A darker hover from brand colour →
color-mix(in srgb, var(--brand) 80%, black). - A semi-transparent surface tint →
color-mix(in srgb, var(--surface) 70%, transparent). - A gradient stop midpoint →
color-mix(in oklch, red 25%, blue)yields a violet at 75% blue.
FAQ
Which colour space should I pick?
oklch for perceptually uniform results. srgb for compatibility with old design tokens. Avoid HSL for interpolation — it produces dull grey midpoints between complementary hues.
Can color-mix replace SCSS mix()?
Yes for runtime use. SCSS still helps at build time when you need static fallback colours for ancient browsers.
Why does my mix look greyer than expected?
Likely because you're interpolating in sRGB or HSL. Switch to oklch and the midpoint colour will retain saturation.
Is color-mix supported in old browsers?
It is in all evergreen browsers as of 2023. Older browsers need a precomputed fallback colour before the color-mix() declaration.