How to use
- The page automatically displays 5 random colors when loaded.
- Press Spacebar or the New Palette button to generate new combinations.
- Click the lock icon to keep a color (locked colors are preserved in next combinations).
- Click any color swatch to copy its HEX code to clipboard.
- Use Copy as CSS Variables to export the entire palette as
:rootCSS variables.
Key features
- Instant new palette via Spacebar or button click
- Per-color lock โ locked colors stay, unlocked ones refresh
- One-click HEX code copy
- Export entire palette as
:rootCSS variables - Completely free, no sign-up, all processing in your browser
Use cases
- Web ยท app design mockups โ quickly explore color moods
- Brand colors โ visualize main and secondary color candidates
- Data visualization โ pick category colors for charts and graphs
- Slides ยท presentations โ build a unified color palette
- Illustration ยท artwork โ explore color combinations for inspiration
Color palette theory
In design, 4โ5 color combinations typically achieve visual balance and clear hierarchy. A common structure is 1 main, 1โ2 secondary, 1 accent, and 1 neutral color. This tool generates 5 colors at once following this principle.
Frequently asked questions
How are the generated colors chosen?
In HSL color space, Hue is picked randomly from 0โ360ยฐ, Saturation is constrained to 55โ90%, and Lightness to 45โ70%. This avoids overly dark or washed-out colors and produces visually distinct combinations.
Can I save and reuse the same palette?
Make a note of each HEX code and you can reuse it in any other tool. While working, lock the colors you like to preserve them across new combinations.
Why 5 colors by default?
4โ5 colors give enough visual hierarchy without becoming overwhelming. It matches the recommended color token count in most UI and branding guidelines.
Can I use these colors commercially?
Yes โ colors themselves aren't copyrightable. The HEX codes generated are free to use, modify, and redistribute, including in commercial projects.