Triadic colors are a cheerful three-color team: choose three hues spaced evenly around the color wheel. In HSL terms, each hue sits 120 degrees from the next, creating colors with similar vibrancy that tend to feel balanced and harmonious. section 17.15
Think of the color wheel as a round table with three evenly spaced seats. Once one hue takes a seat, the other two are waiting exactly one-third of a turn away. Starting with red, hsl(0, 100%, 50%), produces green, hsl(120, 100%, 50%), and blue, hsl(240, 100%, 50%). section 17.15
Build a triadic scheme in small steps:
- Pick the main hue for the design. section 17.16
- Add 120 degrees to its hue for one partner, and subtract 120 degrees for the other. section 17.16
- Give the three colors different jobs: use one for the page background, another for content and navigation, and the third for borders and accents. section 17.15
A red triad
Start with red at hue 0. Its triadic partners are hues 120 and 240. Rather than making every element equally loud, let one hue lead the page and save the others for supporting areas such as navigation, borders, or small accents. section 17.15
Doing hue arithmetic is simple when you already have HSL values, but less friendly when you begin with an RGB value. The Web Design Playground Color Scheme Calculator can generate a triadic scheme from a picked color, RGB hex triplet, rgb() function, color keyword, or hsl() function, then display each resulting color in RGB and HSL forms. section 17.16
Browse a web example that uses a triadic color scheme for backgrounds and text, then notice how the colors share the visual work. section 17.17
A triad is useful when a design needs more variety than nearby analogous hues, while still keeping the palette organized. Pick the main hue first, place its two 120-degree partners around it, and assign each color a clear role. section 17.15
