Tetradic Colour Palette Generator
Pick a base colour and get four hues arranged as two complementary pairs. The richest standard scheme, and the one that needs the most discipline.
Free preview · No signup · ~10 seconds
Four hues, two complementary pairs
Two complementary pairs at once
A tetrad is two complementary pairs sitting on a rectangle across the wheel. That gives you four distinct hues with two built-in high-contrast relationships, which is more raw material than any other standard scheme.
Four colours is past most designs needs
Very few interfaces need four hues. Used at equal weight the result is incoherent, and the usual advice is blunt: pick one dominant colour and treat the other three as accents used sparingly.
Balance warm against cool
A tetrad usually contains both warm and cool hues. Letting one temperature dominate and using the other as accent keeps the set from feeling arbitrary — this is where most four-colour schemes are won or lost.
How it is built
The base hue is rotated to form a rectangle on the wheel, producing two pairs each 180 degrees apart. Saturation and lightness are adjusted so the four remain usable rather than four maximally saturated hues.
Where four colours genuinely helps
Category systems, complex dashboards, and illustration have real need for four distinct hues. Marketing pages and simple interfaces rarely do, and a triad or an analogous set with one accent is usually a better fit.
How to tetradic colour palette generator
Pick your base colour
Set the picker to your starting colour. Nothing to upload.
Read the tetrad
Four hues appear as two complementary pairs, with hex codes.
Copy what you need
Click a swatch to copy one hex, or copy all four.
Tetradic Colour Palette Generator — in the editor
The real editor, start to finish — no signup needed to try it yourself.
Free preview · No signup · ~10 seconds
Where a four-colour scheme fits
Category systems
Give four product lines or sections distinct but related colours.
Dashboards
Separate four data series with hues that stay distinguishable.
Illustration
Set a rich limited palette with built-in contrast pairs.
Packaging ranges
Differentiate variants of one product while keeping them a family.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Make a Duotone Image in Figma (Building One From Blend Modes)
Figma has no duotone effect. You assemble one from a desaturated image and two blended rectangles — here is the layer stack, the order that matters, and an honest account of what it costs to maintain.
How to Make a Logo White in Photoshop (3 Methods, One of Them Non-Destructive)
Color Overlay, Lock Transparent Pixels, and why Hue/Saturation is the wrong tool even though Lightness looks like it works — plus the fringe that makes a white logo look dirty on a dark background, and how to remove it.
How to Replace a Color in Canva (What's Possible on Elements, and What Isn't on Uploads)
Canva can swap colors on vector elements one swatch at a time. On an uploaded photo or PNG there is no per-color control at all — here is the full picture, including the Duotone approximation and its limits.
Generate a tetradic palette
Pick a base colour and copy all four hex codes.