# Color Harmony Generator

> Pick a base color and instantly see its complementary, analogous, triadic, tetradic, split-complementary and monochromatic palettes.

Generate complementary, analogous, triadic, tetradic, split-complementary and monochromatic palettes free, with HEX, HSL, OKLCH, CSS variables and JSON export.

- **Canonical:** https://www.ailovekit.com/design/color-harmony-generator/
- **Category:** Color & Design Tools
- **Processing:** Runs entirely in your browser. Files are never uploaded to AiLoveKit servers.

## Every Classic Harmony, One Base Color

AiLoveKit's **color harmony generator** rotates your base color around the HSL wheel to build all six classic schemes in a single view. Each swatch shows its HEX plus HSL and OKLCH values, and one click copies it.

## Schemes Included

- **Complementary** - the color opposite on the wheel, with lighter and darker steps.

- **Analogous** - five neighbors for calm, cohesive designs.

- **Triadic** and **Tetradic** - evenly spaced three- and four-color systems.

- **Split-Complementary** and **Monochromatic** - contrast without tension, and single-hue depth.

Export everything as CSS custom properties, a JSON file with HEX, RGB, HSL and OKLCH for every color, or a palette image - generated instantly and entirely in your browser.

## Frequently Asked Questions

**Which color schemes are supported?**

All six classic harmonies: complementary, analogous, triadic, tetradic, split-complementary and monochromatic - view them all at once or one at a time.

**What is a tetradic palette?**

Four colors made of two complementary pairs spaced 90 degrees apart on the color wheel. It is rich and balanced, and works best when one color leads and the others support.

**What can I export?**

Copy per-scheme CSS variables, all six schemes as CSS custom properties or a JSON file with HEX, RGB, HSL and OKLCH values, or download a palette image.

---

Source: https://www.ailovekit.com/design/color-harmony-generator/
Part of AiLoveKit: https://www.ailovekit.com/
Machine-readable index: https://www.ailovekit.com/llms.txt