Color Tools
Color Palette GeneratorImage Color ExtractorColor Contrast CheckerColor Blindness SimulatorColor Shade / Tint GeneratorColor MixerView all 9

Color Mixer

Mix colors like real paint or like screen light — in any number of parts.

Runs in your browserNo sign-up required

Mixes like real paint — blue + yellow makes green.

  • 1 part
    50%
  • 1 part
    50%
1 + 1 =#00BF00
From colour 1 to colour 2 — tap to use

Paint mode is a digital approximation of pigment mixing. Real paints vary by brand and medium, so test a small amount first.

Simple, Fast, and Precise

Sometimes you just need to know what two colors look like blended, at a specific ratio — not a full palette, not a design system, just a quick, precise mix. Adjust the slider and read the exact resulting hex value instantly.

How to Use This Tool

  1. 1Choose Paint or LightPaint mixes like real pigment; Light mixes like a screen or CSS color-mix().
  2. 2Pick your colorsUse the pickers or type hex codes — up to five colors, or start from an example like Blue + Yellow.
  3. 3Set the partsAdd parts of each color, like 2 parts blue to 1 part yellow, or tap a shade on the strip.
  4. 4Copy the resultTap HEX, RGB or HSL to copy it.

Good to Know

  • Paint mode converts colors to the red-yellow-blue model painters use, mixes there, and converts back — so blue and yellow make green, red and yellow make orange, and red and blue make purple.
  • Light mode averages red, green and blue light the way screens do — the same as CSS color-mix() in sRGB. It's the right choice for web and UI colors.
  • Mixing with white makes a tint and with black a shade; for a full scale from one color, try the Color Shade/Tint Generator.

Frequently Asked Questions

Why does blue + yellow make grey in some mixers?

Most online mixers average light (RGB), and averaged blue and yellow light is grey. Paint works differently: pigments absorb light, so blue and yellow paint make green. Choose Paint mode for that result, or Light mode when you want screen-style mixing.

How accurate is Paint mode?

It's a well-known digital approximation of pigment mixing and gives the results people expect for common mixes. Real paints vary by brand, pigment and medium, so mix a small test amount before a big batch.

Can I mix more than two colors?

Yes — add up to five colors and give each a number of parts. The percentage of each is shown next to it.

Is this the same math as CSS color-mix()?

Light mode matches color-mix() in the srgb color space, and shows the CSS for two-color mixes. Paint mode has no CSS equivalent.

Is my color choice saved anywhere?

No — everything happens in your browser and nothing is sent anywhere.