How to generate a color palette
- Press Generate or the space bar to create a new five-color palette.
- Like a color? Tap its 🔓 to lock it, then keep generating: locked colors stay put.
- To build around your brand color, pick it as the Base and choose a harmony such as complementary or analogous.
- Tap any swatch to copy its hex code, or export the whole palette as CSS variables, SCSS, a Tailwind config, JSON or a PNG image.
Color harmonies
Harmonies are positions on the color wheel that tend to look good together. Analogous colors sit next to each other (blue, blue-green, green) and feel calm. Complementary colors are opposite (blue and orange) and give strong contrast for call-to-action buttons. Split complementary uses the two neighbours of the opposite color, softer than a direct complement. Triadic and tetradic spread three or four hues evenly for lively, playful designs. Monochromatic palettes use one hue in different lightness, which is foolproof for minimal interfaces.
The random mode spreads lightness from dark to light across the five colors, so every palette includes a usable text color, background and accents. A common way to apply a palette is the 60-30-10 rule: 60% a neutral or light color, 30% a secondary color and 10% a bold accent. Always check text and background pairs with the contrast checker.
Palettes are generated in your browser; your last palette is remembered on this device.
How do I keep one color and change the rest?
Lock it with the padlock button, then press Generate. Only unlocked colors change.
Can I use these palettes commercially?
Yes. Colors cannot be owned, and the palettes are generated on your device for you to use freely.
How do I get lighter and darker versions of a color?
Use the color converter or the Tailwind shades generator, which produce a full scale from one color.