Design & Colour
Complementary Colour Finder
Enter a hex colour to see its complement (hue + 180°) and a preview pair.
What is a complementary colour?
A complementary colour sits opposite on the wheel: convert HEX to HSL (hue, saturation, lightness), add 180° to hue, and convert back. Complements create strong visual contrast for accents, charts and branding pairs — but opposite hue does not guarantee readable text. Always check contrast before putting small type on a complementary field. Saturation and lightness are preserved in this simple model, so neon bases stay neon when flipped. Soften or shade the result with colour shade, and test text pairs with accessible colour pair.
Worked example
Default #E85D04 (a saturated orange) maps to a complementary near cyan-blue after hue + 180°, with the same saturation and lightness.
Limits and assumptions
HSL complement only — not a full palette generator (triads, split-complements, etc.). Always verify contrast for text.
Frequently asked questions
What is HSL?
Hue, saturation, lightness — a cylindrical colour model. Hue is the angle on the colour wheel; complements are 180° apart.
Is the complement good for body text?
Often not. High-saturation opposites can vibrate. Check WCAG contrast or use the accessible pair tool.
Does HEX input need a #?
Either with or without # works; six hex digits are expected (three-digit shorthand is expanded).
Why keep saturation and lightness unchanged?
This tool flips hue only so you see a true wheel opposite; adjust shade separately if the pair feels too loud.