BYTETOOLS

Tetradic Color Scheme Generator

Generate four-colour rectangle or square harmonies from one base colour, balance them so one dominates, and preview the result on a mock UI card.

Base colour
35
How much saturation the supporting colours give up
12
Pushes the support colours apart in lightness

Tetradic scheme

Dominant
Dominant · hue +0°
#3b82f6
rgb(59, 130, 246)
hsl(217.2, 91.2%, 59.8%)
Secondary
Secondary · hue +60°
#c289e5
rgb(194, 137, 229)
hsl(277.2, 64.1%, 71.8%)
Accent
Accent · hue +180°
#c88d2c
rgb(200, 141, 44)
hsl(37.2, 64.1%, 47.8%)
Highlight
Highlight · hue +240°
#97ec63
rgb(151, 236, 99)
hsl(97.2, 78.4%, 65.8%)

Four hues at 217°, 277°, 37° and 97°. A tetrad gives you two complementary pairs at once, which is a lot of colour — the dominance slider desaturates the supporting three so the scheme reads as one lead colour plus accents instead of four competing shouts.

On a real interface

Highlight

Product card

The dominant colour owns the header, the secondary sets the page behind it, and the accents are rationed to a badge and one button.

Buy nowDetails

What is the Tetradic Color Scheme Generator?

A tetradic scheme is two complementary pairs used together, giving you four hues and a lot of range.

  • Rectangle (0/60/180/240°) and square (0/90/180/270°) arrangements
  • Dominance control that desaturates the supporting colours only
  • Lightness spread so the four colours take on distinct roles
  • HEX, RGB and HSL for every member with copy buttons
  • Mock product card preview with automatic readable text colour
  • CSS custom properties output, all computed in-browser

How to use the Tetradic Color Scheme Generator

  1. 1

    Enter your base colour with the picker or as a hex value.

  2. 2

    Choose the rectangle or square arrangement.

  3. 3

    Raise the dominance slider until the three supporting colours step back behind your base.

  4. 4

    Adjust the lightness spread, then check the mock card preview and copy the values you need.

About the Tetradic Color Scheme Generator

A tetradic scheme is two complementary pairs used together, giving you four hues and a lot of range. It comes in two shapes: the rectangle, which offsets the base by 60°, 180° and 240° and keeps one pair closer together, and the square, which spaces all four evenly at 90° intervals for maximum separation.

Four saturated colours at equal weight is the classic way to make a design look chaotic, so this generator balances the set for you. The dominance control pulls saturation out of the three supporting colours while leaving your base untouched, and a lightness spread pushes them apart so they read as distinct roles rather than four equals.

Because a palette in the abstract tells you very little, the scheme is rendered on a mock product card — header, badge, body and two buttons — so you can judge whether the dominant and accent split actually works before committing. Everything runs locally in your browser with no uploads.

Frequently asked questions

What is a tetradic color scheme?

Four colours forming two complementary pairs on the wheel. The rectangle version places them at 0°, 60°, 180° and 240° from the base; the square version spaces them evenly at 90° apart. Both give you far more range than a three-colour scheme.

What is the difference between rectangle and square tetradic?

The rectangle keeps two colours relatively close, so the scheme has a natural warm side and cool side and is easier to balance. The square spaces all four equally, which maximises contrast but makes it harder to establish a clear hierarchy.

How do I stop a four-color palette looking messy?

Let one colour dominate and treat the other three as accents. Give the dominant colour most of the area, desaturate the supporting colours, and use the fourth only for a single high-priority element. That is exactly what the dominance slider automates here.

Is a tetradic scheme too much for a website?

Not if it is weighted properly. Plenty of well-known brands run four hues, but almost never at equal intensity or equal area. Problems come from using all four at full saturation across large surfaces, not from the number of colours itself.

Why does the text color on the swatches change automatically?

Each label picks black or white depending on which gives a higher WCAG contrast ratio against that swatch. It keeps every preview legible no matter how light or dark the generated colour turns out to be.

Related tools