Blend two colors visually with the modern CSS color-mix() function. Pick a weight and color space, see the real browser-rendered result, then copy the CSS.
color-mix() lets you generate new colors directly in CSS, without a preprocessor or a design tool round-trip.
The main preview uses your browser's real color-mix() implementation, so what you see is exactly what ships.
Compare srgb, srgb-linear, hsl and oklch interpolation for the same two colors and weight.
Get an approximate hex color for contexts where color-mix() isn't available.
The color-mix() function, part of CSS Color Module Level 5, lets you blend two colors directly inside a stylesheet using the syntax color-mix(in <space>, color1 P1%, color2). Before this landed in browsers, generating a blended color meant reaching for a preprocessor, a design tool, or hand-written JavaScript math; now the browser itself does the interpolation, and it can even respond to CSS custom properties and media queries at render time. The color space you choose changes the character of the blend: srgb mixes red, green and blue channels directly and can look slightly muddy through the middle; oklch and other perceptually uniform spaces tend to preserve vividness better through the midpoint. Because true color-mix() rendering depends on browser support for the exact space requested, this tool also computes a simple linear sRGB approximation in JavaScript, shown alongside the live preview, so you always have a safe fallback hex value to reference.
The percentage controls how much of color A survives the blend — 100% is pure color A, 0% is pure color B, 50% is an even mix.
srgb interpolates raw channel values; oklch interpolates lightness, chroma and hue for a more perceptually even transition.
The main swatch is styled with a real inline color-mix() value, so its color comes straight from your browser's CSS engine.
The approximate sRGB hex value works everywhere, even in contexts that don't parse color-mix() at all.
color-mix() blends two colors together in a specified color space at a given percentage weight, producing a new color directly in CSS without JavaScript or a preprocessor.
Common choices include srgb, srgb-linear, hsl, hwb, lab, lch and oklch. Each space interpolates the two colors slightly differently, which can change how vivid or muddy the blend looks.
It is a simple linear interpolation between the two colors' red, green and blue channels, calculated in JavaScript as a readable fallback hex code for contexts where color-mix() support or a specific color space is unavailable.
No. The live preview is rendered by your own browser's CSS engine, and the approximate value is calculated locally in JavaScript. Nothing is uploaded.
Keep designing with these free online color and CSS tools.