What Color Do You Get When You Mix Two Colors? A Simple Guide

Blue and yellow make green. Everyone learns that at school. But mix the same blue and yellow on a computer screen and you might get a dull grey. Red and green make brown in a paint box and bright yellow on a TV. So which answer is right?

Both are, because paint and light mix in opposite ways. This guide explains the difference, gives you a quick chart for the most common mixes, and shows how to mix any two exact colors online.

Color MixerBlend two colors together and get the in-between steps.

Two ways of mixing color

Mixing paint, ink or crayons (subtractive). Every pigment absorbs part of the light that hits it. Mix two pigments and together they absorb more, so the result gets darker. The traditional primary colors for painting are red, yellow and blue. Printers use cyan, magenta and yellow, plus black.

Mixing light on a screen (additive). Phones, monitors and TVs make every color from tiny red, green and blue lights. Adding light makes the result brighter. Full red, green and blue together give white.

That is why the same pair of colors can give two different answers. When you design for a website or an app, you are working with light. When you paint a wall or print a flyer, you are working with pigment.

Paint mixing chart

Colors opposite each other on the color wheel, such as red and green or blue and orange, cancel each other out and turn brown or grey. Painters use this on purpose: a touch of the opposite color calms down a color that looks too bright.

Light (screen) mixing chart

How the online color mixer works

Pick two colors with the color pickers or paste their HEX codes, then move the ratio slider to choose how much of each one you want. The tool shows the mixed color with its HEX code, and a row of in-between steps that you can copy for gradients and charts.

There are two modes. RGB averages the red, green and blue values directly, which is how most design software blends colors. Linear light mixes the actual amount of light, so the middle of the blend stays brighter and looks more natural, especially between two bright colors. Neither mode copies paint exactly, so use the paint chart above for real-world painting.

Build a full palette from one mix

Once you have a color you like, these tools help you turn it into a complete set:

• Shades and tints: create lighter and darker versions of one color for buttons, backgrounds and hover states.

Color Shades GeneratorGenerate tints and shades (50–900 scale) from any base color.

• Matching colors: the palette generator suggests complementary, analogous and triadic colors that go well together.

Color Palette GeneratorCreate harmonious color palettes with color theory rules.

• Check readability: before you put text on your new color, test the contrast so everyone can read it.

Color Contrast CheckerCheck WCAG contrast ratio between text and background colors.

Frequently asked questions

What two colors make purple? Red and blue. For a cooler purple add more blue, and for a warmer one add more red.

What colors make brown? Mix two opposite colors, such as red and green or blue and orange, or mix all three primaries. Add a little black or white to make it darker or lighter.

Why does mixing blue and yellow on screen look grey? On a screen you are averaging light, and blue and yellow are opposites in light, so the average is close to grey. Try the Linear light mode, or mix in a little green.

How do I get the HEX code of a mixed color? The color mixer shows the HEX code of the result, and the color converter turns it into RGB or HSL if you need another format.

Color ConverterConvert colors between HEX, RGB, HSL, HSV and CMYK.

Mix a few pairs yourself and you will quickly get a feel for it. The rules are simple once you know whether you are mixing paint or light.