Analogous colors

As explained in Design for Developers

An analogous color scheme uses colors positioned next to one another on the color wheel.

An analogous color scheme uses three colors next to one another on the color wheel. The result is harmonious and cohesive rather than intensely contrasting. section 9.2.1

This low-contrast approach can make an interface feel calm and elegant, but color alone may not distinguish chart data or interface states. Add patterns, icons, labels, or other context where meaning matters. section 9.2.1 section 9.9

From sunsets to dashboards

A sunset can move through yellows, oranges, and reds, demonstrating how neighboring hues blend naturally. A dashboard can use a similar palette for a cohesive appearance, while patterns or labels preserve distinctions between chart values. section 9.2.1

Figure 9.12 This is an example of an analogous color scheme with varying shades of purple.

View an analogous palette built from varying shades of purple. section 9.2.1

How Design for Developers covers it

How deep it goes

Defines the three-color relationship and explains its visual effect, but stops short of detailed implementation steps.

Examples

Uses sunsets, purple shades, and dashboard charts to demonstrate analogous palettes and their limitations.

What it assumes

Assumes no specialized color theory beyond learning to identify neighboring colors on a color wheel.

What you can do after

Apply neighboring hues to choose harmonious palettes while adding non-color cues where users must distinguish information.

How it connects

Connects analogous colors to the color wheel, complementary color schemes, accessibility, contrast testing, and information encoding.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Also explained in

• 

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

  liveBookmanning.com
  Web Design Playground, Second EditionAn analogous color scheme uses colors whose hues are adjacent or near one another on the color wheel.

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 Design for Developers. The section links point to the parts of the book it draws on.