CSS color-mix() Playground
Mix two colors using native CSS color-mix(). Adjust the ratio and color space.
0% = Color A only, 100% = Color B only, 50% = equal mix
Visual Mix
Mixed Color Result
#c44f90 oklch(0.6 0.2 350) rgb(196, 79, 144) Generated CSS
color-mix(in oklch, #ff6b35 50%, #8338ec)Why the color space matters when mixing
color-mix()
doesn't just average two colors — it interpolates between
them in whatever color space you tell it to use, and the space you
pick changes the result completely.
Mixing in sRGB (the default before
color-mix()
existed) routes straight through RGB channels, and the midpoint of
two saturated colors often comes out muddy or gray because RGB is
not perceptually uniform. Mixing in OKLCH
keeps the perceived lightness and saturation consistent along the
way, so a 50/50 blend actually looks like it's halfway between the
two inputs.
That makes OKLCH mixing useful for more than one-off blends: generate hover and active states by mixing a color with black or white, build tints and shades of a single brand color, or derive a secondary palette from two or three source colors — all without reaching for a preprocessor or a build step.
FAQ
What is the color-mix() syntax?
color-mix(in <color-space>, <color1> <percentage>, <color2>) — for example color-mix(in oklch, #ff6b35 60%, #8338ec) mixes 60% of the first color with 40% of the second in the OKLCH space.
Which color space should I mix in?
OKLCH for almost all UI work — it produces even, natural-looking blends without the grayish midpoints RGB mixing can produce. sRGB is only worth reaching for if you specifically want that flatter, more traditional blend.
Can I mix more than two colors?
color-mix() only accepts two colors at a time, but you can nest calls: color-mix(in oklch, color-mix(in oklch, red 50%, yellow) 50%, blue) blends three colors across two steps.
Which browsers support color-mix()?
Chrome 111+, Safari 16.2+, and Firefox 113+ all support it, so it is safe to use in production without a fallback for most audiences.