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

  1. Pick a start color and an end color.
  2. Adjust the step count slider (3–20).
  3. Pick the interpolation mode (OKLCH/RGB/HSL).
  4. 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.