A complementary colour sits directly opposite on the colour wheel, 180° of hue away. Enter a hex code and the finder rotates the hue while keeping saturation and lightness, so #3366CC, a blue at 220°, returns #CC9933, a gold at 40°. Split-complementary and triadic partners are listed too.
Designers reach for a complement when an accent has to stand out against a main brand colour: a call-to-action button, a chart highlight, a badge. This finder takes one hex code, converts it to HSL, turns the hue half way round the wheel and converts back, so the partner keeps the same saturation and lightness as the original. A short table adds the two split-complementary colours (150° and 210° away) and the two triadic colours (120° and 240° away) for when a straight opposite feels too loud. One limit: HSL is not perceptually even, so a complement can look brighter or darker than its base even at the same lightness value, and text contrast still needs its own check.
Type a three- or six-digit hex value such as #3366CC or 36C; the # sign is optional.
The headline result is the opposite colour in hex, with its RGB value and hue beside it.
The table lists split-complementary and triadic partners with their hex codes and hues.
Result Complementary colour: #00FFFF
Base colour: #FF0000
Complement in RGB: rgb(0, 255, 255)
Base hue (°): 0
Complement hue (°): 180
HSL saturation: 100%
HSL lightness: 50%
Pure red sits at 0° on the colour wheel, so its opposite at 180° is pure cyan.
Result Complementary colour: #CC9933
Base colour: #3366CC
Complement in RGB: rgb(204, 153, 51)
Base hue (°): 220
Complement hue (°): 40
HSL saturation: 60%
HSL lightness: 50%
The blue at 220° pairs with a mustard gold at 40° with the same saturation and lightness.
Result Complementary colour: #FF00FF
Base colour: #00FF00
Complement in RGB: rgb(255, 0, 255)
Base hue (°): 120
Complement hue (°): 300
HSL saturation: 100%
HSL lightness: 50%
Three-digit hex expands to #00FF00, pure green, whose complement is magenta.
H′ = (H + 180) mod 360, with S and L unchanged
HH′S, LThe hex code is read as red, green and blue from 0 to 255 and converted to hue, saturation and lightness with the CSS Color Level 4 formulas. The hue is rotated by 180° and the colour converted back to RGB and hex. In RGB terms this equals subtracting each channel from the sum of the largest and smallest channel. Split-complementary partners use 150° and 210°, triadic ones 120° and 240°.
Screens mix light from red, green and blue, and on that RGB-based wheel red sits at 0° and cyan at 180°. Green as red's opposite comes from the traditional red-yellow-blue painter's wheel, which is a different model.
Greys have no hue, so turning the hue changes nothing and the complement is the same grey. The finder shows a warning in that case. Pick a colour with some saturation to get a distinct partner.
Inversion subtracts every channel from 255, so #3366CC becomes #CC9933 only by coincidence; #333399 inverts to a pale #CCCC66, whereas its complement keeps the same dark lightness and comes out as #999933.
They are the two hues on either side of the direct complement, 150° and 210° from the base. The pairing keeps strong contrast but is easier to balance than a straight opposite.
This finder reads hex codes only, in three- or six-digit form. The steps show the RGB and HSL values it derives, and the scheme table gives every partner in hex for pasting into CSS or design software.
Using this tool in an assignment, article or report? Copy a citation, or a link for your website.
Tools Directory Editorial Team. (2026, October 17). Complementary Color Finder. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-palettes-and-schemes/complementary-color-finder/
Tools Directory Editorial Team. “Complementary Color Finder.” Tools Directory, 17 Oct. 2026, https://tools.milunir.com/design/color-palettes-and-schemes/complementary-color-finder/. Accessed 26 Oct. 2026.
Tools Directory Editorial Team. “Complementary Color Finder.” Tools Directory. Last modified October 17, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-palettes-and-schemes/complementary-color-finder/.
<a href="https://tools.milunir.com/design/color-palettes-and-schemes/complementary-color-finder/">Complementary Color Finder – Tools Directory</a>