Complementary Color Calculator

How it is calculated

The tool reads a hex colour (with or without #; three-digit shorthand such as #f60 is expanded to six digits) and converts it from RGB to HSL: hue, saturation and lightness. The complement keeps saturation and lightness and rotates the hue by half a turn: hue' = (hue + 180°) mod 360°. That HSL value is converted back to RGB and written as a lowercase hex code. A second answer is the RGB invert, 255 − channel for red, green and blue separately. The two usually differ; they match only for some colours, such as pure red. Greys have no hue, so their complement is themselves, while the invert flips them. Codes with the wrong length or non-hex characters give no result.

Common mistakes

• Expecting the HSL complement and the RGB invert to be the same. For this blue they give a bright orange (#ffb21e) and a darker amber (#e19400), so choose the one your design method calls for.
• Entering a colour with an alpha pair such as #1E6BFF80. Only 3 or 6 hex digits are accepted, so remove the transparency digits first.
• Expecting a complement for black, white or grey. They have no hue to rotate, so the complement is the same colour, for example #808080 returns #808080.
• Treating the result as a finished palette. The complement is a single colour at the same lightness; text on it may still fail a contrast check, so test readability separately.
• Assuming the traditional painter's wheel gives the same answer. The tool rotates the screen RGB hue, so complements for blue come out orange, not the yellow some art-class wheels teach.