What is color harmony?

Color harmony refers to combinations of colors that are visually pleasing together, based on their positions on the color wheel. Common types include complementary (opposite colors), triadic (three equally spaced colors), analogous (adjacent colors), and tetradic (four colors forming a rectangle). Using harmonious colors creates visual balance in design.

What is a complementary color?

A complementary color is the color directly opposite a given color on the color wheel — exactly 180 degrees away in hue. The complement of blue is orange, and red's complement is cyan. Complementary pairs create maximum contrast, making them ideal for highlighting elements in a design.

What is the difference between triadic and tetradic color schemes?

A triadic scheme uses three colors equally spaced 120 degrees apart on the color wheel, creating vibrant, balanced contrast. A tetradic (square) scheme uses four colors arranged as two complementary pairs, 90 degrees apart. Tetradic schemes offer more variety but need careful balance to avoid visual overload.

How do I use the exported CSS variables?

Click Export CSS to get a :root block with named CSS custom properties for each color. Paste it into your stylesheet and reference colors with var(--harmony-1), var(--harmony-2), etc. The Tailwind export gives a colors object you can paste directly into your tailwind.config.js extend section.

6 Harmony Types

Color Harmony
Generator

Pick any base color and instantly see complementary, triadic, analogous, split-complementary, tetradic, and monochromatic schemes. Copy hex values or export as CSS variables and Tailwind config.

🎨

6 Harmony Types

Complementary, triadic, analogous, split-complementary, tetradic, and monochromatic — all computed in real time.

📋

Copy Any Format

Click any swatch to copy its hex, HSL, or RGB value. Export the full scheme as CSS variables or Tailwind config.

⚡

100% Client-Side

All color math runs in your browser. No server, no uploads, no account needed.

Base Color

HSL(330, 81%, 60%)

Complementary

2 colors

Two colors directly opposite on the color wheel (180° apart). High contrast, vibrant.

Base

··

Complement

··

All Schemes at a Glance

Frequently Asked Questions

Everything you need to know about Color Harmony Generator.

Color HarmonyGenerator

6 Harmony Types

Copy Any Format

100% Client-Side

Complementary

Frequently Asked Questions

Color Harmony
Generator