Build a triadic palette from one base color
A triadic scheme splits the hue wheel into three and uses colors 120 degrees apart. They sit far enough from each other to stay lively, yet the result is less blunt than a two-color complementary pair. Enter one base HEX and the page lists all three colors as HEX, RGB and HSL together with each hue angle. Values recompute as soon as you type in the field.
How it is computed
The input color is converted to hue, saturation and lightness using the HSL definition in the W3C CSS Color specification. Only the hue gets 120 and 240 degrees added, while saturation and lightness stay exactly as the base color had them, which is why all three read at a similar brightness. The rule line prints the rotation and the kept saturation and lightness so you can line the numbers up against another tool. The specification reference is current as of October 2026.
Limits
White, gray and black have no defined hue, so rotating them returns the same color and the page blocks that input with a message instead. The page also only produces colors, it does not decide which one carries text or whether a pair clears a contrast threshold.
Frequently Asked Questions
Dividing the 360 degree hue wheel into three equal parts gives 120 degrees. Every color sits the same distance from the others, so none of them dominates the set.
Gray, white and black have zero saturation, so hue is undefined for them. Adding an angle changes nothing, so the page stops with a message and asks for a color that has some saturation.
This page keeps the saturation and lightness of the base color on purpose. To spread one color across brightness levels, pair it with a tool that works on the lightness axis, such as a tint and shade step generator.