Tetradic Color Palette Generator
Four colours 90° apart: two complementary pairs, from any base colour.
Nothing saved yet. Saved palettes stay in this browser, on this device.
Tetradic palettes from three colours
Indigo #6366f1
#6366f1 · #f264ad · #f2ef64 · #64f2a8
Rose #e11d48
#e11d48 · #aae21d · #1de2b7 · #551de2
Emerald #059669
#059669 · #1f0594 · #940532 · #7a9405
Other colour harmonies
A square on the wheel
A tetradic scheme uses four hues spaced 90° apart, the corners of a square inscribed in the colour wheel. This generator turns your base by 90°, 180° and 270°. Hues 0° and 180° are one complementary pair, and 90° and 270° are the other.
You will also see “tetradic” used for a rectangle, two complementary pairs that are not evenly spaced. This tool draws the square, where every hue is the same distance from its two neighbours.
When to use it
Four hues give the most variety of any harmony here: enough for a dashboard with four categories, a game’s four teams, or a playful illustration. It is also the hardest to balance. Four colours at equal strength rarely settle, so choose one to lead and push the others back with lower saturation.
The square is symmetric, so a warm and a cool pair always appear together. Watch which pair you give the most area: it decides whether the result feels warm or cool. Extra swatches add hues 15° and 30° either side of each corner.
Everything here runs in your browser. The colour palette generator has all six harmonies on one page, and the mode buttons above switch this one too, so you can compare a tetradic palette with the others from the same base colour.
What is a tetradic colour scheme?
Four colours from two complementary pairs. In the square form this tool makes, the four hues sit 90° apart round the colour wheel.
Is tetradic the same as a square colour scheme?
The square is the evenly spaced kind of tetradic scheme. A rectangular tetrad also uses two complementary pairs, but with the pairs closer together on one side.
How do I keep a tetradic palette from looking chaotic?
Give one colour most of the space, use a second for supporting elements, and keep the other two for small accents. Lowering the saturation of the supporting colours helps.