liveBook · Manning

Split complementary colors

As explained in Design for Developers

A color scheme that combines one hue with the two hues adjacent to its complement.

Split-complementary colors form a three-color scheme by pairing one hue with the two hues beside its direct complement on the color wheel. For example, purple pairs with yellow and orange. section 9.2.1

Use the relationship as a practical palette rather than letting three strong colors compete:

  • Assign roughly 60% of the design to the primary color, 30% to the secondary color, and 10% to a small accent. section 9.2.1
  • Adjust saturation and lightness to create shades, tints, or more neutral variations instead of relying on intense, pure hues. section 9.2.1
  • Check text contrast and pair color with icons or labels so color is not the only carrier of information. section 9.9

A purple-led palette

Start with purple as the dominant hue, use yellow as the supporting color, and reserve orange for a small accent. A softer variation can use yellow-orange, yellow-green, and purple shades or tints. section 9.2.1

Figure 9.14 An example of a split complementary color scheme using shades and tints of yellow-orange, yellow-green, and purple.

Browse the split-complementary palette showing yellow-orange, yellow-green, and purple through shades and tints. section 9.2.1

How Design for Developers covers it

How deep it goes
Defines the hue relationship, adds 60/30/10 proportion guidance, and stops short of detailed implementation instructions.
Examples
Uses purple with yellow and orange, plus yellow-orange, yellow-green, and purple shades and tints.
What you can do after
Apply it via a design tool and contrast tester to build a balanced palette without relying on color alone.
How it connects
Connects the scheme with color wheels, shades and tints, contrast, accessibility, and emotional tone.

Also explained in

Compare how 3 books explain split complementary colors →

Related concepts

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.