Triadic Color Generator

Generates a triadic color scheme — three colors spaced 120° apart around the color wheel — from any base color you enter, using HSL hue rotation while keeping saturation and lightness constant.

Pick a base color with the color swatch or type a hex code directly. The three swatches update immediately; click the copy icon on any swatch to copy its hex value.

The default base color #3b82f6 (a blue with hue ≈217°, saturation ≈91%, lightness ≈60%) produces #f63b82 at +120° (a pink/red) and #82f63b at +240° (a green) — three hues evenly spaced around the wheel while sharing the same saturation and lightness as the base.

Each accent color is generated in HSL space: hue is rotated by +120° and +240° from the base hue, wrapping around 360°, while saturation and lightness stay exactly the same as the base color. The result is converted back to hex for display and copying.

Spacing three hues evenly around the color wheel guarantees strong visual contrast between them without any two colors landing close enough to clash or blend together. It's a stronger contrast than a complementary (two-color) scheme, which is why many designers use one of the three as a dominant color and the other two as smaller accents rather than giving all three equal visual weight.

This generates colors from pure hue rotation only — it doesn't check contrast ratios for text accessibility (WCAG), doesn't suggest which of the three should be dominant, and produces a technically valid but not always visually pleasing result for very low-saturation or very dark/light base colors, where hue becomes less perceptually meaningful.

Triadic color theory is a standard color-harmony model used in design education and practice. The colors are computed entirely in your browser using RGB/HSL conversion math; the color you enter is never uploaded.