1. Every color has three dimensions
Designers describe a color with hue (which color family), chroma or saturation (how vivid versus grey) and lightness or value (how light versus dark). Move each slider on its own and notice how differently they change the swatch.
#D15B60These are OKLCH values, a space designed so that equal steps look equal. Why that matters.
2. There is more than one color wheel
Art class taught red, yellow and blue as primaries. Screens use red, green and blue light. Both are arranged as a wheel, but the colors sit in different places — so the “opposite” of a color depends on which wheel you ask. Drag the angle and switch wheels.
On the RGB wheel, blue sits opposite yellow and red opposite cyan. This is what a screen shows.
For digital design use the RGB wheel; it predicts what the screen produces. The RYB wheel is still useful as a cultural reference: “red and green are Christmas colors” comes from it. Print adds a third system, CMYK, where cyan, magenta and yellow inks subtract light from white paper.
If you like learning this way, ahaboo has narrated, interactive explainers on how everyday things really work, one “aha” at a time.
3. Value does the heavy lifting
Hue grabs attention, but lightness decides readability. Toggle grayscale on these popular pairs: several that look strongly contrasting in color become nearly the same grey. That is roughly how the pair looks to someone with a color vision deficiency — and why WCAG contrast is calculated from luminance alone.
Check any pair precisely in the contrast checker.
4. Temperature: warm advances, cool recedes
Roughly half the wheel, from red through yellow, reads as warm; the other half, from green through violet, reads as cool. Warm colors seem closer and more energetic, which is why sale banners are red and orange; cool colors seem further away and calmer, which is why so many banks are blue. See warm palettes and cool palettes.
5. Harmony rules are geometry
Harmony rules pick hues by fixed angles on the wheel: opposite (complementary), neighbours (analogous), a triangle (triadic), a “Y” (split-complementary), a square (tetradic) or a single hue (monochromatic). Try them all on the interactive color wheel.
6. Proportion beats selection
The same five colors can look calm or chaotic depending on how much of each you use. The interior-design 60-30-10 rule is a reliable starting point: one dominant color, one supporting, one accent.
7. Context changes color
Josef Albers’ Interaction of Color (1963) showed that the same grey looks lighter on black and darker on white, and can even take on a tint from its surroundings. Always judge colors in place — on the palette generator’s live UI preview, not as isolated swatches.