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
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.