Harmonious palettes from a single color
Color harmonies are combinations based on positions on the color wheel. Complementary colors sit opposite each other for strong contrast, analogous colors sit side by side for calm schemes, and triadic colors are evenly spaced. This tool builds each harmony from your base color and shows the text contrast of every swatch.
How to use it
- Pick a base color, type a HEX value or press Random color.
- Switch between harmonies and compare the palettes.
- Copy any color as HEX, RGB or HSL, or export the whole palette as CSS variables.
Frequently asked questions
What does the contrast value mean?
It is the WCAG contrast ratio between the color and white or black text. A ratio of 4.5:1 or more (AA) is recommended for body text, and 3:1 for large text.
Why do greys give almost identical palettes?
Harmonies rotate the hue. Greys have little or no saturation, so rotating the hue barely changes them. Start from a more saturated color for richer palettes.