Complementary color relationship

As explained in Web Design Playground

A pair of colors positioned opposite each other on the color wheel that create strong visual contrast when combined.

Complementary colors are color-wheel opposites. Put them together and they create lively contrast: red and cyan, for example, are complements. In HSL, their hue values are 180 degrees apart. section 17.15

Strong contrast does not mean both colors need equal attention. Let one color do most of the visual work, then use its complement as an accent for items you want people to notice, such as Subscribe or Buy buttons. section 17.15

Build a complementary pair in three small steps:

• Choose the main hue for the page. section 17.16
• Add or subtract 180 degrees from its hue to find the complement. section 17.16
• Keep the main hue dominant and reserve the complementary color for high-attention accents. section 17.15

Red plus cyan

Start with red: hsl(0, 100%, 50%). Its complementary partner is cyan: hsl(180, 100%, 50%). Use red as the page’s main color and cyan to make a key button stand out. section 17.15

If you have a color in RGB, hex, a color keyword, or HSL form, use the Color Scheme Calculator: select Complementary, enter the starting color, and read the generated color values. section 17.16

Explore a design that carries most of its visual color load with just two complementary colors, showing that a striking page does not require a large palette. section 17.17

How Web Design Playground covers it

How deep it goes

Defines the relationship through the color wheel and 180-degree HSL offsets, then gives a calculator workflow.

Examples

Uses red hsl(0, 100%, 50%) and cyan hsl(180, 100%, 50%), plus a two-color website design.

What it assumes

Starts with a chosen initial 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 a complementary palette from a chosen color.

How it connects

Connects complementary colors with the color wheel, HSL, RGB, analogous 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 DevelopersA complementary color is a color positioned opposite another color in a color wheel or related color model, producing strong visual contrast.
• 

  liveBookmanning.com
  CSS in Depth, Second EditionA complementary color is a color positioned opposite another color on a color wheel or comparable hue model.
• 

  liveBookmanning.com
  Math for Web DesignA complementary color scheme is a color arrangement based on a hue and the hue positioned opposite it on the color wheel.
• 

  liveBookmanning.com
  Web Design Playground, Second EditionA complementary color scheme pairs colors whose hues are opposite each other on the color wheel.

Compare how 5 books explain complementary color relationship →

Related concepts

• color wheeluses · A color wheel is a circular arrangement of hues that represents relationships such as adjacency, opposition, and harmony.
• split complementary colorsused by · A split-complementary color scheme combines one hue with the two hues adjacent to its complement on a color wheel.
• hueuses · Hue is the perceived color attribute identifying a color family or position on a color spectrum, independently of saturation and lightness.
• contrastuses · Contrast is the perceptual or measurable difference in visual properties, such as luminance or color, that makes elements distinguishable.
• HSL methoduses · The HSL method represents colors using hue, saturation, and lightness within a color model or notation system.
• 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. The section links point to the parts of the book it draws on.