Color Harmony Generator — Complementary, Triadic, Analogous
Generate a palette from any base color using 7 classic color-theory schemes: complementary, analogous, triadic, tetradic, split-complementary, square, and monochromatic.
Runs 100% in your browser — nothing is uploaded.
Harmony scheme
Two colors opposite on the wheel. High contrast, vibrant.
Frequently asked
Which scheme should I pick?
Complementary for high contrast (single CTA on a hero), analogous for calm gradients and backgrounds, triadic for playful multi-brand UIs, monochromatic for elegant single-hue systems.
What color space is used?
HSL. Hue offsets are computed on the color wheel; saturation and lightness are preserved so the palette feels cohesive.
Does it export to Tailwind / CSS?
The generated hex codes copy directly into your Tailwind config or CSS variables. There is no proprietary export format.
Related tools
- Color ConverterPaste any color in hex, rgb(), rgba(), or hsl() and get it in every other format
- CSS Gradient GeneratorDesign linear, radial, and conic CSS gradients with unlimited color stops. Live
- Color Blindness SimulatorSimulate how your colors look to people with color vision deficiency (CVD). Cove
- Contrast CheckerTest any foreground/background color pair against WCAG 2.2 contrast rules. Shows
- CSS Color NamesBrowse all 147 CSS3 named colors. Look up a color name from a hex code, or find