Complementary color relationship
A complementary color relationship pairs hues positioned opposite each other on a color wheel or comparable hue model.
Design for Developers
A complementary color is a color positioned opposite another color in a color wheel or related color model, producing strong visual contrast.
- How it is used
- Uses opposing hues to create hierarchy and direct attention toward selected interface elements.
- How deep it goes
- Defines color-wheel opposition, explains contrast and primary-accent roles, and demonstrates application across a web page.
- Examples
- Uses a notification badge, a purple-yellow reference, and a travel site with muted blue and golden-yellow interface accents.
- What you can do after
- Apply it by assigning a dominant color, a restrained complementary accent, and neutral support colors to guide interface attention.
Read how Design for Developers explains complementary color relationship →
CSS in Depth, Second Edition
A complementary color is a color positioned opposite another color on a color wheel or comparable hue model.
- How it is used
- Derives accent colors that work with existing page colors, particularly for interactive link states.
- How deep it goes
- Explains opposite hues and a practical OKLCH workflow, then stops short of treating the result as an automatic final choice.
- Examples
- Uses blue–yellow, green–magenta, and red–cyan pairs plus a green-to-red OKLCH palette example.
- What you can do after
- Apply the relationship in CSS, refine chroma and lightness, and test interactive states with DevTools.
Read how CSS in Depth, Second Edition explains complementary color relationship →
Web Design Playground
A pair of colors positioned opposite each other on the color wheel that create strong visual contrast when combined.
- How it is used
- Uses complementary contrast to make web-page accents and call-to-action objects noticeable.
- 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 you can do after
- Apply it via the Color Scheme Calculator to generate a complementary palette from a chosen color.
Read how Web Design Playground explains complementary color relationship →
Math for Web Design
A complementary color scheme is a color arrangement based on a hue and the hue positioned opposite it on the color wheel.
- How it is used
- Builds simple color schemes by deriving an opposite hue for CSS interfaces.
- How deep it goes
- Explains the 180-degree relationship, works through hue calculations, and implements the result with CSS variables and functions.
- Examples
- Uses red and cyan, hue 240 and yellow, and hue 225 wrapping to hue 45.
- What you can do after
- Apply it via CSS by calculating complementary HSL hues with custom properties, calc(), or mod().
Read how Math for Web Design explains complementary color relationship →
Web Design Playground, Second Edition
A complementary color scheme pairs colors whose hues are opposite each other on the color wheel.
- How it is used
- Uses opposite hues to create harmonious contrast and direct attention toward important interface elements.
- How deep it goes
- Defines 180-degree hue opposition, gives an HSL example, and recommends main-color and accent roles.
- Examples
- Uses red hsl(0, 100%, 50%) with hsl(180, 100%, 50%), plus Subscribe and Buy buttons as accent examples.
- What you can do after
- Apply it via CSS color values and generate complementary palettes with the Web Design Playground Color Scheme Calculator.
Read how Web Design Playground, Second Edition explains 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.
- color relationshipkind of · A color relationship is a relationship among colors based on their hue, saturation, lightness, or position within a color system.
- 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.
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.