Tetradic Palette Generator

Generate tetradic color palettes with four colors arranged as two complementary pairs. Rich and varied — perfect for complex designs, dashboards and illustrations that need multiple coordinated hues.

Colors

CSS Variables


          

        

        
      

      

        
What Is a Tetradic Palette?

        
A tetradic palette uses four colors arranged as two complementary pairs. The most common arrangement is a rectangle: base at 0°, its complement at 180°, plus two more at 90° and 270°. Because the palette contains two contrasting pairs, it offers rich variety while remaining mathematically balanced.

        
How It Works

        
Base: #155EEF (hue 215°)
Tetradic hues:
  Base     →  215°  (blue)
  +90°     →  305°  (magenta)
  +180°    →   35°  (orange)
  +270°    →  125°  (green)

        
OmniColor adds a fifth supporting color by varying the lightness of the base hue, giving you a practical five-color palette ready for design use.

        
When to Use Tetradic Palettes

        
    
          
  • Complex dashboards: Four distinguishable series colors for data.
    • 
          
  • Illustrations: Multi-color art needs structured variety.
    • 
          
  • Gaming interfaces: Factions, classes and teams each need a distinct color identity.
    • 
          
  • Editorial spreads: Multi-page layouts that need coordinated but varied hues.
    • 
          
  • Events with multiple themes: Each track, session or venue gets its own tetradic color.
    • 
        

        
Best Practices

        
Tetradic palettes need clear hierarchy or they can feel chaotic. Assign roles: 60% dominant color for backgrounds, 25% secondary for major UI, 10% accent for CTAs, 5% pop color for tiny details. Without this discipline, four vivid colors compete for attention. Always use a neutral (white, gray or off-white) as the canvas that holds the palette together.

        
Frequently Asked Questions