What is a complementary color?

A complementary color is directly opposite on the color wheel (180° away in HSL hue). Pairing complementary colors creates high contrast and visual tension that draws attention.

When should I use a triadic palette?

Triadic palettes (three colors evenly spaced at 120°) work well when you want vibrant, balanced designs with variety. They're common in logos and illustrations.

What is the difference between analogous and monochromatic?

Analogous uses adjacent hues on the color wheel (±30°), creating a harmonious family of related colors. Monochromatic stays on a single hue but varies lightness and saturation for a cohesive, subtle palette.

How do I use the CSS export?

Click Export CSS Variables to copy a :root {} block with named custom properties like --complementary-1, --triadic-1, etc., ready to paste into your stylesheet.

Design Gratis Sin registro

Color Harmonics

Generate complementary, triadic, and other color palettes from any base color.

Cargando la herramienta…

Acerca de esta herramienta

Color Harmonics takes a single base color and derives six scientifically-grounded color palettes using standard color theory relationships. Pick any color with the hex picker and instantly see Complementary (180° opposite), Split-Complementary (150°/210°), Triadic (120° intervals), Tetradic (90° intervals), Analogous (±30°), and Monochromatic (same hue, varied lightness) palettes. Each palette displays labeled swatches with hex codes. Click any swatch to copy its hex code, or export the full palette set as CSS custom properties or a JSON object for use in your design system.

Cómo usar

1 Click the color picker or type a hex code to set your base color.
2 Browse the six generated palettes displayed as labeled swatches.
3 Click any swatch to copy its hex code to the clipboard.
4 Click Export CSS Variables to copy all colors as CSS custom properties.
5 Click Export JSON to copy all palettes as a structured JSON object.
6 Try different base colors to explore the full color wheel.

Preguntas frecuentes

Herramientas relacionadas

Gradient Mesh Generator

Create stunning CSS mesh gradients with draggable control points.

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.