Complementary Color
Generate a complementary pair by moving the base color's HSL hue about 180 degrees around the color wheel.
How to use
- Enter a base HEX and compare it with the complementary swatch.
Capabilities and scope
harmonyColors(base,'complement') is shown with a harmony wheel and copyable CSS variables.
How it works
The color is converted to HSL, the opposing hue is calculated, and results are converted back to HEX.
Example
A green base can pair with a magenta/red-family opposing hue.
Useful for
- Explore strong two-color accent combinations
Before you use it
- Color-wheel complementarity does not guarantee brand fit, readability, or color-vision accessibility.
Frequently asked questions
Will the pair automatically pass text contrast?
No. Test the actual foreground/background pair in Contrast Checker.