Palette relationships

When a designer hands an agent a single starting hue and asks for "the rest of the palette," the choice is which relationship model to apply. Each model is a hue-angle pattern with a different emotional and functional register. Knowing the patterns is most of the job.

When to use

• A designer or agent has a starting hue and needs additional hues to fill a palette.
• Proposing a palette for a brief that uses words like "balanced," "vibrant," "calm," "tense," "restrained," "dynamic."
• Reviewing a palette proposal — name the implicit relationship and check whether the brief asked for it.

When NOT to use

• The palette is already specified (all hues given). Use chroma-harmonization to balance them, not this skill.
• The brief is for a single-hue system (just stops of one palette). No relationship to pick.

The relationships

Hue angle math is on the OKLCH 0–360° wheel, anchored at the seed hue H₀.

For matching briefs to relationships:

• "calm, monochrome editorial" → monochromatic
• "restrained, family-feel" → analogous
• "tension, success vs danger" → complementary
• "vibrant, distinct roles" → triadic
• "dynamic and balanced" → tetradic-rectangle (the square is harder to balance at usable chromas)
• "warm with one cool accent" → compound

Role assignment after picking the relationship

The number of hues dictates the role count, but not the assignment. A triadic palette has three hues; which becomes primary, secondary, tertiary is a design decision driven by intent.

Default heuristic (60/30/10 + accent):

• 60% — primary = the seed hue (H₀). The dominant brand voice.
• 30% — secondary = the relationship hue closest to the seed in temperature.
• 10% — tertiary / accent = the relationship hue furthest from the seed.

For complementary pairs, the seed is primary; the complement is danger or info depending on hue (warm → danger, cool → info).

Pitfalls

• Square tetrads at usable chromas often read garish — chartreuse (90°) and magenta (270°) next to the seed and its complement tend to fight. Prefer rectangle tetrads (60° / 120° offsets) when the brief is "balanced."
• Analogous past 60° total spread starts to read as triadic — keep analogous ranges tight.
• Complementary pairs work for two hues only — padding to four forces a near-duplicate and breaks the relationship.

Verification

After picking hues:

1. Spread check: every hue is within the relationship's declared offset from the seed.
2. Distinguishability check: at the palette's typical contrast stop (e.g. 500), neighboring hues are visually distinguishable (rule of thumb: ≥ 20° apart at the same L and C).
3. Brief match: the relationship matches the brief's adjective (calm / vibrant / tense / dynamic). If not, pick a different relationship.

Cross-references

• Routed here by: designing-a-design-system — the L1 dispatcher for building or extending a system.
• REQUIRED BACKGROUND: oklch-color-space — hues are OKLCH angles; the relationship math operates on those.
• For palette balance after picking hues: chroma-harmonization — cap chroma at the cross-hue minimum.
• For contrast targets across stops: apca-contrast.

Sources

• Adobe Color wheel — the canonical interactive picker for relationships.
• Coolors palette generator — applies the same relationship taxonomy.
• Itten's color wheel theory (foundational; predates digital tools but supplies the taxonomy).