Tetradic Color Scheme
Generate a four-colour rectangle palette from one hex.
How to use
- 1 Enter a base hex colour or pick one with the colour input.
- 2 Adjust the pair angle (60° for a rectangle, 90° for a square).
- 3 Review the four generated swatches and their hue angles.
- 4 Copy the full palette of hex codes for your design.
About Tetradic Color Scheme
The Tetradic Color Scheme tool turns a single base colour into a rich four-hue palette built from two complementary pairs.
Also called a rectangle scheme, a tetradic palette spaces colours around the wheel so you get warm and cool tones together, giving designs depth and contrast without feeling chaotic.
Enter a hex value or use the colour picker and the four swatches update instantly.
Here is how it works: the tool keeps your base hue, finds a second hue a chosen angle away, and then derives the complement of each by rotating a further 180°.
The result is base, base plus angle, base plus 180°, and base plus angle plus 180°.
The pair angle is adjustable — 60° produces a classic rectangle, while 90° gives you a square scheme with four evenly spaced hues.
Saturation and lightness are carried across every swatch so the colours read as a deliberate family rather than four random picks.
Tetradic schemes are powerful but demanding, so a common tip is to let one colour dominate and use the other three as accents, and to watch the balance between warm and cool.
Every hex code is shown ready to copy into CSS, design tools or brand guidelines.
Everything runs locally in your browser, so your colours are never uploaded and the tool works offline once loaded.
FAQ
What is a tetradic colour scheme?
It is a four-colour palette made of two complementary pairs. The hues sit as a rectangle on the colour wheel, balancing warm and cool tones for high-contrast designs.
What is the difference between a rectangle and a square scheme?
Both are tetradic. A square scheme spaces all four hues 90° apart; a rectangle uses a narrower angle for each pair. Set the pair angle to 90° to get a square scheme.
How do I use four colours without clashing?
Let one colour dominate and use the others as accents, and keep saturation and lightness consistent — which this tool does automatically.