Blend two colors

Color mixer that blends the way you expect

Pick two colors and a ratio. Choose whether they should mix like paint, like light on a screen, or in perceptually even steps, then copy the result or any of the nine blend steps.

Blend steps click a step to copy it

Why blue and yellow make grey on most screens

Paint and pixels mix in opposite ways. Pigments subtract light: yellow paint absorbs blue light, blue paint absorbs red, and what both let through is green. Screens add light: averaging the red, green and blue numbers of blue and yellow lands near a neutral grey, which is why many online color mixers disappoint anyone who has used a brush.

This mixer gives you three honest options. Pigment-like blends lightness and saturation and travels around the hue circle the short way, so blue and yellow move toward the green–teal side of the wheel rather than washing out — at a 50/50 ratio they land on turquoise, not a pure green. It is a close visual approximation, not a physical pigment simulation. Perceptual draws a straight line through OKLab, a color space designed so equal steps look equal, which makes it the best choice for smooth gradients. Light mixes in linear sRGB, exactly how two colored lights overlap.

GRADIENTSCopy steps from the blend strip to build a CSS or Figma gradient without the muddy middle of a plain two-stop gradient.
TINTS AND SHADESMix any color with white or black to build a consistent scale of lighter and darker versions.
THREE OR MORE COLORSCopy the result, paste it into the first slot and mix again with a third color.

Keep going with your colors

Found two colors that work? Check where they sit on the color wheel to find a third, or describe the overall mood to the color palette generator for a complete, contrast-checked set. Our color mixing guide covers the theory in more depth.

Frequently asked questions

What color do blue and yellow make?

Mixed like paint they head toward green; the Pigment-like mode travels that way round the wheel and at a 50/50 ratio lands on turquoise (#00CFBD) — nudge the ratio toward yellow for a greener result. Mixed as light on a screen they make a greyish neutral, which you can compare by switching to the Light mode.

Which mixing mode should I use?

Use Pigment-like when you want results that match paint, Perceptual for smooth gradients and evenly spaced steps, and Light when you are simulating overlapping colored lights or screen blending.

What is OKLab?

OKLab is a color space designed so that equal numeric distances look like equal visual differences. Mixing in it avoids the dull, muddy midpoints of mixing raw RGB values.

How do I mix three colors?

Mix the first two, click the result to copy its hex code, paste it into the first color field and choose your third color.

Is this an accurate paint mixing simulator?

It is a close visual guide, not a physical model of pigments. Real paints vary by brand and pigment load, so treat the result as a starting point and test on paper. Our color mixer guide has tips for real paint.

Is it free?

Yes. It runs in your browser with no sign-up.

More free color tools

With Pixazo’s platform we deliver enterprise-class security and compliance to you and your customers through every interaction.