Skip to content
ToolQivo

Color Mixer

Blend two colours and see every step between them.

Color Tools Reviews Free · no sign-up

The two colours

The mix 
The blended colour appears here

Quick Tool Overview

The Color Mixer blends two colours at any ratio and shows every step between them, with a choice of blending space — because mixing in sRGB sends colours through a muddy middle and mixing in OKLab does not.

What it does
Blends two colours and shows the ramp between
You give it
Two colours and a ratio
You get back
The mix, every step, and the color-mix() CSS
Best for
Hover states, tints and finding an in-between colour
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Color Mixer

Pick two colours, set how much of each you want, and get the blend — plus the complete ramp between them, so you can see every intermediate shade and take whichever one you actually wanted.

The blending space is the option that matters. Mixing in sRGB — averaging the hex values, which is what most tools do — sends colours through a muddy middle, because the numbers in a hex code are gamma-encoded and averaging them is not averaging light. Blue and yellow come out a dull grey-green rather than anything you would call a mix.

Mixing in OKLab fixes it. The colours are converted to a perceptual space first, so the middle stays as colourful as the ends, and the steps look evenly spaced rather than bunching up. Linear RGB is offered as well, which is what light itself does and what a renderer uses. All three are shown side by side, because the difference is easier to see than to describe.

Key features of the Color Mixer

Three blending spaces

OKLab for the best-looking mix, sRGB to match what other tools do, linear RGB for physically correct light.

The whole ramp, not one answer

Every intermediate step is shown, so you can take the one you actually wanted rather than re-mixing.

Matches CSS color-mix()

The equivalent declaration is emitted, and it matches because CSS also defaults to OKLab.

The muddy middle explained

All three spaces are shown side by side, which is the only way to see why the default everywhere else looks wrong.

Click any step

Every swatch in the ramp copies its own HEX code.

How to use the Color Mixer

  1. 1

    Set the two colours

    Type, paste or pick them. Any notation works.

  2. 2

    Move the ratio

    Drag the slider for anything from all of the first colour to all of the second.

  3. 3

    Choose a blending space

    OKLab for the best-looking mix, sRGB to match what most tools do, linear for physically correct light.

  4. 4

    Take a step from the ramp

    Click any swatch in the ramp to copy it.

Frequently asked questions

Because screens mix light, not pigment. Blue and yellow light are close to opposite, so they average toward neutral. The paint result you remember comes from pigments absorbing wavelengths, which is a different process entirely.

Reviews of the Color Mixer

What people who use the Color Mixer think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Color Mixer. It takes half a minute and no account.

Write the first review

More color tools