Triadic colors

As explained in Web Design Playground, Second Edition

A triadic color scheme uses three colors whose hues are equally spaced around the color wheel.

A triadic color scheme uses three hues spaced evenly around the color wheel. In HSL, each hue sits 120 degrees from the next, creating a balanced, harmonious trio. section 17.6

Use the three colors with a little restraint:

• Choose one color as the page’s main hue. section 17.6
• Assign the other two colors to content, navigation, borders, or accents. section 17.6
• Expect the colors to have similar vibrancy, so the result feels balanced rather than chaotic. section 17.6

Example: start with red

Red, hsl(0, 100%, 50%), forms a triadic scheme with hsl(120, 100%, 50%) and hsl(240, 100%, 50%). The 120-degree spacing does the organizing work—no color-wheel acrobatics required. section 17.6

Figure 17.11 Use the Web Design Playground’s Color Scheme Calculator to generate a color scheme for a given RGB code.

Use the Color Scheme Calculator to generate a triadic palette from a selected color, RGB value, rgb() function, color keyword, or hsl() function. section 17.7

How Web Design Playground, Second Edition covers it

How deep it goes

Explains the 120-degree HSL rule, color-role assignments, and a red example, then delegates calculation to a tool.

Examples

Demonstrates red with HSL hues 0, 120, and 240 degrees and assigns three colors to page-design roles.

What it assumes

Assumes a main hue and basic color notation, while providing the degree calculations needed to complete the scheme.

What you can do after

Apply it via the Web Design Playground Color Scheme Calculator to generate RGB, rgb(), and HSL values.

How it connects

Connects triadic colors with color wheels, HSL, analogous colors, complementary colors, and split-complementary colors.

liveBookmanning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Design for DevelopersA triadic color scheme uses three colors evenly spaced around the color wheel.
• 

  liveBookmanning.com
  Web Design PlaygroundThree colors spaced evenly around the color wheel, forming a balanced high-harmony color relationship.

Compare how 3 books explain triadic colors →

Related concepts

• color wheeluses · A color wheel is a circular arrangement of hues that represents relationships such as adjacency, opposition, and harmony.
• HSL methoduses · The HSL method represents colors using hue, saturation, and lightness within a color model or notation system.
• CSSuses · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
• 60:30:10 ruleconfigured by · The 60:30:10 rule is a color-allocation guideline that assigns approximately 60 percent, 30 percent, and 10 percent of a composition to primary, secondary, and accent color roles.
• degreesmeasures · A degree is a unit of angular measurement equal to one three-hundred-sixtieth of a full revolution.
• color palettekind of · A selected set of colors intended for coordinated use in visual design or representation.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.