Triadic Color Finder
Generate three HSL hues spaced 120 degrees apart from a HEX color, with codes, hue angles and a distinct-color count after rounding.
A triad divides the digital hue wheel into three equal arcs. Start with one HEX color to obtain the two other hue directions without changing the starting HSL saturation or lightness. The output lists the base and related colors in a reproducible order, ready to copy into a digital design. It describes HSL geometry rather than a paint or printing model.
How to use this tool
- Enter an opaque three- or six-digit HEX color, with or without the leading hash.
- Use the fixed angular spacing for this relationship.
- Read the HEX list and the hue-offset table together.
- Test the resulting colors in their actual foreground, background and surrounding layout.
Formula
hues = (h, h + 120, h + 240) mod 360
Hue wraps at 360 degrees. Saturation and lightness are retained from the original sRGB color before rounding each new RGB channel to the nearest integer from zero to 255. The base HEX is preserved exactly.
Example
Starting with red #FF0000 gives green #00FF00 and blue #0000FF. Their HSL hues are 0, 120, and 240 degrees with saturation 100% and lightness 50%.
Frequently asked questions
Why do all results repeat for gray?
An achromatic color has zero saturation and no defined hue. Rotating its hue cannot introduce color, so gray, black and white produce repeated entries.
Are these colors guaranteed to have good contrast?
No. Equal HSL lightness does not mean equal perceived brightness, and hue separation does not determine text contrast. Check the specific foreground and background pair separately.
Why can two different angles produce the same code?
HEX channels have only 256 values each. At low chroma or very small angular changes, rounding can merge several hue positions. The distinct-color count makes this visible instead of silently removing palette entries.
Sources
Last updated: 2026-10-30