Colour Harmony

Complementary colour generator

Nearest named colour: royalblue

Format

Calculated in your browser · nothing is uploaded

Local · RGB wheel, not the art-class one
Advertisement
320 × 100

Gives the hue 180 degrees from yours. Complementary pairs produce the strongest contrast of any two-colour scheme, which is exactly why they are easy to overuse.

How to use the complementary colour generator

1 Set your colour; use the picker, or type a hex value or a CSS colour name.
2 Switch the format if you need RGB, HSL or OKLCH rather than hex.
3 Tap any swatch to copy it, or copy the whole set at once.

A complementary pair used at equal amounts fights: two colours of similar saturation directly opposite each other create a vibrating edge that is genuinely uncomfortable to look at. The convention that makes them work is a heavy imbalance; roughly 90 percent of one and 10 percent of the other, with the small amount used as an accent. That is why "red and green" sounds garish and a green room with one red chair does not. It is also worth knowing the wheel here is the RGB hue wheel, not the red-yellow-blue wheel taught in art classes, so the complement of blue is yellow rather than orange.

Questions

The hue directly opposite on the wheel, 180 degrees away.

MDN, CSS color values
Advertisement
300 × 250
Was this tool any good?
Internal signal only · I use it to find the tools worth rebuilding