Tetradic Color Generator
Create a four color tetradic scheme from one base color with this Tetradic Color Generator. Enter a 3 or 6 digit hex code and the tool returns four hues spaced evenly at 90 degree steps around the HSL color wheel, two complementary pairs that share the saturation and lightness of your base, as hex codes. Made for designers and developers who need rich, varied palettes for dashboards, games, illustrations and branding.
Frequently asked questions
What does the Tetradic Color Generator return?
It returns four colors as six digit lowercase hex codes. Color 1 is your base and Colors 2, 3 and 4 are the hue rotated by 90, 180 and 270 degrees.
Is this a square or a rectangle tetrad?
It is a square tetrad: the four hues are spaced evenly, 90 degrees apart. Colors 1 and 3 and Colors 2 and 4 form two complementary pairs.
How is the scheme calculated?
The tool converts your hex code to HSL, adds 90, 180 and 270 degrees to the hue and wraps around 360 degrees. Saturation and lightness stay unchanged, and every hue is converted back to a hex code.
What is the tetrad of pure red?
For #ff0000 the tool returns #ff0000, #80ff00, #00ffff and #8000ff: red, a yellow green, cyan and a violet. The results follow the screen based HSL wheel, not the painter's red, yellow and blue wheel.
Which color formats can I enter?
Enter one 3 or 6 digit hex code, with or without the #, such as #ff5733 or f00. RGB and HSL notation and color names are not accepted, so convert them to hex first.
Why does Color 1 differ slightly from my input?
The calculation rounds hue, saturation and lightness to whole numbers, so the round trip can shift one channel by a step. #ff5733, for example, returns #ff5833, #74ff33, #33daff and #be33ff.
How do I keep a four color palette balanced?
Choose one dominant color, use a second for supporting areas and keep the other two for small accents. Mixing warm and cool hues in equal amounts at full saturation looks busy, so tint or shade some of them for large surfaces.
What happens with black, white or gray?
Neutral colors have zero saturation, so all four results are the same gray. A base with some saturation gives four distinct hues.
How is tetradic different from triadic?
Tetradic gives four hues at 90 degree steps, triadic gives three at 120 degree steps. Tetradic offers more variety, while a triad is simpler to balance.
Is the output the same as the Color Palette Generator?
Yes. This tool runs exactly the Tetradic option of the Color Palette Generator, so both tools return the same four hex codes for the same base color.