Color Blender

Generate perceptually uniform gradient scales between two colors, or blend with subtractive semantics.

Color A

Color B

Steps7

Blend scale

#E639460%#CD4D6617%#B3588133%#995E9950%#7E61AF67%#5F60C583%#3B5BDB100%

linear-gradient(90deg, #E63946 0%, #CD4D66 17%, #B35881 33%, #995E99 50%, #7E61AF 67%, #5F60C5 83%, #3B5BDB 100%)

Interpolation in OKLab space: hue follows a visually uniform path — red + blue gives purple instead of muddy gray, with no dead zone in between.

Blend in three steps: pick two colors, choose an algorithm, read the scale.

A perceptually uniform ramp between any two colors - adjustable density, one-click CSS gradient.

01
Set both endpoints
Pick a color for A and B (color picker or direct HEX input); the swap button exchanges the endpoints in one click.
02
Choose the algorithm
Perceptual mode interpolates in OKLab so even complementary pairs keep their hue transition; RGB mode reproduces the naive blending of most software - compare both to see the difference.
03
Copy or keep exploring
Drag the steps slider for scale density (3-15), copy the full CSS gradient, or click any intermediate color to open its profile.

Color blending FAQ

Three frequent questions about blending algorithms.

Perceptual vs RGB blending - what is the difference?: RGB blending interpolates the red/green/blue channels linearly, so complementary pairs (red+cyan, blue+yellow) pass through a gray dead zone in the middle. Perceptual blending interpolates in OKLab, where lightness and hue follow a visually uniform path - red + blue gives purple instead of muddy gray.
What does subtractive A−B mean?: Each channel of A minus the corresponding channel of B (clamped at 0), mimicking how pigments darken when mixed - the same semantic as ColorHexa's a−b notation. It returns a single result rather than a scale.
What is the #b= in the URL?: Every adjustment syncs to the link (both endpoints, step count and algorithm). Copy the address bar to share the exact blend; whoever opens it sees the same scale.

After blending

Bring the scale into the gradient studio to add more stops, or open the color wheel to build harmonies from a blended color.

Gradient Maker

OKLCH perceptually-uniform gradients, no gray band, one-click CSS export.

Color Wheel

Drag the wheel to pick a base, get six harmony schemes live, open in the board or export PNG.

Scale Generator

Any color into an 11-step design-system scale, perceptually even in OKLCH, WCAG contrast per step, export to Tailwind/CSS/SCSS/JSON.

Blend in three steps: pick two colors, choose an algorithm, read the scale.

A perceptually uniform ramp between any two colors - adjustable density, one-click CSS gradient.

Set both endpoints

Pick a color for A and B (color picker or direct HEX input); the swap button exchanges the endpoints in one click.

Choose the algorithm

Perceptual mode interpolates in OKLab so even complementary pairs keep their hue transition; RGB mode reproduces the naive blending of most software - compare both to see the difference.

Copy or keep exploring

Drag the steps slider for scale density (3-15), copy the full CSS gradient, or click any intermediate color to open its profile.

Color blending FAQ

Three frequent questions about blending algorithms.

Perceptual vs RGB blending - what is the difference?

RGB blending interpolates the red/green/blue channels linearly, so complementary pairs (red+cyan, blue+yellow) pass through a gray dead zone in the middle. Perceptual blending interpolates in OKLab, where lightness and hue follow a visually uniform path - red + blue gives purple instead of muddy gray.

What does subtractive A−B mean?

Each channel of A minus the corresponding channel of B (clamped at 0), mimicking how pigments darken when mixed - the same semantic as ColorHexa's a−b notation. It returns a single result rather than a scale.

What is the #b= in the URL?

Every adjustment syncs to the link (both endpoints, step count and algorithm). Copy the address bar to share the exact blend; whoever opens it sees the same scale.