What is the color wheel?
The color wheel is a diagram that places colors around a circle. Neighboring colors look alike. Opposite colors are the most different.
Isaac Newton drew one of the first versions in the 17th century. Since then, artists and designers have used it to understand and combine colors.
There are two main models: the traditional one used in painting, and the digital one used on screens.
Traditional RYB model (painting)
This is the model taught in school. It's called RYB for red, yellow and blue.
- Primary: red, yellow and blue. You can't get them by mixing other colors.
- Secondary: orange (red + yellow), green (yellow + blue) and purple (blue + red).
- Tertiary: a mix of a primary and a neighboring secondary. They are red-orange, yellow-orange, yellow-green, blue-green, blue-violet and red-violet.
In total, the traditional wheel has 12 colors. It's useful for painting, illustration and understanding harmonies.
Digital RGB model (screens)
Screens make color with light. They mix three lights: red, green and blue. That's why the model is called RGB.
- Primary: red, green and blue.
- Secondary: yellow (red + green), cyan (green + blue) and magenta (blue + red).
- Add all three lights at full strength and you get white. With no light, you get black.
Hex codes, like #FF0000, describe RGB colors. That's why they're the standard in web and app design.
Printing uses a different model, CMYK: cyan, magenta, yellow and black. It's what print shops use.
In practice, harmonies work in a similar way in both models. What changes is which color sits opposite another. For example, in RYB the complement of red is green. In RGB, it's cyan.
Warm and cool colors
If you split the wheel in half, you get two groups:
- Warm: red, orange and yellow. They convey energy, closeness and movement. They seem to come toward the viewer.
- Cool: green, blue and purple. They convey calm, distance and order. They seem to recede.
Temperature also exists within a single color. Some reds are cooler, with a bluish tint, and some grays are warmer, with a hint of brown.
A handy trick: use cool colors for backgrounds and large areas, and warm colors for what you want to highlight.
Color harmonies
Harmonies are combinations based on where colors sit on the wheel. They're a shortcut to balanced palettes. You can try them with our color harmony tool.
Complementary
Two colors opposite each other on the wheel. For example, blue and orange.
They create maximum contrast. They work great for making a button, a price or a headline pop.
How to use them: don't use them in equal amounts. Pick one as the dominant color and use the other as an accent. Avoid putting text in one color on top of its saturated complement, because it vibrates and strains the eyes.
Analogous
Three neighboring colors on the wheel. For example, yellow, yellow-orange and orange.
They create calm, natural combinations. You see them all the time in nature, like in a sunset or a forest.
How to use them: choose a main color, a supporting color and use the third for details. Add a neutral so you don't lose contrast.
Triadic
Three colors evenly spaced around the wheel, forming a triangle. For example, red, yellow and blue.
They make lively, balanced palettes. They're popular in kids' design, games and cheerful brands.
How to use it: let one color dominate and use the other two in smaller amounts. If it feels too intense, lower the saturation of one or two colors.
Split complementary
Take one color and, instead of its exact opposite, use the two neighbors of that opposite. For example, blue with red-orange and yellow-orange.
It has plenty of contrast but less tension than a complementary pair. It's a good place to start.
How to use it: the base color covers most of the design. The other two work as accents.
Tetradic
Four colors that form a rectangle or a square on the wheel. It's the same as two complementary pairs. For example, blue, orange, green and red.
It's the richest harmony, but also the hardest to balance.
How to use it: one dominant color, one secondary and two accents. Mix warm and cool tones carefully and lean on neutrals.
Monochromatic
A single color in different lightness and saturation levels. For example, several shades of blue.
It's elegant, consistent and easy to apply. It's widely used on corporate websites and in interfaces.
How to use it: use the darkest shade for text, the middle one for key elements and the light ones for backgrounds. To highlight something, add a single accent color.
Tips for using the color wheel
- Start with a harmony and tweak it afterward. You don't have to follow it to the letter.
- Adjust lightness and saturation to soften intense combinations.
- Always add neutrals: white, black, gray or beige.
- Make sure text is easy to read on every background.