Color theory
Color theory is the set of practical rules for how colors mix, contrast and work together. Start with the color wheel, then the harmonies, then put them to work in a palette.
Color theory topics
- The color wheelHow hues relate: primaries, secondaries, tertiaries, warm and cool.
- Primary colorsRed, yellow, blue; red, green, blue; cyan, magenta, yellow.
- Rainbow colorsROY G BIV in order, with hex codes and wavelengths.
- Complementary colorsComplementary colors sit directly opposite each other on the color wheel, 180 degrees apart.
- Analogous colorsAnalogous colors are three or more colors that sit next to each other on the color wheel, usually within about 30 degrees of each other: yellow, yellow-orange and orange, for example.
- Triadic colorsA triadic color scheme uses three colors evenly spaced around the color wheel, 120 degrees apart, forming a triangle.
- Split-complementary colorsA split-complementary scheme uses a base color plus the two colors on either side of its complement, about 150 and 210 degrees away.
- Monochromatic colorsA monochromatic color scheme uses a single hue in several lightness and saturation levels: tints (with white), shades (with black) and tones (with gray).
Hue, value and saturation
Every color can be described by three properties. Hue is its position on the wheel (red, blue). Value, or lightness, is how light or dark it is. Saturation, or chroma, is how intense it is compared with a gray of the same lightness. Changing one at a time is the simplest way to build palettes that hold together.
Most design problems are value problems. Two colors with very different hues but the same lightness are hard to tell apart in grayscale and fail contrast checks. Use the contrast checker to test text and backgrounds.
Color harmony
Harmonies are recipes for picking colors that look good together, based on their positions on the wheel. Complementary pairs give contrast; analogous groups feel calm; triads are lively; monochromatic schemes are cohesive. Pick one as a starting point, then adjust lightness and saturation by eye.
Putting color theory to work
- Use the 60-30-10 rule: a dominant color, a secondary color and an accent.
- Build tints and shades of each color so you have light backgrounds and dark text in the same hue.
- Check contrast for every text and background pair.
- Test your palette for color blindness: about 1 in 12 men has some form of color vision deficiency.
- For personal style, seasonal color analysis applies the same ideas to skin, hair and eye color.
Color theory terms
| Term | Meaning |
|---|---|
| Hue | The color family: red, orange, yellow, green, blue, purple and the colors between them. |
| Value (lightness) | How light or dark a color is, from black to white. |
| Saturation (chroma) | How intense or pure a color is, compared with a gray of the same lightness. |
| Tint | A color mixed with white: lighter and softer. |
| Shade | A color mixed with black: darker. |
| Tone | A color mixed with gray: more muted. |
| Warm and cool | Reds, oranges and yellows feel warm; greens, blues and violets feel cool. |
| Neutral | Black, white, gray and low-saturation browns and beiges that support other colors. |
| Contrast | The difference in lightness between two colors, measured as a ratio for accessibility. |
Frequently asked questions
What is color theory?
A practical set of rules and models for how colors mix, contrast and combine, used in art, design and fashion.
What are the basics of color theory?
The color wheel, primary, secondary and tertiary colors, warm and cool colors, and color harmonies such as complementary and analogous.
What is the 60-30-10 rule?
A guideline for balancing a palette: about 60% dominant color, 30% secondary color and 10% accent.