Tetradic Color Scheme

What this tool does

The Tetradic Color Scheme generator turns one base colour into a four-colour palette. It takes your colour and rotates its hue by 60°, 180° and 240° to produce three companions, so the four hues form a rectangle on the colour wheel — two complementary pairs working together. Each colour appears as a large swatch with its HEX, RGB and HSL values and copy buttons.

A tetradic scheme is the richest of the standard harmonies. Because it contains two complementary pairs, it offers abundant contrast and a full range of warm and cool colours. That richness is powerful but demands a careful hand: four strong hues need clear hierarchy to avoid looking cluttered. The +180° colour is the direct complement of your base, while the +60° and +240° colours form a second complementary pair, so the rectangle always carries two axes of maximum contrast — which is exactly why proportion matters so much when you put it to use.

Use cases

In web and UI design, a tetradic palette covers a primary colour, a secondary colour and two distinct accents — useful when an interface has several independent highlight roles. For branding, the scheme suits lively, expressive identities that want a broad colour vocabulary across packaging, illustration and marketing. Illustrators use tetradic colour for complex scenes that need both warm and cool light in play. In data visualisation, four evenly related hues make a solid categorical palette for charts with four unrelated series. Hobbyists designing event branding, game art or seasonal decorations get a versatile, contrast-rich set in one step. Because the scheme spans the whole wheel, it is also a handy reference when you simply want to see how four widely separated hues behave alongside a colour you already like.

How to use it

1. Pick a base colour with the colour picker, or enter a HEX value like #00C8E0 in the synced text field.
2. Read the four swatches: your base and the tetradic colours at +60°, +180° and +240°.
3. Each swatch shows HEX, RGB and HSL — click a value’s copy button to copy that notation.
4. Use Copy all colours to export the full rectangle scheme as a list.
5. Adjust the base colour at any time; all four colours recalculate live.

Tips

Hierarchy is everything with four colours. Choose one as the dominant tone, one as support, and reserve the remaining two for accents — never split space evenly. Watch the warm/cool balance: a tetradic rectangle usually has two warm and two cool colours, so let one temperature lead and the other accent. If the palette feels loud, desaturate two of the colours so the other two carry the energy. Build tints and shades of each colour for real interface states, and always confirm text-and-background pairs against WCAG contrast thresholds — a rich hue palette still needs proper luminance contrast to be readable.

Related techniques

Tetradic is the four-colour member of the hue-rotation family. A complementary pair is the two-colour case, analogous keeps hues close for calm palettes, triadic spaces three hues evenly, and a monochromatic ramp varies lightness within a single hue. A palette generator displays all of these harmonies from one base colour at once. Use a colour converter for precise CSS notations and a contrast checker to verify that every pairing you ship meets accessibility requirements.