Complementary Colors & Palettes

How these color schemes work

Every scheme is built by rotating the hue around the color wheel. The complementary color sits directly opposite (180°): maximum contrast, perfect for making a button or a detail stand out. A triadic scheme takes three colors spaced 120° apart, and a tetradic scheme four colors at 90°: lively yet balanced palettes. Analogous colors (±30°) sit next to each other and feel harmonious and calm, while split-complementary colors (150° and 210°) deliver the punch of the complementary in a softer, easier-to-handle version.

Practical tips for using a palette

The simplest rule of thumb is 60-30-10: one dominant color for about 60% of the composition (usually the most neutral one, or your base), a secondary color for 30%, and the boldest one for just 10%, accents and calls to action. If you use these colors for text, always make sure the text/background pair stays readable: you can test it with our WCAG contrast checker.

The painter's wheel and the screen's

The complementary colours taught at school come from the painters' RYB wheel, where the opposite of red is green; on a screen you work in RGB, where the opposite of red is cyan. They are two different models and they give different answers to the same question.

Digital tools nearly always use HSL space, which is RGB reorganised: the complement is the hue 180 degrees away. The result is consistent with what a monitor shows, but not with mixing pigments: anyone printing has to redo the sums on the right wheel.

Why two pure complements tire the eye

Two opposite colours at full saturation, placed side by side, produce a shimmer at the edges: the eye cannot focus on both at once and the boundary seems to vibrate. It is the effect that makes red text on green unreadable.

The pair works when one of the two is desaturated or lightened: a deep blue with a soft orange is the same relationship, but restful. It is why film posters have used orange and teal for twenty years, not bright orange and bright blue.

The scheme depends on how many colours you need

A complement exists to make one single thing stand out: a button, a price, a call to action. With more than one element in the opposite colour the accent cancels itself, because two things shouting are no longer shouting.

When more colours are needed you move up a scheme: analogous (neighbouring hues) for a calm, coherent effect, triadic for three lively but balanced colours, split complementary for the contrast of a complement without its harshness. Above four colours a palette stops reading as a decision.

Nearby tools

Before adopting a pair, Colour contrast checker says whether the text will be readable and Colour blindness simulator whether it works for everyone. To vary a colour lighter and darker there is Tints and shades of a colour.