Complementary color generator
A complementary color is directly opposite your base color on the color wheel, separated by exactly 180 degrees of hue. Complementary pairs create maximum contrast and visual energy. Enter any color to instantly see its complement, plus both colors in hex, RGB, and HSL formats. All calculations run locally in your browser.
PALETTE TYPE
How it works
All color calculations use the HSL (hue, saturation, lightness) color space. The base color is converted from hex to HSL, and the hue is rotated by a fixed amount depending on the palette type (complementary: 180deg, triadic: 120deg/240deg, etc.). The adjusted hue values are converted back to RGB and then to hex for display. All arithmetic runs in JavaScript in your browser.
Processing runs in your browser
All processing happens locally in your browser tab. Our servers are not involved at any point.
Related operations
For lightening or darkening a single colour, try tints and shades. To convert any chosen swatch between HEX, RGB, and HSL, use the colour converter. For testing readable text colours on your palette, see the contrast checker.
Frequently asked questions
- What is a complementary color?
- A complementary color is directly opposite on the color wheel (hue rotated 180°). On the RGB color wheel this tool uses, red's complement is cyan, green's complement is magenta, and blue's complement is yellow. Complementary pairs create strong visual contrast.
- When should I use complementary colors?
- Complementary palettes are ideal for high-contrast designs: call-to-action buttons, warning indicators, sports branding, or anywhere you want two colors to stand out against each other. Avoid using them in equal amounts as they can feel jarring.
- How is a complementary color calculated?
- Convert the base color to HSL, add 180 to the hue value (wrapping around at 360°), and keep saturation and lightness the same. The resulting color is the complement.
- Is my data sent to a server?
- All calculations run locally in your browser. No data is sent to our servers.