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 Free No signup

Color Harmonics

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

Loading tool…

About this tool

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.

How to use

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.

Frequently Asked Questions

Related tools

Gradient Mesh Generator

Create stunning CSS mesh gradients with draggable control points.

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.