Analogous colors

As explained in Web Design Playground

A color scheme built from colors that are adjacent on the color wheel and therefore share similar visual qualities.

Analogous colors are neighbors on the color wheel. Because they sit close together, they create a coordinated look without the sharp contrast of colors from opposite sides of the wheel. Start with one main hue, then choose nearby hues to support it. section 17.15

In HSL, an analogous scheme usually places the supporting hues 30 degrees on either side of the main hue. For a red main color, hsl(0, 100%, 50%), the neighboring colors are hsl(30, 100%, 50%) and hsl(330, 100%, 50%). Want an even quieter palette? Choose hues only 15 degrees apart. section 17.15

Build an analogous scheme in three small moves:

• Pick the hue that should lead the page. section 17.16
• Add 30 degrees to its hue for one neighboring color. section 17.16
• Subtract 30 degrees for the other neighboring color. section 17.16
• Keep the main hue prominent, and reserve the other colors for buttons, borders, and other accents when the scheme has more contrast. section 17.15

A red neighborhood

Use red as the lead color, then move one step clockwise and one step counterclockwise on the wheel: red at 0 degrees, a neighbor at 30 degrees, and another at 330 degrees. The three hues belong together because each is close to red, yet the two supporting hues can still separate accents from the page’s main color. section 17.15

Browse a landing-page example that uses an analogous scheme for a colorful, inviting result. section 17.17

If hue arithmetic feels fussy, use a color-scheme calculator instead. Select Analogous, enter or pick an initial color, and inspect the generated colors as RGB, rgb(), and hsl() values. section 17.16

How Web Design Playground covers it

How deep it goes

Defines color-wheel adjacency and HSL offsets, then gives calculator steps for generating the palette.

Examples

Uses red at 0, 30, and 330 degrees and an inviting analogous-color landing page.

What it assumes

Starts with one chosen color and accepts RGB hex, rgb(), color keywords, or hsl() input.

What you can do after

Apply it via the Color Scheme Calculator to generate neighboring hues from an initial color.

How it connects

Connects analogous colors with the color wheel, HSL, complementary colors, triadic colors, and split complementary colors.

liveBookmanning.com

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