Primary, Secondary, and Tertiary Colors Explained (with Swatches)
What are the primary, secondary, and tertiary colors? A simple, visual explainer with swatches, the color wheel, and the difference between paint (RYB) and screen (RGB).
Shaheer Malik
Framer Designer & Developer
Primary colors are the base colors that cannot be made by mixing others; secondary colors are made by mixing two primaries; and tertiary colors are made by mixing a primary with a neighbouring secondary. In traditional art (the RYB model) the primaries are red, yellow, and blue. On screens (the RGB model) they are red, green, and blue.
What are the primary colors?
Primary colors are the foundational colors you cannot create by mixing other colors together. Everything else on the color wheel is built from them. Which three count as primary depends on whether you are mixing pigment or light.
In the traditional art and paint model (RYB), the three primary colors are red, yellow, and blue:
On screens, which mix light instead of pigment (the RGB model), the primaries are red, green, and blue:
For the deeper science of why these differ, see color theories: RGB, RYB and primary colors.
What are the secondary colors?
Secondary colors are made by mixing two primary colors in equal parts. In the RYB (paint) model, the three secondary colors are orange, green, and purple:
| Mix | Makes | Swatch |
|---|---|---|
| Red + Yellow | Orange | |
| Yellow + Blue | Green | |
| Blue + Red | Purple |
What are the tertiary colors?
Tertiary colors are made by mixing a primary color with the secondary color next to it on the wheel. There are six, and their names are hyphenated, like red-orange or blue-green:
The six tertiary colors are red-orange, yellow-orange, yellow-green, blue-green, blue-purple, and red-purple. Together, primary, secondary, and tertiary colors make up the twelve-part color wheel that most color schemes are built from.
Why this matters for design
Understanding the wheel is what lets you build palettes that feel intentional instead of random. Color is not decoration, it is one of the fastest signals a product sends. A 2006 study in the journal Management Decision found that people make up to 90 percent of a snap judgment about a product based on color alone, and research summarised by the Nielsen Norman Group stresses that color must still pass contrast checks to stay usable.
Once you know which colors are primary, secondary, and tertiary, you can build relationships between them, which is exactly what color schemes do.
"Good design is invisible. People do not notice the hierarchy, the spacing, or the color logic. They just feel like the product makes sense, and that feeling is the entire job."
Shaheer Malik, senior UI/UX designer and Framer developer (75+ projects shipped, rated 4.93 stars across 32 Contra reviews)
From the color wheel to real palettes
The wheel is the starting point. The schemes built on it are where design happens:
- Complementary colors sit opposite each other for high contrast.
- Monochromatic schemes use one hue in many shades.
- Triadic schemes use three evenly spaced colors.
- See them all in types of color schemes.
Frequently asked questions
What are the 3 primary colors?
In traditional art and paint (RYB), they are red, yellow, and blue. On screens, which mix light (RGB), they are red, green, and blue. Primary colors cannot be made by mixing other colors.
What are the secondary colors?
In the paint model they are orange (red plus yellow), green (yellow plus blue), and purple (blue plus red). Each secondary color is a mix of two primaries.
What are tertiary colors?
Tertiary colors are made by mixing a primary with an adjacent secondary. There are six: red-orange, yellow-orange, yellow-green, blue-green, blue-purple, and red-purple.
Why are the primary colors different for paint and screens?
Paint mixes pigment, which subtracts light (RYB), while screens mix light directly (RGB). Because the two work in opposite directions, they have different primary colors.
How many colors are on the color wheel?
The standard wheel has twelve: three primary, three secondary, and six tertiary colors.
Want this applied to your product?
I design and build UI/UX for SaaS and AI startups, design and development under one roof. See my UI/UX design services, browse case studies, or get a fixed quote within 24 hours.
Related reading
Need this kind of work for your product?
I design and build websites, products, and brands for SaaS & AI startups — design and code under one roof.