Guide
Color Theory Basics
Color theory is a set of practical rules for how colors relate to each other: the color wheel, the three properties of any color and the harmonies that make combinations feel balanced. This guide uses real values you can copy.
The color wheel
A color wheel arranges hues in a circle so that you can see how they relate. Painters learn a wheel built on red, yellow and blue. Screens use a wheel built on red, green and blue light, with cyan, magenta and yellow between them, and that is the wheel the tools on this site use. Hue is measured in degrees: red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240° and magenta at 300°.
The wheel is useful because positions have meaning. Colors across from each other are opposites, colors next to each other are similar, and colors spaced evenly around the circle have a natural balance. Every harmony below is a pattern of positions on this wheel.
Hue, saturation and lightness
Every color has three properties, and being able to name them makes it much easier to adjust a color that is almost right.
- Hue is the color family: red, orange, green, blue and so on.
- Saturation is how pure the color is. Low saturation moves it toward gray, high saturation makes it vivid.
- Lightness is how light or dark it is, from black through the pure color to white.
Our HSL guide shows how these three map to numbers. If a color feels too loud, lower the saturation. If it disappears on a white page, lower the lightness.
Tints, shades and tones
Three simple recipes make variations of one color without changing its hue:
- A tint mixes in white and is lighter.
- A shade mixes in black and is darker.
- A tone mixes in gray and is more muted.
Starting from royal blue (#4169E1), the first two steps of each look like this:
| Variation | Colors |
|---|---|
| Tints (add white) | #6182E6 #809BEB |
| Shades (add black) | #3658BC #2B4696 |
| Tones (add gray) | #4C6DD1 #5671C1 |
The tints and shades generator produces longer scales and lets you copy them as CSS.
Color harmonies
A harmony is a rule for choosing colors by their positions on the wheel. Here are the common ones, calculated from royal blue at 225°:
| Harmony | The rule | Colors for royal blue |
|---|---|---|
| Complementary | The color opposite on the wheel (180°) | #4169E1 + #E1B941 |
| Analogous | Neighbors within 30° | #41B9E1 #4169E1 #6941E1 |
| Triadic | Three hues 120° apart | #4169E1 #E14169 #69E141 |
| Split-complementary | The color plus the two beside its complement | #4169E1 #E16941 #B9E141 |
| Tetradic (square) | Four hues 90° apart | #4169E1 #E141B9 #E1B941 #41E169 |
| Monochromatic | One hue at different lightness levels | #142F7F #1E46BD #4169E1 #7F9AEB #BCCAF4 |
Each pattern gives a different feel. Complementary pairs create strong contrast and draw the eye. Analogous colors blend smoothly and feel calm. Triadic and tetradic schemes give variety but need one dominant color so the design does not look busy. Monochromatic palettes are the safest and the easiest to keep consistent. None of these is a law, only a starting point you then adjust by eye.
Warm and cool colors
Reds, oranges and yellows are called warm, and blues and teals are called cool. Warm colors tend to feel closer and more energetic next to cool ones, and cool colors tend to recede. A common technique is to build a design from cool and neutral colors and use one warm accent for the single thing you want people to notice. On this site you can browse warm colors and cool colors.
Proportion matters as much as choice
A widely used rule of thumb is the 60-30-10 split: about 60% of a design in a dominant color (often a neutral), 30% in a secondary color and 10% in an accent. It is only a guide, but it explains why a palette that looks good as swatches can look wrong in a layout: the amount of each color changes how it feels.
Context changes how a color looks
The same color looks different depending on what surrounds it. A gray square looks lighter on a dark background and darker on a light one. This effect is called simultaneous contrast, and it is why you should always judge a color in the real layout, at the real size, and not only as a swatch.
Accessibility comes first. A harmony can be perfect on the wheel and still be unreadable. Always check text and important graphics against their backgrounds with the contrast checker, and never use color as the only way to show meaning. Read Color Contrast and Accessibility for the numbers.