Triadic Colour Palette Generator
Pick a base colour and get two more evenly spaced around the wheel. Vibrant and balanced, and harder to handle than it looks.
Free preview · No signup · ~10 seconds
Three hues, evenly spaced
Three hues, 120 degrees apart
A triad divides the wheel into equal thirds. Because no two colours are adjacent and none is a direct opposite, the set feels lively without the head-on tension of a complementary pair.
It is the hardest scheme to use well
Three strong hues at equal weight produce visual chaos. Triadic works when one colour dominates heavily and the other two appear in small doses. Most failed triadic designs fail by treating all three as equals.
Desaturate two of the three
A reliable approach is to keep the dominant colour saturated and pull the other two toward muted or pastel versions. You keep the hue relationship while removing the competition for attention.
Where the colours come from
The base hue is rotated by 120 and 240 degrees in HSL, with lightness and saturation adjusted to keep the set usable. The primary colours are the classic triad, which is why the scheme feels familiar from children books and packaging.
Check each pairing separately
Three colours means three possible pairings, and each has its own contrast ratio. A triad that works as swatches can still produce an unreadable combination when two of them meet as text and background.
How to triadic colour palette generator
Pick your base colour
Set the picker to your starting colour. Nothing to upload.
Read the triad
Two more hues appear at equal spacing around the wheel, with hex codes.
Copy what you need
Click a swatch to copy one hex, or copy all three.
Triadic 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 triadic schemes work
Playful brands
Build a lively identity for products aimed at a younger audience.
Category colour coding
Give three distinct sections colours that are clearly different but related.
Data series
Separate three data series with hues that read as equally weighted.
Illustration
Set a vibrant limited palette for character or scene work.
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 triadic palette
Pick a base colour and copy all three hex codes.