Color theory is a set of ideas that help us describe colors precisely and combine them with intention. You only need a few concepts to start.
The three properties of every color
- Hue — the family name of the color: red, green, blue and so on.
- Value (lightness) — how light or dark it is. Value creates most of the structure we see; a design that works in grayscale usually works in color.
- Saturation (chroma) — how pure or muted it is. Muted colors feel sophisticated; saturated colors feel energetic.
Two ways of mixing color
Additive mixing combines light. Screens use red, green and blue; all three at full strength make white. Subtractive mixing combines pigments or inks that absorb light. Printers use cyan, magenta, yellow and black (CMYK); paints are traditionally taught with red, yellow and blue.
This is why a vivid screen color may not print the same way — see the CMYK converter notes.
The color wheel
The wheel arranges hues in a circle so relationships become visible. Primary colors can mix the others; secondary colors sit between primaries; tertiary colors fill the gaps.
Tints, shades and tones
Adding white makes a tint, adding black makes a shade and adding gray makes a tone. Generate all three for any color with the shades generator.
Contrast creates hierarchy
Our eyes go first to the area with the most contrast — in value, saturation or hue. Use the strongest contrast for the most important element, such as a primary button.
Context changes color
The same gray looks lighter on black and darker on white. Always judge colors next to the colors they will actually be used with.
Next steps
Continue with Understanding Color Harmony and experiment with the color harmony generator.
