Color harmonies explained
Use the 60-30-10 rule: 60% of the design in a neutral or main color, 30% in a secondary color and 10% in an accent.
Check text readability with the contrast check in the color converter.
Frequently asked questions
What is a complementary color?
The color directly opposite on the color wheel (180° away), such as orange and blue. Complementary pairs create strong contrast, which makes them good for calls to action, but they can feel loud in large areas.
Which palette type should I use for a website?
Monochromatic and analogous palettes feel calm and professional. A common approach is one main brand color, a complementary accent for buttons and links, and neutral grays for text and backgrounds.
How are the palettes calculated?
The base color is converted to HSL (hue, saturation, lightness) and its hue is rotated around the color wheel: 180° for complementary, ±30° for analogous, 120° steps for triadic, and so on. Monochromatic palettes vary the lightness instead.
How do I use the CSS export?
Copy the CSS custom properties into your stylesheet's :root and use them anywhere, for example color: var(--color-1). Changing one variable then updates every place it's used.