A complementary pair is defined by hue alone. Two colours are complementary when their hues sit exactly 180 degrees apart on the HSL colour wheel, which is why the calculation only ever touches one of the three HSL components, leaving saturation and lightness exactly as they were in the original colour. That single rotation is enough to guarantee the strongest possible hue contrast available between two colours.
Everything happens locally. The hue rotation, the conversion back to hex and RGB, and every readout on the page are computed by JavaScript running in your browser tab, with no colour value ever leaving your device.
How this complementary color generator finds your colour's opposite
The base colour is first converted from hex into HSL, since rotating a hue is a single addition in that model rather than a more involved transformation in RGB. The generator adds 180 degrees to the hue and wraps the result back into the 0 to 360 degree range if it overflows, while saturation and lightness are copied across unchanged. The rotated HSL value is then converted back through RGB to a final hex code.
Because only hue changes, a complementary pair always shares the same intensity and the same brightness. A soft, muted base colour produces an equally soft, muted complement, and a highly saturated, bright base colour produces an equally saturated, bright complement, which keeps the pair looking like two ends of one deliberate decision rather than two unrelated colours.
When to use a complementary colour scheme
Complementary pairs create the strongest hue contrast two colours can have, which makes them useful whenever one element genuinely needs to draw the eye away from everything around it. That contrast is a tool to be used sparingly. A whole interface built from a complementary pair at full saturation tends to vibrate uncomfortably, while the same pair used for one accent against a mostly neutral background reads as confident and intentional.
- A call to action button that needs to stand out from the rest of a page.
- A single highlight colour in a chart, marking one series against a family of neutral ones.
- An accent border, icon or badge that should be noticed immediately.
- Sports team branding and signage, where high visibility from a distance matters more than subtlety.
- Avoid pairing both colours at equal size and full saturation across large areas, since the contrast becomes fatiguing rather than striking.
Why complementary colors clash instead of blend
Complementary colours sit at the point of maximum hue difference by definition, so placed next to each other they create simultaneous contrast, a visual effect where each colour makes the other appear more saturated and more vivid than it would look alone. This is the exact opposite of an analogous scheme, where neighbouring hues share enough in common to blend smoothly.
That tension is precisely what makes a complementary pair effective for emphasis and precisely what makes it risky as a background and text combination. A saturated complementary pair used for body text on a matching background can vibrate and tire the eye during extended reading, so complementary contrast is usually best spent on a small, deliberate area rather than an entire layout.
Reading the hue, saturation and lightness output
The output panel shows both colours' HSL values explicitly so the 180 degree hue rotation stays visible rather than hidden behind two hex codes. The hue figures for the base and its complement will always differ by exactly 180, while the saturation and lightness figures for both colours will always match, which is a useful way to confirm the generator applied a pure hue rotation with nothing else adjusted.
This complementary color generator adds 180, wraps at 360, converts back
Parsing starts from a 3 or 6 digit hex string, converted to integer red, green and blue channels, then through the standard RGB to HSL formula that finds hue from whichever channel is largest and how far apart the other two channels sit. Adding 180 to that hue and taking the result modulo 360 produces the complementary hue, and the standard HSL to RGB formula converts it back, guaranteeing a valid colour for any input.
The whole round trip, hex to HSL, rotate, HSL back to hex, takes a fraction of a millisecond, so the complementary swatch updates the instant you change the base colour with no perceptible delay.
Complementary colors in interface and print design
Print designers have used complementary pairs for contrast long before screens existed, since the same 180 degree hue relationship holds regardless of the medium a colour is eventually reproduced in. On screen, the same principle applies to buttons, badges, focus rings and any element that needs to separate itself instantly from its surroundings without relying on size or position alone.
A common, reliable pattern is to build most of an interface from a neutral palette and one dominant brand hue, then reserve the exact complement of that brand hue for a single interactive accent, which keeps the contrast meaningful rather than overused.
| Property | Base colour | Complementary colour |
|---|---|---|
| Hue | Original value | Original value plus 180, wrapped at 360 |
| Saturation | Original value | Identical to base |
| Lightness | Original value | Identical to base |
| Contrast with base | None, it is the base | Maximum possible hue contrast |
How to find a complementary colour
- 1
Enter your base colour
Type or pick the hex code you want to find the complement of.
- 2
View the generated complement
The colour 180 degrees opposite in hue appears immediately beside your base colour.
- 3
Compare the HSL values
Check that hue differs by exactly 180 degrees while saturation and lightness stay matched.
- 4
Copy hex, RGB or HSL
Copy either colour in whichever format your stylesheet or design tool needs.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the complementary color generator.
A complementary colour is the colour sitting exactly 180 degrees opposite another on the HSL colour wheel, sharing the same saturation and lightness but with hue rotated halfway around. It is the single colour that produces the strongest possible hue contrast against a given starting colour.
It converts the input hex colour to HSL, adds 180 to the hue value, wraps the result back into the 0 to 360 degree range if needed, and converts the rotated HSL value back to hex and RGB. Saturation and lightness are left untouched, so only the hue itself changes.
Complementary pairs sit at maximum hue contrast by definition, which produces a visual effect called simultaneous contrast where each colour intensifies the other. That effect is strongest at high saturation and works well for a small accent, but the same pair spread across large, equally weighted areas can look harsh or fatiguing.
A color complement calculator focuses on exactly one relationship, the single hue 180 degrees from your input. A full palette generator typically also offers analogous, triadic, tetradic and monochromatic schemes, which are useful when a project needs more than one supporting colour rather than a single high contrast pair.
Yes, the rotation is applied to any valid hue regardless of saturation, though a very low saturation input will produce a complement that looks nearly identical to the original, since hue has little visible effect once a colour is close to grey. The mathematical relationship still holds even when the visual difference is subtle.
On a standard complementary color wheel, the two colours in a pair sit at exactly opposite points, 180 degrees apart, so a line drawn through the centre of the wheel connecting them would pass directly through the middle. Any two hues at that opposite position qualify as a complementary pair regardless of their saturation or lightness.
You can, but a background applied at the same saturation as an accent color usually reads as too intense for large areas or body text. A common approach is to keep the accent at full saturation and lighten or desaturate the complement significantly before using it as a background, which keeps the relationship without the visual fatigue.