Color Mixer

What this tool does

Color Mixer blends two colours together at a ratio you control, letting you pick the interpolation space the blend happens in: RGB, HSL or the perceptually even OKLab. A gradient strip shows the whole range from one colour to the other at once, so you can see exactly where a naive RGB or HSL mix dips toward grey or swings through an unrelated hue compared with OKLab.

Averaging two colours sounds simple until you try it: mixing a pure red and a pure green in plain RGB gives a muddy brown, while most people expect something closer to yellow or at least a brighter result. The reason is that RGB and HSL were never designed to match how the eye perceives brightness and hue while blending.

This mixer computes the blend in whichever space you choose. RGB and HSL are included because they are what many tools use by default and it is useful to see their quirks directly, while OKLab blends lightness, and the two colour-opponent channels that encode hue and chroma, in a model built to track human perception, which is why it is the recommended choice for smooth, natural-looking gradients and intermediate colours.

How to use Color Mixer

1. Enter Colour A and Colour B in any CSS colour syntax.
2. Choose an Interpolation space: OKLab, HSL or RGB.
3. Drag the Mix ratio slider to move the blend from Colour A toward Colour B.
4. Compare the Gradient strip, which plots the full range from 0% to 100% at once.
5. Copy the Mixed colour hex code, or copy the generated CSS gradient string for direct use in a stylesheet.

Tips for better results

• Switch between spaces at a 50% ratio to see the clearest difference; RGB and HSL often look duller or shift hue compared with OKLab.
• A gradient that needs to pass through white or stay vivid along its length usually looks best built in OKLab rather than RGB.
• HSL interpolation can swing the wrong way around the colour wheel when two hues are nearly opposite; swap one colour's hue slightly if the midpoint looks wrong.
• The generated CSS gradient string uses fixed colour stops, so it renders identically across browsers regardless of their native gradient colour space support.

Common use cases

• Finding an intermediate brand colour between two existing palette colours.
• Building a smooth two-colour gradient for a hero section or chart background.
• Checking whether a planned colour transition will pass through an unwanted grey or brown midpoint before writing any CSS.
• Teaching or demonstrating why OKLab-based colour tools produce more natural-looking blends than plain RGB.

Common mistakes to avoid

• Blending two very different hues in HSL and expecting a predictable midpoint; circular hue interpolation can take either the short or long way around the wheel.
• Assuming the CSS gradient output reproduces native browser gradient interpolation modes exactly; it uses discrete colour stops computed in the chosen space instead.
• Mixing colours with very different alpha values without checking the result's opacity, which this tool blends along with the colour channels.