Color Palette Generator
Need a color mood? Discover a playful set of five colors, lock your favorites and keep exploring.
A fresh splash of color.
Tip: Press your space bar to generate a new palette.
Good to know ✳
Every palette is generated by your browser from a coordinated range of hues. Keep a swatch locked and the next generation will leave it untouched. HEX codes work in most design and CSS tools.
✳ LEARN BY DOING
How to use this tool
- Generate five related HEX colors using New palette.
- Lock a favorite swatch, then regenerate to explore the remaining colors.
- Copy individual HEX values or all five and try them in your design.
Practical example: Plan a dashboard design
Keep one primary action color, a quiet background, a softer surface color and a restrained accent. Avoid using five highly saturated shades as equal-priority text colors.
Important limitation: Harmonious colors do not guarantee readable text. Test actual foreground/background contrast; WCAG AA commonly uses 4.5:1 for normal text.
Frequently asked questions
What does a locked swatch do?
It stays unchanged during subsequent generations until you unlock it.
Can I paste these values into CSS?
Yes. A copied HEX code can be used in a declaration such as --accent: #7056F7;.
Are generated palettes accessible by default?
No. Always check contrast, focus states and color-vision accessibility separately.