Skip to content

Fundamentals

Complementary colors

Complementary pairs sit opposite on the wheel — maximum hue contrast. Use them for CTAs, charts, and posters; soften with tints or neutrals to avoid vibration. Further reading: Reference.

Open palette tool →

Complementary colors on the wheel

180° apart

Red–green, blue–orange, and yellow–violet are classic complements. In HSL, complementary hue = (hue + 180) mod 360.

When complements work

Great for small accents on large fields. Risky for body text on saturated backgrounds — check WCAG contrast before shipping.

Split complements

Instead of the exact opposite, pick the two neighbors of the complement for a softer triangle. The harmony tool explores triads and tetrads too.

Taming vibration

Full-strength complements side by side can shimmer on screen. Lower chroma on one side, add white or charcoal between them, or use complement only on icons and borders while keeping fields neutral.

Data visualization

Complements separate series in bar and line charts when you cannot rely on legend position. Label series directly and offer a pattern fill option for color-blind readers.

Explore splits and triads

Split-complementary schemes give you two accent hues flanking the opposite of your base—useful for illustrations and marketing without the harshness of a pure 180° pair. The harmony tool on this page compares triad and tetrad options from the same seed.

Reference swatches

FAQ

Can I copy the HEX swatches?

Yes — click any chip in the reference grid to copy HEX. RGB and CMYK appear on each row where the renderer supports them.