Color Palette Generator
Type a HEX color and get five color-theory palettes: complementary, analogous, triadic, tetradic, and monochromatic. Use for design systems, brand colors, and illustration.
How to Use
Use the color picker or type a HEX value. All palettes are derived from it.
Complementary (180°), analogous (±30°), triadic (120°), tetradic (90°), or monochromatic (lightness variation). Computed via HSL hue rotation.
Click any swatch to copy its HEX. Use "Copy CSS variables" to grab the whole palette as design tokens.
FAQ
What does "harmony" mean here?
In color theory, colors at specific angles on the color wheel feel visually harmonious together. The tool rotates the Hue in HSL space by those angles to produce each palette.
How do the five modes differ?
Complementary (180°) gives bold contrast. Analogous (±30°) is calm and continuous. Triadic (120°) is balanced and lively. Tetradic (90°) brings four-color richness. Monochromatic varies lightness on the same hue for restrained consistency.
Why HSL rotation instead of RGB averaging?
HSL is closer to human color perception, so rotating Hue keeps lightness and saturation perceptually similar across the palette. Naive RGB blends often desaturate or feel off.
How do I use it in real projects?
Copy the CSS variables and drop them into your stylesheet as design tokens. Or paste HEX values into Figma / Adobe XD. Verify accessibility separately (see this site's "WCAG color contrast checker").
Is anything sent to a server?
No. Everything runs in your browser; nothing leaves the page.
