Complementary Color Palette
Choose a base color: its complement (opposite at 180° on the color wheel) is calculated automatically, along with light and dark shades of both hues. 100% local processing in your browser — nothing is sent to a server.
How It Works
On the color wheel, a complementary color is the one located exactly opposite the base color (180° hue difference). Together, these two hues create strong visual contrast, widely used in design to make an action button, logo, or key element stand out against a background of the opposite color. This tool calculates the exact complement, then breaks each hue into a darker and a lighter version, giving you a ready-to-use mini palette.
Why use a complementary palette instead of a palette of nearby hues?
A palette of nearby hues (analogous) gives a harmonious, subtle mood, while a complementary palette deliberately creates visual tension and draws the eye. It works well for a call-to-action button, notification badge, or any element that needs to stand out clearly from the rest of the interface.
How should I use the generated light and dark shades?
Dark shades work well for text or hover/active states, while light shades are useful for section backgrounds, disabled states, or subtle badges — all while staying in the same hue family as the main color or its complement.
All color computation (HEX/HSL conversion, hue rotation) runs locally in JavaScript, directly in your browser.