About the Color Palette Generator
Find a color scheme in seconds. Press the space bar for a new palette, lock the colors you like, pick a style such as pastel or monochrome, and export CSS variables, Tailwind theme colors, JSON or a PNG.
Key features
- Press space for a new palette
- Lock the colors you like
- 7 styles, from pastel to earthy
- Edit any color
- Share link and PNG download
- CSS, Tailwind v4 and JSON export
Find colors that work together
Choosing colors from scratch is hard. Generate palettes until one catches your eye, lock the colors you like and keep going until all five feel right. Colors are created in the OKLCH color space, so lightness and saturation look balanced rather than random.
Palette styles
| Style | What you get | Good for |
|---|---|---|
| Random | Anything goes | Inspiration |
| Analogous | Neighboring hues | Calm, cohesive designs |
| Monochrome | One hue, light to dark | Minimal brands, UI |
| Complementary | Opposite hues | Strong accents |
| Triadic | Three evenly spaced hues | Playful, colorful designs |
| Pastel | Soft, light colors | Baby, beauty, wedding |
| Earthy | Browns, greens, sand | Food, nature, outdoors |
Using a 5-color palette
A common split is the 60-30-10 rule: about 60% a neutral background, 30% a main brand color and 10% an accent for buttons and links. Check your text and background pairs with the contrast checker before you publish.
Related tools
Color shades generator, image color picker and CSS gradient generator.
How to use the Color Palette Generator
- Enter a color code, use the picker, or start from a preset.
- Adjust the options; the preview updates instantly.
- Check the result, including contrast and how it looks in context.
- Copy the CSS, Tailwind or HEX code, or download it.