Triadic colors
A triadic color scheme uses three colors evenly spaced around the color wheel, 120 degrees apart, forming a triangle. Below: how triadic schemes work, examples for eight hues with hex codes, and how to use them.
What are triadic colors?
A triadic color scheme uses three colors evenly spaced around the color wheel, 120 degrees apart, forming a triangle. The primaries red, yellow and blue are a triad, and so are the secondaries orange, green and purple.
A triad has more variety than an analogous scheme but is gentler than a complementary pair, because no two colors are direct opposites. The trade-off is balance: three strong, equal colors compete, so one should lead.
Which color wheel?
On the RYB wheel the classic triads are red-yellow-blue and orange-green-purple. On RGB the primaries red, green and blue form a triad. The examples below rotate OKLCH hue by 120 degrees.
Triadic colors examples
| Base | Hex codes | Palette |
|---|---|---|
| Red | #FF0000, #00A447, #597BFF | Open in generator |
| Orange | #FFA500, #00D7D0, #D8A0FF | Open in generator |
| Yellow | #FFFF00, #E8F7FF, #FFF0F6 | Open in generator |
| Green | #008000, #2C61CD, #B92C36 | Open in generator |
| Teal | #008080, #845E95, #8F672A | Open in generator |
| Blue | #0000FF, #A3001B, #006912 | Open in generator |
| Purple | #800080, #614A00, #005862 | Open in generator |
| Pink | #FFC0CB, #C6DDA9, #B0D9FF | Open in generator |
How to use triadic colors
- Let one color dominate and use the other two as accents.
- Tone the triad down by lowering saturation or using tints and shades.
- Triadic palettes suit playful, energetic brands and illustrations.
- Use a neutral background so the three colors do not fight for attention.
In interface design, a triadic palette usually becomes a set of roles rather than equal colors: one color for primary actions, one for supporting surfaces or illustrations, and neutrals for text and backgrounds. Generate a full tint and shade scale for each hue so you have light backgrounds, borders and accessible text in the same family.
Every palette here opens in the palette generator, where you can lock colors, adjust them in OKLCH and check contrast before exporting to CSS, Tailwind or Figma.
Other color harmonies
- Complementary colorsComplementary colors sit directly opposite each other on the color wheel, 180 degrees apart.
- Analogous colorsAnalogous colors are three or more colors that sit next to each other on the color wheel, usually within about 30 degrees of each other: yellow, yellow-orange and orange, for example.
- Split-complementary colorsA split-complementary scheme uses a base color plus the two colors on either side of its complement, about 150 and 210 degrees away.
- Monochromatic colorsA monochromatic color scheme uses a single hue in several lightness and saturation levels: tints (with white), shades (with black) and tones (with gray).
Frequently asked questions
What are triadic colors?
Three colors evenly spaced around the color wheel, 120 degrees apart, such as red, yellow and blue.
Are the primary colors a triad?
Yes. Red, yellow and blue (RYB) and red, green and blue (RGB) are both triads on their own wheels.
How do you balance a triadic palette?
Use one color for most of the design, the second for support and the third for small accents, and soften them with tints, shades or neutrals.
Make a triadic palette
Start from any color in the generator, choose a harmony and adjust it in OKLCH.