Triadic Color Generator
Build a triadic color scheme from one base color with this Triadic Color Generator. Enter a 3 or 6 digit hex code and the tool returns three colors spaced 120 degrees apart on the HSL color wheel, all with the saturation and lightness of your base, as ready-to-paste hex codes. Great for designers and developers who want balanced, vibrant palettes for interfaces, illustrations and brand systems.
Frequently asked questions
What does the Triadic Color Generator return?
It returns three colors as six digit lowercase hex codes. Color 1 is your base, Color 2 is the hue rotated by 120 degrees and Color 3 is the hue rotated by 240 degrees.
How is a triadic scheme calculated?
The tool converts your hex code to HSL, adds 120 and 240 degrees to the hue and wraps the result around 360 degrees. Saturation and lightness stay the same, so all three colors share the brightness and intensity of the base.
What is the triad of pure red?
For #ff0000 the tool returns #ff0000, #00ff00 and #0000ff, the three RGB primaries. This shows that the tool uses the screen based HSL wheel rather than the red, yellow and blue wheel of traditional painting.
Which color formats can I enter?
Enter a 3 or 6 digit hex code, with or without the #, such as #3366cc or 36c. RGB and HSL notation and color names are not accepted, so convert them to hex first.
Why does my base color come back slightly changed?
The calculation uses whole-number hue, saturation and lightness, so converting the base to HSL and back can shift one channel by a step. #ff5733, for example, becomes #ff5833, with #33ff58 and #5833ff as the other two colors.
How do I use a triadic palette without it looking loud?
Let one color dominate and use the other two as accents, for example 60, 30 and 10 percent of the surface. Starting from a less saturated or darker base gives a calmer triad, because all three colors inherit its saturation and lightness.
What happens with black, white or gray?
Neutral colors have no saturation, so rotating the hue returns the same gray three times. Choose a base with some saturation to get three distinct colors.
How is triadic different from tetradic?
A triadic scheme has three colors 120 degrees apart, while a tetradic scheme has four colors 90 degrees apart. Triads are usually easier to balance; use the Tetradic Color Generator when you need a fourth hue.
Does the tool check accessibility?
No, it only computes the colors. Because the three colors share the lightness of the base, their contrast against each other can be low, so test text and background pairs with a contrast checker.
Is the output the same as the Color Palette Generator's triadic option?
Yes. This tool runs exactly the calculation of the Triadic option in the Color Palette Generator, so both give identical hex codes for the same base color.