Color Palette Generator
Generate harmonious color palettes from a single seed color. Pick a scheme, copy HEX values one at a time or all together as a CSS custom-property block.
Scheme
Palette
About color harmonies
Complementary — the seed and its opposite on the color wheel (180° apart). High contrast, used for accents.
Analogous — three neighboring hues (±30°). Calm, harmonious, good for backgrounds.
Triadic — three colors evenly spaced (120° apart). Vibrant but balanced.
Tetradic — four colors in two complementary pairs (90° apart). Rich variety, best when one color is dominant.
Monochromatic — a single hue with varying saturation and lightness. Cohesive, great for minimal designs.
Tints & shades — the seed lightened and darkened. Useful for elevation systems (think Material/iOS).
Frequently asked questions
What color schemes can I generate?
From a single seed color you can build complementary, analogous, triadic, tetradic, monochromatic, and tints & shades palettes — each derived by rotating or adjusting the seed on the color wheel.
What is the difference between complementary and triadic?
Complementary uses the seed plus its opposite (180° apart) for high contrast, while triadic uses three colors evenly spaced 120° apart for a vibrant but balanced result.
Can I export the palette to my code?
Yes. Click any swatch to copy its HEX value, or use Copy as CSS variables to grab the whole palette as a ready-to-paste block of CSS custom properties.
How do I set the starting color?
Type a HEX value or use the color picker swatch — and Surprise me drops in a random seed so you can explore harmonies quickly.
Related tools
- CSS Box Shadow Design box shadows visually and copy the CSS to your clipboard.
- CSS Gradient Build linear and radial gradients with live previews and code output.
- CSS Flexbox Generator Interactive flexbox playground with copy-ready CSS output.
- JWT Decoder Decode header, payload, and signature with expiry status checks.