Build CSS color-mix() declarations visually: two colors, a percentage, and the interpolation space (srgb, oklab, oklch, hsl or lab). See the computed result live, copy the one-liner, and get a static fallback for browsers that predate color-mix support.
Settings
Generated locally in your browser — your settings and results never leave this page.
Color arithmetic, natively in CSS
color-mix() ended a long era of preprocessor workarounds: mixing is now a browser primitive. Tint a custom property toward white, derive a hover by mixing toward black, fade a brand color toward transparent — all in one declaration, all responsive to runtime theme changes in ways build-time Sass never was. This generator writes the syntax correctly, previews the arithmetic’s result, and attaches the static fallback for the long tail.
The space argument is a real argument
The “in …” clause chooses the geometry, and geometries disagree: in srgb reproduces legacy channel averaging (with its muddy middles — sometimes exactly what you must match); in oklab gives perceptual midpoints and is the spec’s own default for good reason; in oklch arcs through hue space, keeping tints of saturated colors vivid; in hsl behaves like the classic wheel with its known quirks. The generator’s preview re-renders per space, making the abstract argument concrete for your actual pair.
Patterns worth stealing
The high-value idioms: state derivation (color-mix(in oklab, var(--brand) 85%, black) for hover — retunes automatically when the brand token changes); opacity without rgba surgery (color-mix(in oklab, var(--ink) 40%, transparent)); theme-relative tints (mixing toward canvas or a surface token instead of literal white, so dark mode inherits correct behavior). Each replaces a generated-at-build-time constant with a live relationship.
Support and the fallback discipline
color-mix() is Baseline across current engines (Chrome/Edge 111+, Safari 16.2+, Firefox 113+), which still leaves enterprise long-tails and old WebViews. The generator’s computed-result comment is the fallback: ship color: #resolved; before the color-mix() line and every browser renders something correct. The Color Mixer sibling remains the exploration bench — eleven-step scales, both-space comparison — while this page owns the shipping artifact.
The same mix in every space
One blend — dodger blue 50% with tomato — resolved per interpolation space, computed with this page’s math where exact:
| Space | Syntax fragment | Character of the midpoint |
|---|---|---|
| srgb | in srgb | darker, gray-shifted — legacy averaging |
| oklab | in oklab | clean perceptual midpoint (CSS default) |
| oklch | in oklch | arcs through vivid violet — hue-path mixing |
| hsl | in hsl | wheel shortcut, lightness quirks included |
| lab | in lab | close to oklab, with Lab’s legacy geometry |
Five declarations, five different colors from identical inputs — the space argument is not a formality. When in doubt, oklab; when matching an old canvas blend, srgb; when tinting saturated brand colors, oklch. The preview above renders your actual pair per space, which settles most debates faster than theory.
How to use the CSS color-mix() Generator
- Pick the two colors and the percentage split.
- Choose the interpolation space – each gives a different midpoint.
- Copy the color-mix() line with its computed fallback.
Frequently asked questions
What does CSS color-mix() do?
Mixes two colors inside CSS itself – color-mix(in oklab, blue 30%, white) – no preprocessor or JS. Perfect for derived tokens: hover states, tints of a custom-property brand color, semi-transparent overlays. This generator writes the syntax and shows the result before you commit.
Why does the interpolation space matter so much?
Because "halfway between blue and yellow" is a different color in each geometry: srgb gives the familiar muddy gray-green, oklab a clean perceptual midpoint, oklch (polar) can arc through vivid hues, hsl behaves like a color wheel with its known lightness quirks. The generator previews your actual pair per space.
Which space should I default to?
oklab – it is also CSS's own default for color-mix() when you omit the space, and its midpoints look like what humans expect. Use oklch when you want hue-preserving tints of a saturated color, srgb only when matching legacy canvas/image blends.
What is the browser support story?
color-mix() is Baseline – Chrome/Edge 111+, Safari 16.2+, Firefox 113+. The generator always emits the computed static color as a comment so you can ship a fallback declaration for the long tail in one paste.
Can I mix with transparency?
color-mix() interpolates alpha too – mixing toward transparent is the canonical CSS way to fade a custom property (color-mix(in oklab, var(–brand) 40%, transparent)). Set one endpoint's alpha here and the output carries it.
How is this different from the Color Mixer tool?
Same math family, different deliverable: the Mixer explores blends interactively with an 11-step scale; this page is aimed at the CSS artifact – correct syntax, chosen space, fallback comment – ready for a stylesheet. Explore there, ship from here.
Does the preview compute all five spaces exactly?
srgb and oklab are computed exactly (the same math browsers use). For oklch, hsl and lab the preview approximates via OKLab and labels it – the copyable CSS is exact regardless, since the browser does the real mixing.
