Tetradic Colors
Tetradic schemes use four hues made of two complementary pairs. The square version spaces them evenly at 90°; the rectangle version uses two pairs closer together. It is the richest harmony and the hardest to balance.
Drag the large handle. The angle between handles is the rule: 90°.
Tetradic Colors generator
| Color | HEX | RGB | HSL |
|---|---|---|---|
| #2F6FDE | rgb(47, 111, 222) | hsl(218 73% 53%) | |
| #DE2FC7 | rgb(222, 47, 199) | hsl(308 73% 53%) | |
| #DE9E2F | rgb(222, 158, 47) | hsl(38 73% 53%) | |
| #2FDE46 | rgb(47, 222, 70) | hsl(128 73% 53%) |
How to find tetradic colors
Add 90°, 180° and 270° to the base hue for a square. For a rectangle, pick a second hue 30–60° from the base and take both complements.
When to use it
- Complex illustrations and editorial graphics.
- Charts with four series that must stay distinguishable.
- Seasonal campaigns where each hue marks a theme.
Watch out for
Four equal-weight saturated colors look like a toy box. Choose one dominant hue and mute the others, or use two of the four only as tints. Hue relationships say nothing about readability, so run your text colors through the WCAG contrast checker.
Example palette
Frequently asked questions
What are tetradic colors?
Four colors that form two complementary pairs on the color wheel, arranged as a square (90° apart) or a rectangle.
What is the difference between tetradic and square?
Square is the evenly spaced version of tetradic. Many tools use the words interchangeably.
How do you balance a tetradic palette?
Let one hue dominate, keep a second for support and use the last two sparingly. Vary lightness so the four do not compete.