Color Tool

Color Mixer

Blend any two colors across 11 steps using RGB, HSL, or perceptually uniform OKLCH interpolation. Copy hex values or export as CSS variables.

Color A

#0EA5E9· hsl(199, 89%, 48%)

⟷

Color B

#DB2777· hsl(333, 71%, 51%)

OKLCH interpolation: perceptually uniform — lightness and chroma change at a constant perceived rate. Recommended for UI gradients.

Presets

11-Step Blend · OKLCH

#53AAAC

10%

#40A6BB

20%

#3CA0CB

30%

#4997D8

40%

#608CE2

50%

#7A7FE5

60%

#9270E0

70%

#A960D2

80%

#BD4FBC

90%

#CE3D9D

#DB2777

CSS `color-mix()` — Midpoint

color-mix(in oklch, #0EA5E9 50%, #DB2777 50%)

Native CSS color-mix() is supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+).

Export

name

:root {
  --color-blend-0: #53AAAC;
  --color-blend-1: #40A6BB;
  --color-blend-2: #3CA0CB;
  --color-blend-3: #4997D8;
  --color-blend-4: #608CE2;
  --color-blend-5: #7A7FE5;
  --color-blend-6: #9270E0;
  --color-blend-7: #A960D2;
  --color-blend-8: #BD4FBC;
  --color-blend-9: #CE3D9D;
  --color-blend-10: #DB2777;
}

Which mode should I use?

RGB

Direct channel mixing. Simple but can produce unexpectedly desaturated midpoints through complementary pairs (e.g., red + green → gray).

HSL

Better than RGB for most cases — preserves saturation and takes the short hue arc. Can still produce unexpected hue shifts near 0°/360°.

OKLCH ✦ Recommended

Perceptually uniform — every step looks equally spaced to the eye. Vivid midpoints, no muddy grays. Best choice for UI gradients and scale generation.