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: #0EA5E9;
--color-blend-1: #3D9BF1;
--color-blend-2: #5B91F6;
--color-blend-3: #7485F7;
--color-blend-4: #8979F2;
--color-blend-5: #9C6CE9;
--color-blend-6: #AD5FDB;
--color-blend-7: #BC53C8;
--color-blend-8: #C945B1;
--color-blend-9: #D33796;
--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.