Triadic Color Generator
Triadic Color Generator returns the base hue and two hues rotated by 120 and 240 degrees. This produces equal angular spacing on the HSL wheel. It does not equalize perceived brightness or visual dominance, so the three colors often need different saturation, lightness, and usage proportions before they form a practical palette.
Runs locally — files stay on your deviceHow far apart are triadic hues?
They are separated by 120 degrees around the hue wheel.
A triad divides the hue circle into three equal arcs
For base hue h, the set is h, (h+120) mod 360, and (h+240) mod 360. Saturation and lightness follow the base in this generator.
How it works
Select a base color, generate the triad, then choose dominant, supporting, and accent roles rather than using all three equally by default.
Key concepts
Equal angle is not equal perception
Human sensitivity and display gamut vary around the hue circle.
Palette roles reduce competition
One dominant color with smaller accents is often calmer than equal areas.
When to use it
- Explore three separated accent hues.
- Create a starting palette for illustration.
- Demonstrate equal hue-wheel spacing.
When not to use it
- Do not assume equal HSL lightness means equal perceived brightness.
- Do not use three saturated colors at equal area without testing.
- Do not rely on hue alone to encode critical information.
Worked examples
Red-based triad
- Input
Hue 0°- Expected output
0°, 120°, 240°
The hues correspond broadly to red, green, and blue.
Offset triad
- Input
Hue 30°- Expected output
30°, 150°, 270°
All three retain equal separation.
Gray input
- Input
Saturation 0%- Expected output
Three visually gray values
Hue spacing is invisible without saturation.
Common mistakes
Using equal saturation everywhere
The palette can become visually noisy. Correction: Assign roles and tune intensity.
Assuming accessible combinations
Hue separation does not guarantee contrast. Correction: Check actual text/background pairs.
Treating HSL as perceptually uniform
Equal angles can look uneven. Correction: Adjust by eye or with perceptual color spaces.
Best practices
- Choose a dominant color.
- Tune lightness and saturation per role.
- Add labels and contrast verification.
Related operations and differences
Analogous Color Generator
Choose Analogous Color Generator when you need to generate neighboring harmonious colors.; use Triadic Color Generator specifically for triadic.
Color Shade Generator
Choose Color Shade Generator when you need to create darker shades of a base color.; use Triadic Color Generator specifically for triadic.
Color Tint Generator
Choose Color Tint Generator when you need to create lighter tints of a base color.; use Triadic Color Generator specifically for triadic.
Complementary Color Generator
Choose Complementary Color Generator when you need to find the color opposite on the hue wheel.; use Triadic Color Generator specifically for triadic.
CSS Gradient Generator
Choose CSS Gradient Generator when you need to create a two-color linear CSS gradient.; use Triadic Color Generator specifically for triadic.
HEX to HSL Converter
Choose HEX to HSL Converter when you need to convert a HEX color to HSL.; use Triadic Color Generator specifically for triadic.
Limitations and privacy
- Triads are based on HSL geometry.
- No gamut, perceptual balance, or accessibility optimization occurs.
- Achromatic input produces no visible hue distinction.
Color values are calculated locally in this browser.
Frequently asked questions
How many colors are in a triadic palette?
Three, including the base.
Why 120 degrees?
Three equal divisions of a 360-degree circle are 120 degrees apart.
Will all three look equally bright?
Not necessarily.
Do triadic colors guarantee accessibility?
No.