Triadic colour palette
A triadic colour scheme uses three hues spaced evenly around the colour wheel, 120° apart. It is one of the classic colour-harmony rules — vibrant but balanced — and is a fast way to build a cohesive palette for a brand, UI, or illustration from a single starting colour.
How it works
The tool converts your base hex colour to HSL (hue, saturation, lightness). It keeps saturation and lightness fixed and rotates the hue by +120° and +240° around the 360° wheel, then converts those two new HSL colours back to hex. Holding saturation and lightness constant is what makes all three colours feel like a matched set at the same intensity. Click any swatch to copy its hex.
hue1 = base hue
hue2 = (base hue + 120) mod 360
hue3 = (base hue + 240) mod 360 (saturation and lightness unchanged)Example
Starting from a red base around hue 0° (#e53935), the triad rotates to roughly 120° (a green) and 240° (a blue), giving a red–green–blue trio at the same vividness.
| Swatch | Hue | Direction |
|---|---|---|
| Base | 0° | anchor |
| Triad 2 | 120° | +120° |
| Triad 3 | 240° | +240° |
Everything runs in your browser — nothing is uploaded.
When to use a triadic palette
Triadic palettes suit projects that need energy and variety without disharmony. They appear frequently in:
- Brand identity — a hero colour with two accent colours that pop on different backgrounds
- Data visualisation — three categories that are clearly distinct yet equally weighted
- Illustration and character design — a costume or scene where three hues balance each other without one overwhelming the rest
- UI design — a primary action colour, a secondary highlight, and a status or alert colour
The key discipline is dominance: let one colour hold most of the space (60–70%), assign a secondary role to the second (20–30%), and use the third sparingly as an accent (10% or less). A perfectly even 33/33/33 split usually looks chaotic.
Comparing triadic to other harmonies
| Harmony | Hue angles | Character |
|---|---|---|
| Triadic | 0°, 120°, 240° | Vibrant, well-balanced, high variety |
| Complementary | 0°, 180° | Maximum contrast, can feel stark |
| Analogous | 0°, 30°, 60° | Harmonious, low tension, calm |
| Split-complementary | 0°, 150°, 210° | High contrast with one dominant |
| Tetradic | 0°, 90°, 180°, 270° | Rich, complex, harder to balance |
Triadic sits in the sweet spot between the calm of analogous and the starkness of complementary. When a client says “bold but not clashing”, a triadic palette is often the answer.
Practical tips
- Start with a muted base — bright, fully saturated starting colours can produce overwhelming secondaries. Try lowering saturation to 60–70% for a palette that reads well on screens.
- Lighten one, darken another — once the tool gives you the three hues, adjust the lightness of the secondary and tertiary in your design tool to create visual hierarchy within the triad.
- Test on white and dark backgrounds — a balanced triad can flip in perceived weight depending on the background, so preview both.
- The generated hex is a starting point — the strict 120° rotation gives mathematically pure hues; nudge each by a few degrees in your final tool to account for how human perception weighs warm versus cool colours.