Why does RGB give me a muddy midpoint?

RGB averaging is mathematically correct but perceptually wrong — equal channel values near the middle often produce grey-brown tones. LAB interpolation respects how human vision perceives colour distance and produces clean midpoints.

What's the difference between HSL and LAB?

HSL rotates hue on a circular arc — if you mix red and green it goes through vivid yellow. LAB treats colour as points in a 3D perceptual space and interpolates in a straight line — red-to-green passes through greys. HSL for vivid rainbows, LAB for clean UI.

Can I use this to generate palette steps between brand colours?

Yes. Pick two brand colours (primary + accent, say), set 5–7 steps, use LAB. The intermediate swatches can become your semantic in-between palette.

Does this match CSS native gradient interpolation?

Modern CSS supports color-interpolation-method (e.g. linear-gradient(in oklch, ...)), which gives perceptually-correct gradients natively. Our tool lets you preview equivalent ramps and generate discrete stops as a fallback for older browsers.

Why is my HSL gradient taking the long way around the colour wheel?

Our HSL mixer always takes the shortest arc — if the two hues are 300° apart, it goes 60° the other way. If you want the long way, swap the order of the colours or use multiple gradients.

Color Mixer

Interpolate between two colours in RGB or OKLCH space.

Mixing runs in your browser.

Gradient ramp

CSS gradient

background: linear-gradient(90deg, #635BFF, #FFD93D);

Similar tools

HEX to RGBA Converter

Translate HEX to RGBA, HSL, HSV, CMYK, and OKLCH.

RGBA to HEX Converter

Convert RGBA colours to HEX and other formats.

Color Shades Generator

Generate 10 tint and shade steps from any base colour.

What is a Color Mixer?

A colour mixer takes two colours and produces the intermediate colours between them — a gradient ramp. The tool answers questions like "what does halfway between my brand blue and my accent yellow look like?" and "how would I step from this hero colour to that footer colour across five evenly-spaced tones?" Colour interpolation is the mathematical backbone of every CSS gradient, every animated colour transition, and every palette that spans multiple hues.

The interpolation space matters. Take a blue and a yellow as an example. In RGB, the midpoint is a muddy grey-brown — a mathematical artefact of averaging red, green, and blue channels where each has opposite values. In LAB(perceptually uniform colour space), the midpoint is a soft lime-green that feels genuinely between the two. In HSL, interpolation rotates hue on the shortest arc around the colour wheel, which produces a vivid gradient through green rather than a muddy one.

When to pick which. For gradients between brand colours in a UI, use LAB — it gives clean, predictable midpoints. For rainbow-style hue transitions where you want the intermediate steps to be saturated and distinct, use HSL. RGB is the naive choice that every software defaults to; it's fine for close-hue pairs (blue to navy) and bad for far-hue pairs (red to green). Try switching between the three on the same pair of colours to feel the difference.

CSS and modern gradients. CSS used to interpolate gradients only in sRGB space (the RGB variant). CSS Color Level 4 adds color-interpolation-method — you can now write linear-gradient(in oklch, red, green) and get a perceptually uniform gradient at browser level. Most evergreen browsers support this since 2023. For legacy browser compatibility, generate the ramp as discrete colour stops using this tool and feed them into the gradient, which works everywhere.

Use cases beyond gradients. Interpolation is how data-visualisation colour scales work (low-value colour → high-value colour via perceptually-even midpoints). It's how heat-maps pick colours for intermediate temperatures. It's how product designers generate palettes for multi-step onboarding flows (home screen colour → account screen colour, softly transitioning). Pick any two endpoint colours in your brand and ask: what are the three colours that get us between them?

How to mix colours

Pick two colours — A and B.
Set the number of steps in the ramp (3–15).
Choose interpolation space — LAB for clean UI, HSL for vivid, RGB for legacy.
Copy any swatch or the CSS gradient.

Features

3–15 step ramp between any two colours.
LAB, HSL, and RGB interpolation modes.
HSL rotates hue on the shortest arc for vivid transitions.
Live CSS gradient output with copy button.
Per-swatch HEX copy.

Frequently asked questions

Why does RGB give me a muddy midpoint?: RGB averaging is mathematically correct but perceptually wrong — equal channel values near the middle often produce grey-brown tones. LAB interpolation respects how human vision perceives colour distance and produces clean midpoints.
What's the difference between HSL and LAB?: HSL rotates hue on a circular arc — if you mix red and green it goes through vivid yellow. LAB treats colour as points in a 3D perceptual space and interpolates in a straight line — red-to-green passes through greys. HSL for vivid rainbows, LAB for clean UI.
Can I use this to generate palette steps between brand colours?: Yes. Pick two brand colours (primary + accent, say), set 5–7 steps, use LAB. The intermediate swatches can become your semantic in-between palette.
Does this match CSS native gradient interpolation?: Modern CSS supports color-interpolation-method (e.g. linear-gradient(in oklch, ...)), which gives perceptually-correct gradients natively. Our tool lets you preview equivalent ramps and generate discrete stops as a fallback for older browsers.
Why is my HSL gradient taking the long way around the colour wheel?: Our HSL mixer always takes the shortest arc — if the two hues are 300° apart, it goes 60° the other way. If you want the long way, swap the order of the colours or use multiple gradients.