How to use the color palette generator
- Press the spacebar or the Generate button to create a new palette of five colors.
- Lock any color you like (🔓 → 🔒); it stays put while the others change.
- Choose a scheme — analogous, complementary, triadic, monochrome, pastel or dark — to guide the colors.
- Copy HEX codes by clicking them, copy all colors as CSS variables, or download the palette as a PNG. The page address updates too, so you can bookmark or share a palette.
Color harmony explained
- Analogous colors sit next to each other on the color wheel (for example blue, blue-green and green). They feel calm and cohesive.
- Complementary colors are opposite each other (blue and orange). They create strong contrast — great for call-to-action buttons.
- Triadic palettes use three colors evenly spaced around the wheel for a vibrant yet balanced look.
- Monochrome palettes use one hue at different lightness levels — simple, elegant and easy to get right.
- Pastel and dark modes keep lightness in a narrow range for soft or moody designs.
The 60-30-10 rule
Designers often use one dominant color for about 60% of a design (backgrounds), a secondary color for 30% (cards, sections) and an accent color for 10% (buttons, links). Pick these roles from your palette and the design will feel balanced.
Make sure text is readable
Beautiful colors still need enough contrast for text. Check any text and background pair with the contrast checker to meet WCAG accessibility guidelines.
Start from a photo
Want colors that match a logo, product photo or a landscape you love? Use the image color picker to extract a palette straight from an image.
Frequently asked questions
How do I keep a color I like?
Click the lock icon on that swatch. Locked colors stay the same when you generate a new palette.
Can I use these colors commercially?
Yes. Colors can’t be owned, so you’re free to use any palette for brands, websites and products.
What formats can I export?
HEX codes, RGB and HSL values, CSS custom properties and a PNG image of the palette.
How do I share a palette?
Copy the page address — the colors are saved in the link.