Build four-hue palettes from two complementary pairs at 90° spacing — the richest of the classic harmonies and the hardest to balance. The generator keeps all four hues at coherent lightness and suggests treating one as dominant, one as support and two as accents.
Settings
Generated locally in your browser — your settings and results never leave this page.
The maximalist harmony
Four hues, two complementary pairs, ninety degrees apart: the tetradic scheme is the most color a classical harmony can carry, and the hardest to keep civilized. Every member has both an opposite and two right-angle neighbors present — maximum relational complexity. When it works (fashion, festivals, editorial spreads, four-category dashboards) nothing else looks as rich; when it fails it fails as noise. The generator produces the geometry; the accompanying discipline produces the success.
The one-dominant rule, doubled
Complementary schemes need a dominant hue; tetradic schemes need a dominant pair. Choose one of the two complementary pairs as the design’s axis (dominant hue plus its accent-opposite, deployed 60/10), and demote the entire second pair to supporting registers — tints for backgrounds, tones for secondary UI, appearing at strength only in illustration. Four hues at four strengths is chaos; two-plus-two in hierarchy is wealth.
Square versus rectangle
This generator produces the square form — even 90° spacing. The literature’s “rectangle” tetrad compresses toward two analogous pairs (spacings like 60/120), which is measurably easier to balance since neighbors reinforce rather than compete. If the square proves unruly for your base, the Harmony Generator’s tetradic mode plus a small base rotation approximates rectangular behavior — or concede gracefully to split-complementary, which keeps most of the range at half the policing.
Naming for future sanity
Tetradic systems are where color naming debt compounds fastest. Export with role names (primary, accent, support-a, support-b) rather than hue names, because the likeliest future for any four-hue system is becoming a three-hue system — and --support-b: #... retires gracefully where --purple demands a codebase-wide rename. The DTCG token export enforces exactly this discipline.
Deployment math for four hues
The one-dominant-pair discipline, expressed as an area plan for a four-hue system:
| Palette member | Strength | Area share | Typical duty |
|---|---|---|---|
| Dominant hue | full + tints | ~55% | surfaces, structure, brand |
| Its complement | full, rare | ~10% | CTAs, alerts, focus |
| Support hue A | tints/tones only | ~20% | section tints, illustration |
| Support hue B | tints/tones only | ~15% | secondary UI, charts |
The table is the difference between tetradic wealth and tetradic noise: two hues never appear at full strength at all. Print it beside the generated palette and every “where do I use the fourth color?” question in the design review has a one-line answer — quietly, or not yet.
How to use the Tetradic Palette Generator
- Pick the base; three more hues complete the 90° rectangle.
- Optional tints tame the set.
- Export all four families.
Frequently asked questions
What is a tetradic scheme structurally?
Two complementary pairs at right angles – four hues, maximum variety among the classic harmonies. Every color has both a neighbor-ish partner and a direct opposite present, which is why tetradic is simultaneously the richest and the easiest to ruin.
How do professionals keep four hues under control?
Hierarchy and suppression: one hue dominates clearly, its complement handles emphasis, and the second pair works almost entirely in tints and tones as atmosphere. If all four appear at full strength and equal area, the design carnival begins.
When is tetradic actually the right choice?
When the content has four genuine categories needing equal visual citizenship – dashboard modules, product lines, seasonal collections – or when art direction wants deliberate abundance (festivals, food, kids). For most brand systems, three hues do the work with less policing.
Does the rectangle orientation matter?
Rotating your base rotates all four together, changing which temperature dominates. A 15° nudge can move the set from "two warms, two cools" to "three warms, one cool" – worth exploring before committing; the palette follows your base live.
How does tetradic differ from "square" schemes?
This tool's 90° spacing is the square form – four evenly spaced hues. The rectangle variant compresses spacing (60/120°), yielding two closer pairs; it is slightly easier to balance. Both are called tetradic in the literature, which enjoys the ambiguity.
Four hues and color blindness – hopeless?
Not hopeless, but the odds of a confusable pair rise with each hue. Simulate early; expect to adjust lightness so the four separate by brightness as well as hue – the fix that survives every vision type.
What is a sane export strategy for a tetradic system?
Name by role, not by color – primary/secondary/accent-a/accent-b – in the CSS variables, so when sanity later removes a hue the refactor is a value change, not a rename across the codebase.
