craft
color-mix()
2026
Mix two colors together in any color space usingcolor-mix() — no preprocessor, no JavaScript, just CSS.
The color space matters: mixing blue and green insrgb produces a muddy gray at the midpoint, whileoklch keeps the colors vivid the whole way through.
oklch — blue mixed with green at 0%, 20%, 40%, 60%, 80%, 100%
srgb
oklch
hsl
same blue → green mix across three color spaces