Live
CSS Gradient Generator
Design linear and radial gradients visually.
Design · Free tool
Color Palette Generator
Pick one seed color, choose a harmony rule, and get a five-color palette you can use immediately — every click instantly refreshes the CSS custom properties.
Build a palette
Type a hex value for a precise seed
Palette
How it works
Understanding harmonies
Hue is the seed
Every color carries three numbers: hue (the color itself), saturation (how intense), and lightness. This tool reads your hex, converts to HSL, and rotates the hue to build the palette.
Rules describe relationships
Complementary is the color 180° away. Analogous steps 30° in either direction. Triadic takes every 120°. Shades and monochromatic instead walk up and down lightness only.
Copy straight into CSS
The output panel is valid CSS custom properties — paste the whole thing into a :root rule, then use var(--c1) through var(--c5) anywhere.
Questions
Palette generator FAQ
What is a color harmony?
A fixed mathematical relationship between hues. Complementary = 180° apart, analogous = close neighbors, triadic = evenly spaced thirds. They are the classic starting rules of color design.
How do I copy a single color?
Click any swatch in the preview — it copies that hex value (uppercase) to your clipboard. To grab the whole scheme, use Copy CSS for the custom-property block.
Why is my palette reversing hue?
Analogous shades walk both directions around the wheel. Because hue is circular, a palette can wrap past 360° — that is expected and correct for how the wheel works.