CSS color-mix() Generator

Generate CSS color-mix() declarations by picking two colors, a color space, and a blend percentage. The live swatch approximates the mix (exact mix depends on the browser's implementation of the chosen space), and the output is ready to paste into your stylesheet. Mixing in oklch or oklab avoids the muddy grays you get with sRGB midpoints.

How to use the CSS color-mix() Generator

1. Pick Color 1 and Color 2 using the swatches or typing hex values. 2. Choose the color space — oklch is recommended for perceptually uniform mixes that stay vivid through the midpoint. 3. Drag the percentage slider to set how much of Color 1 is in the mix (e.g., 60% means 60% Color 1 + 40% Color 2). 4. The output textarea shows the ready-to-copy color-mix() CSS value. The on-screen swatch is a JS-computed approximation; the browser renders the real mix at runtime.

What is CSS color-mix() and why does color space matter?

color-mix(in colorspace, color1 pct%, color2) is a native CSS function (Baseline 2023, supported in all major browsers) that blends two colors in a given color space. The result is the interpolated point at pct% along the line between the two colors in that space. Because different spaces have different geometries, the same two colors mixed at 50% can produce visibly different midpoints.

Mixing in sRGB — the traditional approach — causes notorious muddy browns and grays near the midpoint of vivid hue pairs (mix blue and orange in sRGB and the middle is a dull brown). Mixing in oklab or oklch keeps the midpoint perceptually bright, because those spaces are designed so that equal distances correspond to equal perceived differences. oklch is particularly useful because it exposes hue as an angle — you can see the hue arc the mix traverses.

The percentage applies to the first color; the remainder goes to the second. You can omit the percentage for the second color — the browser infers it. color-mix() is especially useful for generating tints and shades of design tokens, creating hover/active state variants, and building accessible focus rings without maintaining a separate palette.

Common use cases

  • Design token tints — mix a brand color with white or black in oklch to generate accessible light/dark variants without a preprocessor.
  • Hover state generation — color-mix(in oklch, var(--btn-bg) 80%, black) darkens a button on hover using only CSS, no Sass darken().
  • Palette midpoints — create a visually pleasing midpoint between two palette colors for a gradient or a stepped scale in oklch space.
  • Theme adaptation — mix a static brand color with currentColor or a CSS variable for automatic light/dark mode blending.
  • Transparent overlays — mix a solid color with transparent to achieve a native CSS opacity fade without changing the alpha channel globally.

Frequently asked questions

Does color-mix() work in all browsers?
Yes, as of late 2023 — Chrome 111, Firefox 113, and Safari 16.2 all support color-mix(). It is part of CSS Color Level 5 and is flagged Baseline 2023 (widely available).

Why does my swatch look different from the browser rendering?
The on-screen swatch is a JS approximation computed in sRGB space (or an OKLCH approximation). The browser implements color-mix() natively in the GPU color pipeline, producing a more accurate result, especially for wide-gamut spaces like oklch and lab.

What happens if the percentages sum to more than 100%?
CSS normalizes them. If you write color-mix(in srgb, red 80%, blue 80%), the browser scales both down proportionally so they sum to 100%. This generator always emits a compliant pair (pct% + (100-pct)%) so normalization is not needed.

Can I use color-mix() with custom properties (CSS variables)?
Yes — color-mix(in oklch, var(--primary) 60%, var(--secondary)) works as long as both variables resolve to valid color values.

What is the difference between oklch and oklab mixing?
oklab interpolates along a straight line in a uniform perceptual space, which keeps lightness constant. oklch does the same but exposes hue as an angle — mixing two colors with different hues in oklch traverses the hue wheel, which can produce a vivid midpoint hue not present in either original.