CSS color-mix() Generator

color-mix() is a CSS Color Module Level 5 function that interpolates between two colors in a chosen color space. The syntax is color-mix(in <colorspace>, <color1> <percent>, <color2> <percent>). It removes the need for Sass mixins, custom property math, or runtime JavaScript when you want tints, shades, hovers, or theme variants derived from a base color.

Mixing two colors in sRGB is mathematically simple but perceptually wrong: the midpoint between two saturated colors loses chroma and looks muddy or grey. OKLCH (and OKLab) is a perceptually uniform space derived from human vision research. When you mix red and blue in oklch, the path stays bright and saturated, producing a clean purple. This is why design systems like Tailwind v4, Radix Themes, and Material You moved to OKLCH-based palettes.

color-mix() is supported in Chrome 111+, Edge 111+, Safari 16.2+, Firefox 113+, and all major mobile browsers from the same vintage. Combined that is roughly 95%+ of global traffic as of 2025. For older browsers, ship a static fallback color first and let modern browsers override it: 'background: #7f007f; background: color-mix(in oklch, red, blue);'.

When interpolating in a polar color space (hsl, hwb, lch, oklch), there are two ways around the hue wheel: the short arc and the long arc. The default is 'shorter hue'. Adding 'longer hue' forces the interpolation to take the long way around, which is useful for rainbow-style transitions. Example: color-mix(in hsl longer hue, red 50%, blue 50%) sweeps through yellow, green, and cyan instead of going through magenta.

Both are perceptual spaces, but OKLCH/OKLab were specifically tuned in 2020 by Björn Ottosson to fix issues that the older CIE Lab/LCH spaces had with blue and purple hues. For UI work and design tokens in 2025, prefer OKLCH unless you have a hard requirement to interoperate with legacy print or imaging pipelines that already speak CIE Lab. The difference is most visible around blue: a mix in lab can take an unexpected turn through purple, while oklch stays in the expected hue family.

Yes. Each input color carries its own alpha and the result's alpha is interpolated alongside the color channels. You can also pass currentColor as an input — for example, color-mix(in oklch, currentColor 80%, transparent) gives you a faded version of whatever color the element currently inherits. This is the modern, accessible replacement for opacity hacks that affected child elements.

Yes. The generator is a single client-side React component. Color values you type are kept in component state, the CSS expression is built with plain JavaScript string templates, and previews are rendered by passing the expression to the browser's own style engine via getComputedStyle. There is no network call, no analytics on the colors you paste, and no third-party color library. You can confirm by opening DevTools Network tab while you experiment.