What color theory is, and what it is not
Color theory is a set of practical guidelines for mixing and combining colors. It grew out of centuries of observation by painters, printers and scientists, and designers use it as a shared vocabulary. It is best treated as a toolkit of starting points rather than a rulebook. Plenty of striking work breaks the guidelines on purpose, but it helps to know which guideline is being broken and why.
This guide covers the three properties that describe any color, the color wheel, the tints and shades you can make from a single hue, and the most common ways of arranging colors together. Later topics such as building a full palette or checking readability build on these basics.
The color wheel
The color wheel arranges hues in a circle so that relationships between them are easy to see. The traditional painter’s wheel starts with three primary colors, red, yellow and blue. Mixing two primaries gives a secondary color: orange, green and violet. Mixing a primary with its neighboring secondary gives a tertiary color, such as red-orange or blue-green.
Screens and printed pages mix color differently from paint. Screens add light, while ink on paper absorbs it, and the primaries in those systems are not the same as the painter’s primaries. The difference between these systems is covered in the discussion of color modes. For the purposes of learning harmony, the traditional wheel is still a useful map, because neighbors, opposites and evenly spaced points on it behave in familiar ways.
Hue, saturation and value
Every color can be described with three properties.
- Hue is the basic color family: red, green, blue and so on. It is the position of a color around the wheel.
- Saturation describes how intense or pure a color is. A highly saturated color looks vivid, while a low-saturation color looks muted or grayish.
- Value (sometimes called lightness or brightness) describes how light or dark a color is, regardless of its hue.
Beginners often focus on hue and overlook value, yet value does much of the work in a design. Two colors of different hues but similar value can look flat together, and text in one of them on the other is hard to read. Converting a design to grayscale is a quick test: if the shapes and text still separate clearly, the value structure is sound. This idea is central to visual contrast, and it comes up again when thinking about readability.
Tints, tones and shades
You can build variations on a single hue by changing saturation and value:
- A tint is a hue mixed with white, making it lighter.
- A shade is a hue mixed with black, making it darker.
- A tone is a hue mixed with gray, making it less saturated.
A set of tints, tones and shades of one hue gives you a family of related colors that always look at home together. Many interface and brand systems rely on such a family so that there are light backgrounds, mid-tone accents and dark text options that clearly belong together.
Warm and cool colors
Colors are commonly grouped as warm (reds, oranges, yellows) or cool (blues, greens, violets). Warm colors tend to appear to advance toward the viewer, and cool colors tend to recede, which designers use to suggest depth and to direct attention. The effect is a tendency, not a law, and it depends on surrounding colors. A small warm accent against a cool background is a common way to create a focal point, as in the idea of emphasis.
Common harmony schemes
A color harmony scheme is a recipe for choosing hues by their positions on the wheel. The most common ones are:
- Monochromatic: one hue, varied in value and saturation. Safe and cohesive, though it can lack variety.
- Analogous: hues that sit next to each other on the wheel, such as yellow, yellow-green and green. Calm and natural.
- Complementary: two hues directly opposite each other, such as blue and orange. High energy, because each makes the other look more intense.
- Split-complementary: one hue plus the two neighbors of its opposite. Keeps some of the contrast with less tension.
- Triadic: three hues evenly spaced around the wheel. Lively and varied, and usually easiest to manage when one color dominates.
- Tetradic (square or rectangle): four hues in two complementary pairs. Rich but demanding to balance.
None of these guarantees a good result. They are starting points that narrow an overwhelming number of options. A separate article on harmony schemes looks at the most common three in more detail.
Proportion matters as much as choice
A frequent beginner mistake is to use all chosen colors in equal amounts. Designs usually look more settled when one color dominates, a second supports it and a third appears in small doses. A common informal guideline is something like 60 percent dominant, 30 percent secondary and 10 percent accent. Treat those figures as a rough illustration, not a formula. The point is that unequal proportions create hierarchy and rest for the eye, which supports visual hierarchy in a layout.
Color on screens and in print
Color theory describes relationships, but the final result depends on the medium. The same color can look different on different displays, in different lighting and on different paper. Colors that look bright on a screen may not be reproducible in ink. If the work will be printed, it helps to learn how RGB and CMYK differ and to check a physical proof before committing to a large run.
Practical ways to start
- Choose one dominant hue before thinking about any others.
- Build tints and shades of it so that you have light and dark options.
- Add a second hue using one of the harmony schemes above, in smaller amounts.
- Check the value structure in grayscale.
- Look at the result on more than one device, and ask someone else to look at it too, since people do not all see color identically.
Color is also learned by looking. Collect examples of combinations you find appealing, note where they sit on the wheel, and try to explain to yourself why they work. Over time the vocabulary above becomes a way of describing instincts you already have.