Split complementary colors

As explained in Web Design Playground, Second Edition

A split complementary color scheme pairs a main color with the two colors located on either side of its opposite hue.

A split-complementary color scheme pairs one main hue with the two colors 30 degrees on either side of its opposite hue. The result brings contrast without making every color fight for attention. section 17.6

Build the scheme in two simple moves:

• Keep the original color as the page’s main hue. section 17.6
• Find its opposite by adding 180 degrees, then choose colors 30 degrees on either side of that opposite: add 150 degrees and 210 degrees to the original hue. section 17.7
• Use the two companion colors for content, navigation, buttons, borders, and other accents. section 17.6

A red-based scheme

Start with red, hsl(0, 100%, 50%). Its split-complementary colors are hsl(150, 100%, 50%) and hsl(210, 100%, 50%). Red can anchor the page while the other two hues handle content, navigation, and accents. 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 select a starting color and generate its split-complementary palette with RGB, rgb(), and hsl() values. section 17.7

How Web Design Playground, Second Edition covers it

How deep it goes

Explains the hue relationship, gives the calculation, and demonstrates it with HSL values before delegating arithmetic to a calculator.

Examples

Uses red with hsl(150, 100%, 50%) and hsl(210, 100%, 50%), plus a Color Scheme Calculator workflow.

What you can do after

Apply it via the Color Scheme Calculator to generate usable palette values from a chosen color.

How it connects

Connects split-complementary colors with complementary colors, triadic colors, hue, HSL, RGB, and gradients.

liveBookmanning.com

Read Web Design Playground, Second Edition 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 PlaygroundA color relationship in which one hue is paired with the two hues adjacent to its complement on the color wheel.

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, Second Edition. The section links point to the parts of the book it draws on.