Tetradic Colors Guide
Everything you need to know about tetradic color harmony — the four-color scheme that offers rich variety but demands careful balancing.
What Are Tetradic Colors?
Tetradic colors are four colors arranged as two complementary pairs on the color wheel. The most common arrangement is a rectangle: base at 0°, complement at 180°, plus two more at 90° and 270°. This produces two complementary pairs that reinforce each other.
A special case is the "square" tetradic, where all four colors are exactly 90° apart.
Two Types of Tetradic
Rectangular
Base at 0°, plus 90°, 180° and 270°. The two pairs are perpendicular to each other. This is the default "tetradic" arrangement.
Square
Four hues, all exactly 90° apart, forming a perfect square on the color wheel. More regular than rectangular, but less varied — because all four colors are equidistant, the palette can feel less dynamic.
OmniColor's Tetradic Colors Generator uses the rectangular form by default.
How to Find Tetradic Colors
Base hue = 215° (blue)
Tetradic colors (rectangular):
Base → 215°
+90° → 305° (magenta)
+180° → 35° (orange)
+270° → 125° (green)Why Tetradic Palettes Are Challenging
Tetradic offers the richest variety of any harmony type — four distinct hues that are all mathematically balanced. But this richness is also its weakness.
Too many colors
Four distinct hues mean four different visual focal points. Without discipline, the design feels busy and undirected.
No natural hierarchy
Unlike a triad (where each color has equal visual weight) or a complementary pair (where two colors can be dominant and accent), tetradic requires you to create hierarchy manually.
Risk of visual noise
Four fully saturated colors next to each other is visually exhausting. Even tetradic palettes need to reduce saturation in at least some colors.
When to Use Tetradic Colors
Complex interfaces
Dashboards, multi-section landing pages, complex admin tools — anywhere that needs to distinguish several UI areas from each other.
Gaming interfaces
Character classes, factions, teams, levels — each gets its own color from the tetradic palette. The palette provides variety without randomness.
Illustrations
Multi-color illustrations benefit from tetradic because all four hues feel related but distinct.
Editorial spreads
Magazines and marketing materials that need multiple color-coordinated sections.
Event branding
Conferences with multiple tracks, festivals with multiple stages, brand systems with sub-brands.
How to Balance a Tetradic Palette
Pick one dominant
Choose one of the four colors as the dominant color — the "base" of the design. Use it for 50-60% of the design's visual weight.
Pick one secondary
Choose a second color for supporting elements — secondary UI, cards, sections. About 25% of visual weight.
Pick one accent
A third color for CTAs, links, highlights. About 10% of visual weight.
One color is optional
Often, the fourth color is used only in small details or decorative elements — 5% or less. This keeps the palette rich but not overwhelming.
Add neutrals generously
Tetradic palettes need more neutral space than other harmonies. Whites, grays and blacks give the eye a resting place between the four colors.
Real Tetradic Examples
Blue, magenta, orange, green
Hues: 215°, 305°, 35°, 125°
Blue: #155EEF, Magenta: #EE1560, Orange: #EE8D15, Green: #6EEE15
Rich and varied. Used in gaming, creative agencies, and complex dashboards.
Teal, purple, yellow, red
Hues: 180°, 270°, 60°, 0°
Teal: #14B8A6, Purple: #8B5CF6, Yellow: #EAB308, Red: #EF4444
Vibrant and balanced. Common in event branding and consumer apps.
Tetradic vs Triadic
Both offer vibrancy, but with different demands:
- Triadic: Three colors, easier to balance, feels more focused
- Tetradic: Four colors, harder to balance, feels more complex
If you are not confident in balancing many colors, start with triadic and add a fourth only if needed.
Common Mistakes
Using all four colors at equal weight
The most common tetradic mistake. Four equal-weight colors is chaos. Establish clear 50-25-15-10 hierarchy.
Full saturation across the palette
Four fully saturated colors is visually exhausting. Reduce saturation of at least one or two colors.
No neutral space
Tetradic palettes without whites or grays feel crowded. Add generous neutral space.
Assuming tetradic is always better than triadic
More colors is not inherently better. Triadic palettes often feel more cohesive and refined than tetradic.
Not testing accessibility
With four colors, the number of possible text/background combinations is large. Test each actual combination you plan to use.