Gerador de paleta de cores

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.

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.

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.

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.