Analogous colors

As explained in Web Design Playground, Second Edition

An analogous color scheme uses colors whose hues are adjacent or near one another on the color wheel.

Analogous colors sit next to one another on the color wheel, creating a harmonious scheme with relatively little contrast. section 17.6

Build an analogous palette with HSL hue values:

• Start with a main hue, then add 30 degrees for one color and subtract 30 degrees for the other. section 17.6 section 17.7
• Use 15-degree differences when you want even less contrast. section 17.6
• For a more contrasting scheme, make one hue dominant and reserve the other two for buttons, borders, and accents. section 17.6

A red-based palette

Red, hsl(0, 100%, 50%), is analogous to hsl(30, 100%, 50%) and hsl(330, 100%, 50%). 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 choose a starting color and generate its analogous palette, including RGB, rgb(), and hsl() values. section 17.7

How Web Design Playground, Second Edition covers it

How deep it goes

Explains adjacent hues, 15- and 30-degree HSL spacing, and accent placement, but stops short of broader color theory.

Examples

Demonstrates red with 30-degree neighboring hues and generates palettes through a color-scheme calculator.

What it assumes

Assumes a chosen main color and basic familiarity with hue values, while defining analogous relationships through concrete HSL examples.

What you can do after

Apply it through HSL calculations or the Color Scheme Calculator to create harmonious web-design palettes.

How it connects

Connects analogous colors with HSL, the color wheel, complementary colors, triadic 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 DevelopersAn analogous color scheme uses colors positioned next to one another on the color wheel.
• 

  liveBookmanning.com
  Web Design PlaygroundA color scheme built from colors that are adjacent on the color wheel and therefore share similar visual qualities.

Compare how 3 books explain analogous colors →

Related concepts

• color wheeluses · A color wheel is a circular arrangement of hues that represents relationships such as adjacency, opposition, and harmony.
• color palettekind of · A selected set of colors intended for coordinated use in visual design or representation.
• calc()uses · The CSS calc() function evaluates an arithmetic expression involving compatible CSS values and units to produce a computed value.
• CSS variableuses · A CSS custom property is an author-defined property, typically named with a leading double hyphen, whose value can be inherited and referenced in other declarations.
• complementary color relationshipalternative to · A complementary color relationship pairs hues positioned opposite each other on a color wheel or comparable hue model.
• contrastcontrasts with · Contrast is the perceptual or measurable difference in visual properties, such as luminance or color, that makes elements distinguishable.

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.