Complementary Color Calculator

A complementary color sits directly opposite your color on the wheel, 180 degrees away. Paired together the two create strong contrast, which is why they are often used for accents and calls to action.

Triadic colors are three hues spaced evenly around the wheel, 120 degrees apart. Starting from your base the tool returns the other two, labelled +120 and +240, which together make a vivid, balanced trio.

Analogous colors are the immediate neighbours of your color, here 30 degrees to each side and labelled -30 and +30. They sit comfortably together and suit harmonious, low-contrast palettes.

Your hex is converted to HSL, the hue is rotated by the required number of degrees, and the result is converted back to hex. Saturation and lightness are left unchanged, so only the hue moves.

Both 3-digit and 6-digit hex, with or without a leading #. So #f00, f00, #ff0000 and ff0000 all describe the same red. Values are normalized to 6-digit lowercase hex in the output.

This tool uses the RGB and HSL color wheel that screens are built on, where red sits opposite cyan. The green you may expect comes from the traditional RYB paint wheel used by artists, which arranges hues differently.

Greys have no measurable hue, so rotating the hue leaves them unchanged. The complement, triadic and analogous colors of a neutral all come back as the same neutral.

The swatches are replaced by a short message asking for a valid hex color like #ff0000. As soon as the text is a valid 3 or 6 digit hex, the palette reappears.

No. The whole palette is calculated in your browser, so your color values never leave your device.