Complementary Colors
Complementary colors sit directly opposite each other on the color wheel, 180° apart. Placed side by side they create the strongest possible hue contrast, which is why the pair makes a call-to-action button jump off the page.
Drag the large handle. The angle between handles is the rule: 180°.
Complementary Colors generator
| Color | HEX | RGB | HSL |
|---|---|---|---|
| #2F6FDE | rgb(47, 111, 222) | hsl(218 73% 53%) | |
| #DE9E2F | rgb(222, 158, 47) | hsl(38 73% 53%) |
How to find complementary colors
Take the hue of your base color and add 180°. On the RGB wheel used by screens (and by this tool) blue #0000FF pairs with yellow #FFFF00; on the traditional painter’s RYB wheel blue pairs with orange. Both are "correct" — they are different models.
When to use it
- One dominant color and its complement as a small accent (buttons, badges, highlights).
- Sports and food branding, where energy matters more than calm.
- Data visualisation with two opposing categories (gain/loss, before/after).
Watch out for
Using both colors at full saturation in equal amounts makes edges appear to vibrate. Let one color dominate and tint, shade or desaturate the other. Hue relationships say nothing about readability, so run your text colors through the WCAG contrast checker.
Example palette
Frequently asked questions
What is the complementary color of blue?
On the RGB/screen wheel the complement of pure blue (#0000FF) is yellow (#FFFF00). On the painter’s RYB wheel taught in art class, blue’s complement is orange. For a typical UI blue like #3B82F6 the RGB complement is a warm amber, #F6AF3B.
What is the complementary color of red?
Cyan (#00FFFF) on the RGB wheel, and green on the RYB wheel.
Are complementary colors accessible?
Hue contrast is not the same as luminance contrast. Red and green are complements but can have almost identical lightness, and people with deuteranopia may not tell them apart. Always check text with a WCAG contrast checker.