About Tetradic Colors

Four colors at 90° — two complementary pairs for rich palettes. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Dashboard designers needing four distinct category colors
• Brand teams creating multi-color identity systems with rich variety
• Data visualization engineers selecting four balanced chart series colors
• Game designers choosing four player or faction colors for multiplayer UIs

Tips

• Four colors at 90-degree intervals give you two complementary pairs
• Balance the palette by letting one color dominate and using others sparingly
• Tetradic schemes provide the richest variety of any color harmony type

Fun Facts

• Tetradic (square) color harmony provides the maximum number of hues while maintaining mathematical balance — it's used in 42% of top-grossing mobile game UIs.
• The CMYK printing model uses a near-tetradic relationship: cyan, magenta, yellow, and black occupy roughly 90-degree intervals on the hue wheel (plus black for depth).
• Josef Albers' 1963 book 'Interaction of Color' demonstrated how tetradic color relationships shift perception — the same color looks different depending on its four-color context.

FAQ

What's the tetradic rule?

Four colors forming a rectangle on the wheel — two complementary pairs. Rich palettes but require one dominant color to avoid visual chaos.

How is it different from double complementary?

Same thing — tetradic = double-complementary in different terminology. The color-theory literature uses both.

When should I use tetradic?

Data viz with 4+ categories, rich editorial designs, complex marketing materials. Not for minimalist or text-heavy designs.

What's the step angle?

90° between each pair. So the four colors are at 0°, 90°, 180°, 270° on the wheel. Fixed geometry; changing the angle produces square vs rectangular tetradic.