Complementary Color Generator
Find the complementary color for any hex color.
This tool runs entirely in your browser. Your files are never uploaded to a server.
Base
#3b82f6
Complementary
#f6af3b
What this generator does
Creates a two-swatch palette from a base HEX color and its HSL complement. The second color keeps the converted saturation and lightness while rotating hue by 180 degrees around the color wheel.
How to use it
Choose a color with the picker or enter a three- or six-digit HEX value, with or without a leading #. The tool normalizes the base to a lowercase six-digit HEX code and lets you copy either swatch.
Worked example
The default #3b82f6 is converted from RGB to HSL, its hue is shifted by 180°, and the result is converted back to RGB and HEX. Small channel differences can occur because the final RGB values are rounded.
Method used
Complementary hue = base hue + 180° modulo 360°. Saturation and HSL lightness are preserved. For grayscale colors, saturation is zero and hue has no visible effect, so the generated complement remains the same shade of gray.
Contrast and color limits
Opposite HSL hues do not guarantee a particular WCAG contrast ratio or equal perceived brightness. The tool does not account for alpha, color profiles, print gamuts, color-vision differences, or the surrounding colors in a design.
Practical use and privacy
Use the pair as a starting point for accents, then test it in context and check text contrast separately. The conversion runs locally in your browser and entered colors are not uploaded.
Frequently Asked Questions
- What is a complementary color?
- It's the color directly opposite your base color on the color wheel (180° away in hue) — pairing them creates strong visual contrast.
- When should I use complementary colors?
- They work well for call-to-action buttons, accents or anywhere you want an element to stand out against its surroundings.
- Is this the same as analogous colors?
- No — analogous colors sit next to each other on the wheel for a harmonious look, while complementary colors sit opposite for contrast.