---
name: Color harmony
slug: color-harmony
category: color
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A rule for choosing colours by their positions on the wheel, such as
  complementary or analogous or triadic, so a palette holds together by
  construction.
aliases:
  - name: color relationship
  - name: palette type
    source: community
tags:
  - perception
relations:
  contrastWith:
    - sixty-thirty-ten-rule
    - color-wheel
  variantOf: []
  partOf: []
  seeAlso: []
implementations: []
sources:
  - title: The Ultimate Color Glossary For UI Designers
    url: https://careerfoundry.com/en/blog/ui-design/color-glossary-for-ui-designers/
demo: inline
exhibit: false
useWhen: choosing a palette by a geometric rule rather than by eye
---

Harmony is the family name for every rule that picks colours by geometry on the
[colour wheel](/color-wheel) instead of by taste. Take one hue as the lead and the rule
says where the others are: directly opposite for a
[complementary](/complementary-colors) pair, immediately either side for an
[analogous](/analogous-colors) run, a third of the way around twice for a triad, either
side of the complement for a split complementary, two opposite pairs for a tetrad, and a
single angle worked in lightness alone for a
[monochromatic](/monochromatic-palette) set. The appeal is that the answer arrives already
justified: nobody has to defend why the second colour is that one, because the rule chose it.

The honest caveat is that harmony is a grammar rather than a law. The wheels these rules
are drawn on disagree with each other, so the same rule gives different answers depending
on which one is under it: the painter's red yellow blue wheel puts red opposite green, the
screen's additive wheel puts red opposite cyan, and a perceptual wheel like the one
`oklch` describes spaces hues by how far apart they actually look rather than by equal
arithmetic steps. Pick the wheel first, and treat what comes out as a candidate set to be
adjusted by eye, not as a finished palette.

What the geometry cannot decide is dominance. A triad of three equally loud colours in
equal amounts is a set of decisions fighting, which is why designers reach for a ratio
like sixty thirty ten: one hue carries the surface, one supports, and one appears rarely
enough to still mean something when it does. Temperature does similar work, since a warm
lead against cool support reads as depth, while everything warm at once reads as a wash.
Most of the separation in a finished palette comes from [lightness](/lightness) and
[chroma](/chroma) anyway, and from anchoring the whole thing on a
[neutral palette](/neutral-palette) that gives the eye somewhere to rest.

In product interfaces the rules earn their keep on marketing pages, illustration and
charts, and much less inside the shell, because hues in a UI already have jobs.
[Status colours](/status-color) mean success, warning and danger, and a harmony rule that
seats warning next to error has made two meanings look alike. The usual shape of a
product palette is one [brand](/brand-color) hue, a neutral ramp derived beside it, and a
handful of status hues chosen for distinguishability rather than for geometry, with the
wheel rules kept for the places where colour is decoration.