How is this different from a CSS gradient generator?

A gradient generator outputs a continuous CSS gradient string. This tool outputs discrete colors — one per stop — useful when you need named tokens (heatmap-0, heatmap-1, …) or to build a data-viz scale in code.

What's a good number of steps for a heatmap?

5–9 for sequential heatmaps; 7–11 for diverging scales. Larger numbers stop helping because adjacent steps become indistinguishable.

Does it support more than two stops?

Yes — add as many stops as you need. The tool interpolates between consecutive pairs and distributes steps proportionally across the segments.

multi-stop · n-step · blend · sRGB · live

Smooth N-step gradient between many colors

Blend 2+ colors into any number of evenly-spaced stops. Use it for tonal scales, data viz palettes, or gradient previews. Click any swatch to copy.

Color Blender

Stops

anchors

Steps

interpolated

Output

9 colors

gradient

Status

ready

live

input · color

Anchor colors

output · preview

Interpolated gradient

Click any swatch to copy its HEX. Edit the anchor list to reshape the gradient.

Quick Start

How to blend N colors

Define 2 or more anchor colors, then pick how many steps the gradient should have.

01
Set anchors
Each anchor is a hard color. Add 3+ for piecewise blends.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
anchorsOKLCHCSS Color 4perceptuallive
stops · color3 · sRGB
```
blue → violet → pink
```
loaded · normalisedOKLCH · ready
02
Pick step count
9 is a good default for tonal scales. Up to 30 supported.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
stepshex · rgb · hslP3gamut-mappedlive
n · options9 · live
```
9 stops
```
options applied · livelive
03
Inspect the gradient
See all stops as one strip — colors interpolated in sRGB.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
previewWCAG 2.2APCAAA · AAAcontrast
out · convertedlive · ready
```
#3b82f6 … #ec4899
```
converted · liveWCAG-aware
04
Copy what you need
Click any stripe to copy one stop, or grab the whole list.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
copyclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied list
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to blend N colors

Charts, themes, illustration, design tokens.

Categorical palettes

Generate a fixed palette from a multi-stop ramp. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Heat maps

Tune a sequential color scale from two extremes. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Brand gradients

Sample stops from a brand gradient for static asset use. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Design tokens

Export N stops as JSON for design-system ingestion. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick prototyping

Try many palettes in seconds. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Pass HEX list to D3, Plotly, or your chart engine. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

What blending space is used?

Linear sRGB byte mixing. For perceptually uniform stops use OKLAB-aware tools.

Can I lock a stop?

Not yet — but each anchor itself acts as a locked checkpoint.

Does step count include endpoints?

Yes — first and last steps equal first and last anchors.

What's a good step count for UI scales?

9-11 covers most tonal scale needs (Tailwind/Material use 10).

Is anything sent to a server?

No — all math runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!