What is a complementary color?

A complementary color is directly opposite on the color wheel (hue rotated 180°). Red's complement is cyan, blue's complement is orange, and yellow's complement is violet. Complementary pairs create strong visual contrast.

When should I use complementary colors?

Complementary palettes are ideal for high-contrast designs: call-to-action buttons, warning indicators, sports branding, or anywhere you want two colors to stand out against each other. Avoid using them in equal amounts as they can feel jarring.

How is a complementary color calculated?

Convert the base color to HSL, add 180 to the hue value (wrapping around at 360°), and keep saturation and lightness the same. The resulting color is the complement.

Is my data sent to a server?

All calculations run locally in your browser. No data is sent to our servers.

Complementary color generator

A complementary color is directly opposite your base color on the color wheel, separated by exactly 180 degrees of hue. Complementary pairs create maximum contrast and visual energy. Enter any color to instantly see its complement, plus both colors in hex, RGB, and HSL formats. All calculations run locally in your browser.

Base color

#3b82f6

#f6af3c

PALETTE TYPE

How it works

All color calculations use the HSL (hue, saturation, lightness) color space. The base color is converted from hex to HSL, and the hue is rotated by a fixed amount depending on the palette type (complementary: 180deg, triadic: 120deg/240deg, etc.). The adjusted hue values are converted back to RGB and then to hex for display. All arithmetic runs in JavaScript in your browser.

Processing runs in your browser

All processing happens locally in your browser tab. Our servers are not involved at any point.

Related operations

For lightening or darkening a single colour, try tints and shades. To convert any chosen swatch between HEX, RGB, and HSL, use the colour converter. For testing readable text colours on your palette, see the contrast checker.

Frequently asked questions

What is a complementary color?: A complementary color is directly opposite on the color wheel (hue rotated 180°). Red's complement is cyan, blue's complement is orange, and yellow's complement is violet. Complementary pairs create strong visual contrast.
When should I use complementary colors?: Complementary palettes are ideal for high-contrast designs: call-to-action buttons, warning indicators, sports branding, or anywhere you want two colors to stand out against each other. Avoid using them in equal amounts as they can feel jarring.
How is a complementary color calculated?: Convert the base color to HSL, add 180 to the hue value (wrapping around at 360°), and keep saturation and lightness the same. The resulting color is the complement.
Is my data sent to a server?: All calculations run locally in your browser. No data is sent to our servers.

Complementary color generator

How it works

Processing runs in your browser

Related operations

Frequently asked questions

Related tools