Two colors โ N-step gradient. Compare RGB ยท HSL ยท OKLCH interpolation modes side-by-side.
๐จ Blend result Click a cell to copy HEX
Interpolation comparison
CSS gradient
Color array (JSON)
How to use
- Pick a start color and an end color.
- Adjust the step count slider (3โ20).
- Pick the interpolation mode (OKLCH/RGB/HSL).
- Click a cell to copy its HEX, or export the whole set as CSS or JSON.
Key features
- 3 interpolation modes (OKLCH recommended / RGB Linear / HSL)
- 3โ20 steps adjustable
- Simultaneous visual comparison of all 3 modes
- CSS
linear-gradient()+ HEX array JSON export - One-click cell copy
Use cases
- Data visualization โ heatmap / choropleth color stops
- Split gradients โ precise N-step segmented regions
- Storybook design tokens โ auto-interpolate brand colors
- Color-blind-friendly โ OKLCH for perceptual uniformity
- SVG gradient stops โ precise N stops
Why interpolation mode matters
RGB Linear averages RยทGยทB values. Fast but often produces a grey band in complementary blends. HSL follows hue but loses saturation/lightness consistency. OKLCH is perceptually uniform โ every intermediate color feels natural. The 2024 default for modern design systems. Tailwind v4 and Chrome's color-mix(in oklch) both use OKLCH.
FAQ
How is this different from Color Mixer?
Color Mixer outputs one intermediate (ratio slider). This tool outputs an N-step gradient.
Is OKLCH always best?
Usually most natural, but HSL can be preferred when you want clear saturation steps. Compare all 3 in the preview.
Can I do more than 20 steps?
Currently capped at 20. More steps can be done directly with CSS linear-gradient().
Free?
Yes, browser-only, unlimited use, no sign-up.