Primary, Secondary and Tertiary Colors in RYB, RGB and CMYK

Ask what the primary colors are and you may get three different answers: red, yellow and blue; red, green and blue; or cyan, magenta and yellow. None of them is wrong. Primary colors are not a fact of nature but a choice of starting points, and the right choice depends on whether you are mixing paint, light or ink. This guide explains the three systems, how secondary and tertiary colors come out of each, and what it all means if you design for screens.

What makes a color primary

A set of primaries is a small group of colors that can be mixed to produce a wide range of others, and that can't themselves be mixed from the other members of the set. Which colors work best as primaries depends on how mixing works in the medium. There are two fundamentally different kinds of mixing.

• Additive mixing combines light. Each light adds more energy, so mixing makes colors brighter, and all of the primaries together make white. Screens work this way.
• Subtractive mixing combines pigments or inks. Each one absorbs, or subtracts, some of the light that hits it, so mixing makes colors darker, and the primaries together make a dark, near-black color. Paint and print work this way.

RGB: the primaries of light

Every screen builds its colors from tiny red, green and blue lights. Those are the additive primaries, and they are the basis of HEX and RGB color codes. Mix them in pairs at full strength and you get the secondaries of light.

• Red and green make yellow: #FF0000 plus #00FF00 gives #FFFF00.
• Green and blue make cyan: #00FF00 plus #0000FF gives #00FFFF.
• Blue and red make magenta: #0000FF plus #FF0000 gives #FF00FF.
• All three together make white, #FFFFFF, and none at all makes black, #000000.

CMY and CMYK: the primaries of print

Printers use cyan, magenta and yellow ink. These are the subtractive primaries, and they are the mirror image of RGB: each ink absorbs one of the three lights. Cyan absorbs red, magenta absorbs green and yellow absorbs blue. That is why the secondaries of print are the primaries of light.

• Cyan and magenta make blue.
• Magenta and yellow make red.
• Yellow and cyan make green.

In theory, all three inks together make black. In practice they make a muddy dark brown, use a lot of ink and blur fine text. So printers add a fourth ink, black, called K for key, which gives CMYK. The Color Converter shows any color's CMYK breakdown: pure red #FF0000 comes out as cmyk(0%, 100%, 100%, 0%), full magenta and yellow ink with no cyan.

RYB: the primaries of the art class

Red, yellow and blue are the traditional painter's primaries, and the model most of us meet first. It predates modern color science and describes pigment mixing well enough for everyday painting.

• Red and yellow make orange.
• Yellow and blue make green.
• Blue and red make purple, or violet.

RYB is an approximation. Mixing a typical red and blue paint gives a fairly dull purple, and no three paints can mix every color. Cyan and magenta are closer to ideal subtractive primaries, which is why print moved to them. RYB is still a useful way to think about paint, and it is the basis of the traditional color wheel. Our guide The Color Wheel Explained shows how the RYB and RGB wheels place colors differently.

Tertiary colors

Tertiary colors come from mixing a primary with a secondary next to it. Each model has six, and together the primaries, secondaries and tertiaries make the familiar 12-part color wheel.

Tertiary colors in RYB

In the painting model, tertiaries are usually named after their two parents, primary first: red-orange, yellow-orange, yellow-green, blue-green, blue-violet and red-violet. Some traditions use names such as vermilion, amber, chartreuse, teal, indigo and magenta instead, but the hyphenated names are the clearest.

Tertiary colors in RGB

On screens, a tertiary is a full-strength channel plus a half-strength one, with the third channel off. Each sits exactly between a primary and a secondary on the digital wheel, at 30, 90, 150, 210, 270 and 330 degrees.

• Orange: #FF8000, red plus half green, at 30°.
• Chartreuse: #80FF00, green plus half red, at 90°.
• Spring green: #00FF80, green plus half blue, at 150°.
• Azure: #0080FF, blue plus half green, at 210°.
• Violet: #8000FF, blue plus half red, at 270°.
• Rose: #FF0080, red plus half blue, at 330°.

The names for these colors are less settled than the HEX values. Tools and references disagree on what to call #80FF00 or #FF0080, so it is safer to share the code than the name.

What this means for screen design

If you design for screens, RGB is the model your colors live in. But that doesn't mean you should use pure primaries. Full-strength #FF0000, #00FF00 and #0000FF are harsh and hard to pair, and they behave very unevenly. Pure green on white has a contrast ratio of only 1.37:1, so green text would be almost unreadable, while pure red on white reaches 3.99:1, still short of the 4.5:1 minimum for body text.

In practice, think of the primaries, secondaries and tertiaries as names for directions on the wheel rather than colors to use. A usable red, green or blue is that hue with its saturation and lightness adjusted to fit the job.

• Use hue names to talk about direction: a brand that is "azure" or "red-orange" tells a designer where to look on the wheel.
• Lower the saturation or lightness of pure primaries before using them on large areas or for text.
• Expect print to look different. Very vivid screen colors, especially bright greens, blues and oranges, can't be reproduced exactly with CMYK inks, so check with your printer before you rely on them.
• When someone quotes art-class color advice, remember it was written for the RYB wheel and translate it to RGB before applying it.

To see these colors in their places, open the Color Wheel Explorer and drag the base color around the wheel. Then choose the triadic rule: start from a primary such as #FF0000 and the other two primaries appear, or start from a secondary such as #FFFF00 and you get the other two secondaries.