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.
#0EA5E9· hsl(199, 89%, 48%)
⟷
#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
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.