Build a triadic color palette

Generate three colours spaced equally around the HSL hue circle.

freeworks offlinenothing uploaded
ToolTriadic Colors
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The base RGB colour becomes HSL, hues 0°, 120°, and 240° apart are generated, and each is converted back to RGB and hex. Saturation and lightness remain shared.

  • Equal thirds define the relationship.
  • No equal-luminance or accessibility claim is made.

Worked example

Triadic of Red
Find triadic colors for red (red, green, blue)
Input
											#FF0000
Output
												#FF0000
#00FF00
#0000FF

When to use this

Posters create accents, dashboards generate categories, and colour theory exercises demonstrate hue-wheel spacing.

Edge cases

  • A gray base yields indistinguishable gray variants.
  • Channel rounding slightly changes exact symmetry.
  • Equal hue spacing does not ensure equal perceived brightness.

References