Color Mixer

Blend two colors into any number of in-between steps. Mixing happens in OKLab space rather than raw RGB, so the middle steps stay clean instead of turning muddy gray.

Color 1

#

Color 2

#

Steps — 9

Open as gradient →

Export color codes

#ef4444 #de5761 #cd6479 #bb6e90 #a775a5 #937bba #7c7fce #6081e2 #3b82f6

Same colors, three algorithms

Identical endpoints, different interpolation spaces — watch what happens to the middle.

OKLab Recommended Perceptually even steps — the recommended default.

RGB Straight channel averaging — midpoints between saturated hues drift gray.

HSL Rotates around the hue wheel — stays saturated but sweeps through in-between hues.

Accessibility report

WCAG contrast for each mixed step against white and black text — useful when the steps become chart series or state colors.

Aa #ef4444 White: 3.76:1 — Black: 5.58:1 AA Full check →

Aa #de5761 White: 3.72:1 — Black: 5.64:1 AA Full check →

Aa #cd6479 White: 3.69:1 — Black: 5.69:1 AA Full check →

Aa #bb6e90 White: 3.65:1 — Black: 5.75:1 AA Full check →

Aa #a775a5 White: 3.66:1 — Black: 5.73:1 AA Full check →

Aa #937bba White: 3.63:1 — Black: 5.78:1 AA Full check →

Aa #7c7fce White: 3.63:1 — Black: 5.78:1 AA Full check →

Aa #6081e2 White: 3.66:1 — Black: 5.74:1 AA Full check →

Aa #3b82f6 White: 3.68:1 — Black: 5.71:1 AA Full check →

Why OKLab instead of RGB?

Averaging RGB channels directly tends to produce dull, grayish middle steps — red and green mixed in RGB, for example, gives a muddy olive rather than a clean transition. OKLab is a perceptually uniform color space, so blending there keeps each step visually even and avoids that gray dip. The comparison strips above show it directly: same endpoints, and only the interpolation space changes. HSL takes a third path — it rotates around the hue wheel, which keeps saturation up but means the midpoint is a genuinely different hue, not a blend. The deeper story is in the OKLCH guide.

Where the steps end up in practice: series colors for charts (evenly-perceived steps read as evenly spaced data), hover and pressed states between two brand tones, heat-map ramps, and extra stops that smooth a banded gradient.

Frequently asked questions

OKLab, unless you have a specific reason not to: it's the only one of the three where the middle steps look evenly spaced to the eye. Use RGB when you must match something else that lerps in RGB (like a legacy canvas animation), and HSL when you deliberately want the blend to travel through intermediate hues rather than mix toward a midpoint.

Because that's where the spaces disagree hardest about what's “between.” Red and blue in RGB average to a dark muddy purple; in HSL the shortest hue path sweeps through vivid magenta; in OKLab you get a perceptual blend that keeps apparent lightness steady. For two similar colors, all three algorithms nearly agree.

Match it to the job: 3-5 for UI state variations, 5-9 for chart series (most palettes for categorical data stop at 9 distinguishable steps), more only for smooth ramps. The URL carries the count, so every variation is shareable.

Not in one pass here yet — chain the tool instead: mix A to B, pick the step you like, then mix it toward C. For a multi-color ramp displayed as one surface, the gradient generator accepts up to five stops directly, and the button above hands your two colors straight to it.