Split complementary colors
A split-complementary color scheme combines one hue with the two hues adjacent to its complement on a color wheel.
Design for Developers
A color scheme that combines one hue with the two hues adjacent to its complement.
- How it is used
- Uses the color wheel to choose a three-color palette for visual design and web interfaces.
- 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.
Read how Design for Developers explains split complementary colors →
Web Design Playground
A color relationship in which one hue is paired with the two hues adjacent to its complement on the color wheel.
- How it is used
- Uses one main page hue with two contrasting supporting hues for content, navigation, and accents.
- 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 you can do after
- Apply it via the Color Scheme Calculator to generate a split complementary palette from an initial color.
Read how Web Design Playground explains split complementary colors →
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.
- How it is used
- Uses one dominant hue and two related accents to organize web-page backgrounds, content, navigation, buttons, and borders.
- 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.
Read how Web Design Playground, Second Edition explains 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.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.