Tetradic Color Schemes: Square and Rectangle Palettes

A tetradic color scheme uses four hues arranged around the color wheel as two complementary pairs. It's the richest of the classic harmony rules: four distinct hues give you warm and cool colors, plenty of variety and room for many roles. It's also the hardest to balance, because four strong colors all want attention.

Understanding Color Harmony: 7 Ways to Combine Colors covers the square and the rectangle as two short sections. This guide compares them in more depth, explains why a four-color scheme needs a clear leader, and shows practical ways to tame one, with palettes for charts, illustration and children's brands.

Square vs rectangle

Both shapes are made of two pairs of opposite hues. The difference is how far apart the pairs are.

Square

In a square, the four hues are spaced evenly, 90 degrees apart: the base, plus 90, plus 180 and plus 270. Every hue is as far as possible from its neighbors, so the colors are maximally distinct. That evenness is also why a square is hard to balance: no two hues are related enough to support each other.

In the ColorOverflow generator and Color Wheel Explorer, the Tetradic rule is this square. It returns the base in two steps (the color and a lighter tint) and the other three hues as one color each.

Rectangle (double complementary)

In a rectangle, the two pairs sit closer together. A common version spaces them 60 degrees apart: the base, plus 60, plus 180 and plus 240. Each side of the rectangle then holds two hues that are fairly close, almost analogous, so the scheme reads as two related families in contrast. That usually makes it a little easier to balance than a square.

Names vary between tools and books. Some call any four-hue scheme tetradic, some reserve tetradic for the rectangle and call the evenly spaced version square. When you read a tutorial, check the angles rather than the name.

Why four hues need a clear leader

With two colors, one naturally dominates. With four of equal strength, the eye has nowhere to settle, and the design reads as noise. A clear leader solves this: one hue sets the identity, and the other three become supporting roles.

• The leader takes most of the colored area and the most important elements, such as the header or the main button.
• A second hue, often the leader's complement, becomes the main accent.
• The last two hues appear rarely, in illustrations, tags or charts.
• Neutrals fill the background, body text and everything else.

Temperature can guide the choice. In both shapes, two hues are usually warm and two cool. Letting a cool hue lead and keeping the warm ones as accents tends to feel calmer; a warm leader feels more energetic.

Practical ways to tame a four-color scheme

One dominant, three muted

Keep the leader saturated and lower the saturation of the other three. The hue relationships stay, so the scheme still feels varied, but the supporting colors step back.

• White text on the deep blue #1d48a5: 8.32:1, passes AAA.
• Near-black #111827 text on the muted gold #d3b269: 8.73:1.
• Near-black on the orchid #bb81b1: 5.81:1, and on the sage #5c9967: 5.24:1.
• Near-black on the neutral #f2f4f8: 16.11:1.

Vary lightness

Four hues at the same lightness blur into a flat, busy surface. Make one deep, one light and two in between. The palette becomes easier to read, works better in grayscale and gives you natural roles for text, buttons and backgrounds.

Let neutrals take most of the space

A four-hue scheme rarely needs to cover a whole page. White, gray or a tinted off-white for backgrounds, and a near-black for text, give the colors something to stand out against. The more hues you use, the more neutral space you need.

Keep opposites apart

Each tetradic scheme holds two complementary pairs, and opposites at similar lightness vibrate where they touch. In the square above, blue on magenta measures only 1.38:1 and magenta on green 2.32:1. Separate them with space or a neutral, and never put text in one on the other.

Where four-color schemes make sense

Charts

A square gives four hues that are as far apart as four hues can be, which helps when a chart has four series. For bars and lines on white, each color needs at least 3:1 against the background. These darkened square hues reach it.

• Blue #2258c3 against white: 6.45:1.
• Magenta #b82ea1: 5.32:1.
• Amber #c2850a: 3.15:1, enough for bars and lines but not for small text.
• Green #218331: 4.82:1.

Don't rely on hue alone, though. Label each series directly or add markers and patterns, because some readers won't be able to tell every pair apart.

Illustration

Illustrators like four-hue schemes for scenes with many objects: sky, foliage, clothing and props can each take a hue without inventing new colors. A rectangle often works better here than a square, because its two related pairs let you shade within a family, such as blue into violet, while still having a warm contrast on the other side.

Kids' brands

Toys, learning apps and children's events often want every color at once, and a square delivers that with some order. Pick one hue as the brand color and use the others for categories, characters or age groups. All four of these take near-black text comfortably: 6.37:1 on the blue, 4.89:1 on the orchid, 6.24:1 on the orange and 7.38:1 on the green. White text on them is too weak for body copy.

When not to use a tetradic scheme

• For a calm, premium or minimal look. Monochromatic or analogous palettes do this better.
• For a single call to action. Complementary or split complementary give one strong accent with less to manage. Our guide to complementary colors covers this.
• When three hues are enough. A triad is simpler to balance, as our guide to triadic colors explains.

Drag the base around the Color Wheel Explorer with Tetradic selected to see the square rotate, and compare it with the triadic and complementary rules.

Quick checklist

1. Choose square for maximum variety or rectangle for two related families.
2. Pick one leader and give it most of the colored area.
3. Mute the other three, and give each a different lightness.
4. Use neutrals for most backgrounds and all body text.
5. Keep complementary pairs from touching at similar lightness.
6. Check contrast for text, and 3:1 for chart marks and icons.

Four colors behave very differently on a real layout than in a row of swatches. Preview yours on a dashboard, a website or a graphic before you commit.