Tetradic Colors

What are tetradic colors?

Tetradic colors are a set of four colors that form a rectangle (or square) on the color wheel. Each color is separated by 90 degrees of hue rotation, creating two pairs of complementary colors. For example, if your base color is a sky blue at 199 degrees, the tetradic set includes hues at 289 degrees (purple), 19 degrees (orange-red) and 109 degrees (green). This rich four-color palette offers more variety than triadic or complementary schemes while still maintaining visual harmony.

The tetradic scheme is sometimes called the rectangle scheme because the four hues form the corners of a rectangle on the color wheel. When the four colors are evenly spaced at 90-degree intervals, the scheme becomes a square scheme — a special case of tetradic harmony that offers the most balanced contrast possible with four colors.

The rectangle color scheme

In a rectangle scheme, the four colors consist of two complementary pairs. This double-complementary structure gives designers more flexibility: you can use one pair for dominant elements and the other for accents, or blend all four for a rich, layered composition. The key challenge is balancing the four colors so that none overpowers the others. A common approach is to choose one dominant color, one sub-dominant, and two accents.

The square scheme — where all four colors are 90 degrees apart — is the most regular form of tetradic harmony. It offers equal visual weight to all four colors, making it ideal for designs that need four equally important hues, such as dashboards with four distinct status categories or infographics with four data series.

When to use tetradic colors

Tetradic palettes shine when you need four distinct, harmonious colors. Common scenarios include:

• Rich illustrations. Four well-spaced hues give artwork depth and variety without clashing.
• Dashboard design. Assign one tetradic color to each major section or status type for clear visual grouping.
• Brand systems. A tetradic base provides enough colors for primary, secondary, tertiary and accent roles.
• Seasonal themes. Four colors can represent spring, summer, autumn and winter in a cohesive set.

Because tetradic schemes use four colors, they can feel busy if all are used at full saturation. Dial back saturation or lightness on the accent colors to let the dominant hue stand out.

How to find tetradic colors

This tool calculates tetradic colors instantly in your browser.

1. Pick a base color. Use the color picker to choose any starting hue.
2. See the results. The right panel shows your base color plus three tetradic partners at 90, 180 and 270 degrees.
3. Copy a HEX. Click the Copy button next to any swatch to copy its HEX code.

The conversion works by translating the picked RGB color into HSL, rotating the hue by 90, 180 and 270 degrees, and converting back to RGB. All math is local and private.

Tetradic vs triadic colors

The main difference between tetradic and triadic schemes is the number of colors: tetradic uses four while triadic uses three. Tetradic offers more variety and flexibility but requires more careful balancing. Triadic is simpler and more energetic, while tetradic is richer and more layered. Choose triadic when you want bold, playful contrast with minimal complexity. Choose tetradic when you need four distinct, harmonious colors for a more sophisticated palette.