Split complementary colors

As explained in Web Design Playground

A color relationship in which one hue is paired with the two hues adjacent to its complement on the color wheel.

A split complementary scheme begins with one main hue, then swaps its direct opposite for the two hues beside that opposite on the color wheel. It keeps the lively contrast of complementary colors while giving the design two supporting colors to work with. section 17.15

Build the scheme in three small moves:

• Choose the original hue that will lead the page. section 17.15
• Find its complement by moving 180 degrees around the HSL color wheel. section 17.16
• Move 30 degrees to either side of that complement. Those two hues become the split complements. section 17.15 section 17.16
• Use the original hue as the main page color, and reserve the two split complements for content, navigation, buttons, borders, and accents. section 17.15

Starting with red

Red, written as hsl(0, 100%, 50%), pairs with hsl(150, 100%, 50%) and hsl(210, 100%, 50%). Rather than using red’s single opposite hue, the scheme uses the colors just to either side of it. section 17.15

The calculation rule is: add 180 degrees to the starting hue, then subtract 30 degrees for one supporting color and add 30 degrees for the other. A color-scheme calculator can generate the three-color set from a selected color and display each color as a hex value, rgb() function, and hsl() function. section 17.16

Inspect a split complementary design where the darkest color forms the background and the brightest color pulls attention as an accent. section 17.17

How Web Design Playground covers it

How deep it goes

Defines the wheel relationship, gives HSL offsets, and provides a calculator workflow without explaining RGB conversion math.

Examples

Demonstrates red with hsl(150, 100%, 50%) and hsl(210, 100%, 50%), plus a dark-background, bright-accent site.

What it assumes

Begins with a chosen initial color and accepts RGB hex triplets, rgb(), color keywords, or hsl() input.

What you can do after

Apply it via the Color Scheme Calculator to generate a split complementary palette from an initial color.

How it connects

Connects split complementary schemes to complementary, analogous, triadic, monochrome, HSL, RGB, and color-wheel relationships.

liveBookmanning.com

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

Also explained in

• 

  liveBookmanning.com
  Design for DevelopersA color scheme that combines one hue with the two hues adjacent to its complement.
• 

  liveBookmanning.com
  Web Design Playground, Second EditionA split complementary color scheme pairs a main color with the two colors located on either side of its opposite hue.

Compare how 3 books explain split complementary colors →

Related concepts

• complementary color relationshipcontrasts with · A complementary color relationship pairs hues positioned opposite each other on a color wheel or comparable hue model.
• color palettekind of · A selected set of colors intended for coordinated use in visual design or representation.
• hueuses · Hue is the perceived color attribute identifying a color family or position on a color spectrum, independently of saturation and lightness.
• 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.
• calc()uses · The CSS calc() function evaluates an arithmetic expression involving compatible CSS values and units to produce a computed value.

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.