CSS color-mix(). Interpolate two colors. 2024+ modern.
๐ŸŽจ Color-space interpolation comparison
๐Ÿ“ Single result (selected space)

How to use

  1. Pick two colors.
  2. Adjust ratio (0%=color1, 100%=color2).
  3. Compare 5 color spaces.
  4. Copy CSS โ€” works in modern browsers.

Key features

  • 5 color spaces (srgb ยท oklch ยท lab ยท hsl ยท lch)
  • Live interpolation comparison
  • Visualize each space's result
  • Generated color-mix() CSS
  • Hex value display

Use cases

  • UI state colors โ€” base + danger 30% = warning
  • Hover states โ€” base + black 10% (darker)
  • Gradient mid-color โ€” auto-compute Aโ†”B middle
  • Dark-mode conversion โ€” light + #000 mix
  • Brand variants โ€” main + accent combinations

What is color-mix()?

2023-standardized CSS Color Module Level 5 function. Format: color-mix(in oklch, #ec4899 50%, #06b6d4). The key is the color space:

  • srgb: traditional RGB. Fast but can muddy
  • oklch โญ recommended: perceptually natural (2024+ trend)
  • lab: scientific, perceptually uniform
  • hsl: preserves saturation

FAQ

Browser support?

Chrome 111+, Firefox 113+, Safari 16.2+ (2023+). Universal by 2026.

Why does color space matter?

srgb can become muddy through gray. oklch interpolates as the eye sees.

Tailwind?

Tailwind 4 supports color-mix. Or use arbitrary `[color:color-mix(...)]`.

Free?

Yes.