Tetradic Colors
Four hues arranged as two complementary pairs, forming a rectangle on the color wheel. The richest harmony in classical color theory — and the one that demands the most discipline.
A classic tetrad
Two complementary pairs (red/green and blue/orange) sit at the corners of a rectangle on the color wheel.
Rectangle rule
To build a tetrad, start with a complementary pair. Then add a second complementary pair that is offset by some angle — commonly 60°, though any angle between 30° and 90° works.
pair1 = [h, (h + 180) % 360]
pair2 = [(h + 60) % 360, (h + 240) % 360]The four hues form a rectangle on the color wheel. If the offset is exactly 90° (i.e., the spacing becomes 90° between all four), the tetrad becomes a square — a stricter variant that is even more balanced but less flexible.
Rectangle vs square
| Harmony | Spacing | Character |
|---|---|---|
| Rectangle (tetradic) | Two pairs offset by ~60° | Rich, varied, more flexible |
| Square | Four hues at 90° each | Symmetric, energetic, harder to balance |
Why tetrads are demanding
Four hues mean four visual weights competing for attention. Where monochromatic and analogous palettes are forgiving, tetrads are not — equal weighting produces noise rather than harmony. Most successful tetrads follow the same rule as successful triads: assign dominance.
How to use a tetrad well
-
Pick a dominant pairChoose one complementary pair to be the primary palette — the two colors that will carry most of the design.
-
Reduce the second pair to accentsThe second pair is not equal. Use it for small highlights, icons or one specific component.
-
Add a strong neutralTetrads almost always need a distinct neutral gray scale — otherwise four hues fight for space.
-
Reduce saturation in the accent pairMuting the second pair keeps it from competing with the dominant palette.
-
Use tint and shade tiersEach of the four hues usually needs several steps — 3 to 5 shades — to make a real palette usable in a UI.
Practical examples
- Editorial systems — magazine and publishing layouts often use tetrads for section differentiation.
- Event and multi-track branding — when four categories need to feel equally weighted.
- Dashboard color coding — one hue per data category in visualization tooling.
- Packaging families — when a product line needs four visually distinct variants.
Frequently asked questions
What are tetradic colors?
Four hues arranged as two complementary pairs on the color wheel, forming a rectangle. Because they use four hue families, tetrads are the richest classical harmony but also the hardest to keep from feeling chaotic.
What is the difference between tetradic and square?
Tetradic refers to a rectangle — two complementary pairs offset by roughly 60°. Square is a special case where the four hues sit exactly 90° apart, making them evenly spaced. The rectangle is more flexible, the square is more balanced.
Why are tetradic palettes hard to use?
Because you are placing four different hue families together. Each one competes for attention, and equal weighting makes the design feel noisy. Tetrads need a clear hierarchy — one dominant pair, one accent pair, and a solid neutral system.
How do I build a tetradic color scheme?
Pick a base hue. Add its complement (180°). Then choose a second complementary pair offset from the first, commonly by 60°. The result is a rectangle on the color wheel — four hues, two complementary pairs.