analogous
Neighbouring hues that sit side by side on the color wheel for a calm, cohesive feel.
Color Theory for Designers
The colour wheel, the three properties that define every colour, and the six harmony rules worth memorising, each with a generated example you can copy.
The color wheel at a glance
Twenty-four hues at equal saturation and lightness. Note how much wider the perceived green region is than the blue one: human vision is not evenly distributed around the wheel, which is why even hue spacing does not produce even visual spacing.
Three properties define every color
Hue is the position on the colour wheel, measured in degrees from 0 to 360. Saturation is how much of the hue is actually present as opposed to grey. Lightness is how close the colour is to white or to black. Once you think in these terms, a hex code stops being an opaque string and becomes a coordinate you can reason about.
Most palette failures are lightness failures. If four of your five colours sit within ten lightness points of each other, nothing will separate visually no matter how carefully you chose the hues. Conversely, a palette that looks garish is almost always one where several colours are competing near maximum saturation.
Warm, cool, and why it matters
Warm hues appear to advance toward the viewer and cool hues appear to recede. This is a genuine perceptual effect, not a metaphor, and it is the reason a warm accent on a cool background reads as an obvious call to action while the reverse feels flat.
Temperature also applies within neutrals. A warm grey and a cool grey in the same interface will look like a mistake even to people who could not name the difference, which is why design systems tint their entire neutral ramp with a trace of the brand hue.
The six harmony rules
Each example below is generated from the same base hue so you can compare the rules directly rather than in isolation.
complementary
Two opposite hues that create the strongest possible contrast and visual tension.
split complementary
A base hue paired with the two neighbours of its complement — bold but easier to balance.
triadic
Three hues spaced evenly around the wheel for a vibrant, well-balanced scheme.
tetradic
Two complementary pairs, giving you the widest range of usable accents.
monochromatic
A single hue explored across lightness and saturation for a refined, minimal look.
Want to apply one of these to your own base colour? Paste a hex code into the palette generator and it will build the harmony for you, or read the longer write-up in color theory basics. For inclusive figure work, see the skin tone color palette guide and the hair color palette HEX codes.
Color Theory for Designers FAQ
What are the main color harmony rules?
The six that matter in practice are analogous, complementary, split-complementary, triadic, tetradic and monochromatic. Each one describes a different geometric relationship between hues on the color wheel, and each produces a predictably different feel.
What is the 60-30-10 rule?
Give your dominant color about 60% of the layout, your secondary about 30%, and your accent about 10%. Proportion does more for whether a palette works than the specific colors do, which is why the same five colors can look designed or chaotic depending only on how much of each you use.
What is the difference between hue, saturation and lightness?
Hue is the position on the color wheel from 0 to 360 degrees. Saturation is how much actual color is present versus grey. Lightness is how close the color sits to white or black. Together they define every color you can specify.
What are warm and cool colors?
Warm colors sit roughly between 330 and 70 degrees, covering reds, oranges and yellows. They appear to advance toward the viewer. Cool colors, from roughly 160 to 280 degrees, appear to recede, which is why cool backgrounds make warm foreground elements pop.