Complementary Colors & Palettes

Start from a base color and get its complementary, triadic, tetradic, analogous, and split-complementary schemes. Click any swatch to copy its hex code.

Complementary

Triadic

Tetradic

Analogous

Split-complementary

🔒 Everything runs in your browser: no data is sent or stored.

How these color schemes work

Every scheme is built by rotating the hue around the color wheel. The complementary color sits directly opposite (180°): maximum contrast, perfect for making a button or a detail stand out. A triadic scheme takes three colors spaced 120° apart, and a tetradic scheme four colors at 90°: lively yet balanced palettes. Analogous colors (±30°) sit next to each other and feel harmonious and calm, while split-complementary colors (150° and 210°) deliver the punch of the complementary in a softer, easier-to-handle version.

Practical tips for using a palette

The simplest rule of thumb is 60-30-10: one dominant color for about 60% of the composition (usually the most neutral one, or your base), a secondary color for 30%, and the boldest one for just 10% — accents and calls to action. If you use these colors for text, always make sure the text/background pair stays readable: you can test it with our WCAG contrast checker.