Triadic Colors Calculator
Find the three triadic colors evenly spaced (120° apart) around the color wheel from your hex color.
How to use this tool
- Enter your base hex color.
- The tool rotates the hue by 120° and 240° to find the other two triadic colors.
- Triadic schemes work best when one color dominates and the others accent.
Triadic colors are evenly spaced 120° apart on the HSL color wheel, creating vibrant, balanced palettes.
Formula
Given a base color with HSL hue H, the three triadic colors are evenly spaced 120° apart:
Color 1 = base hex (H)
Color 2 = HSL(H + 120°, S, L)
Color 3 = HSL(H + 240°, S, L)
Hues exceeding 360° wrap back to 0° automatically.
How it works
The calculator converts the input hex to HSL, then adds 120° and 240° to the hue while keeping saturation and lightness unchanged, and converts each result back to hex. The base color is returned as-is (normalized to a 6-digit lowercase hex); 3-digit shorthand inputs are expanded before processing.
Common mistake: designers sometimes confuse triadic harmony (exactly 120° gaps) with split-complementary harmony (base + two colors 150° either side of the complement). A triadic scheme uses three equally-spaced hues, while a split-complementary scheme uses only one offset from the complement — they produce noticeably different palettes.
Worked example
Triadic palette from red (#ff0000)
- Convert #ff0000 to HSL: hue = 0°, saturation = 100%, lightness = 50%.
- Color 2 hue = 0° + 120° = 120° (pure green). HSL(120°, 100%, 50%) converts to #00ff00.
- Color 3 hue = 0° + 240° = 240° (pure blue). HSL(240°, 100%, 50%) converts to #0000ff.
Color 1: #ff0000 | Color 2: #00ff00 | Color 3: #0000ff
Common mistakes to avoid
- Confusing triadic (120 degrees apart) with split-complementary (complement plus or minus 30 degrees) -- they are different harmony types and produce visually distinct schemes.
- Using all three triadic colors at equal weight -- triadic schemes work best when one color dominates (~60%) and the other two are used at roughly 30% and 10%.
- Applying triadic colors at full saturation simultaneously -- the high contrast between three vivid hues can feel garish; reducing saturation on two of the three usually improves balance.
Key terms
- Triadic harmony
- A color scheme built from three hues equally spaced at 120° intervals around the color wheel. It produces vibrant, high-contrast palettes while maintaining balance.
- HSL
- Hue–Saturation–Lightness. A cylindrical color model that separates the pure color (hue) from how vivid it is (saturation) and how light or dark it is (lightness).
- Color harmony
- A set of color relationships that are considered visually pleasing. Common harmonies include analogous (adjacent), complementary (opposite), triadic (three equal steps), and tetradic (four equal steps).
- Hue rotation
- Shifting the hue angle of a color by a fixed number of degrees while keeping saturation and lightness constant. This is the core operation behind generating all harmonic color schemes.
Frequently asked questions
- What makes triadic colors work?
- Equal spacing creates high contrast while retaining color richness. All three colors feel equally dominant, which is why they are often used in logo design.
- Can triadic colors clash?
- Yes if used in equal proportions. The 60/30/10 rule (dominant/secondary/accent) helps balance triadic palettes.