color-mix() Explorer
color-mix() blends two colors inside the browser. The color space controls where the midpoint lands, which is why the same two colors produce different results in oklch vs srgb vs hsl.
Colors
Color A
Color B
Color Space
Live Preview
A
mix
B
Generated CSS
Copy and use this
Color Space Comparison — same inputs, different midpoint
50% mix of Color A + Color B
oklch
color-mix
srgb
color-mix
hsl
color-mix
color-mix() Browser Support
Widely available
Since
2023 90% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
111+
113+
16.2+
111+