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.