Color Palette Generator
Turn one color into a useful accessible palette and export it as CSS.
Your privacy is safe, this tool runs entirely in your browser. Nothing you enter is uploaded to or stored on our servers.
More Developer Tools
How to use Color Palette Generator
- 1Choose a base color or enter a hex value.
- 2Generate a balanced set of shades.
- 3Check text contrast on the base color.
- 4Copy individual colors or export CSS variables.
From Brand Color to Production Tokens
Build a consistent light-to-dark scale from a single brand color. Every swatch is copyable, contrast is checked against white and black, and the complete scale exports as reusable CSS variables.
Frequently asked questions
How is the palette generated?
The tool converts the base color to HSL and builds useful light-to-dark shades by adjusting lightness.
Does it check accessibility?
Yes. It calculates WCAG contrast ratios against white and black text and recommends the stronger option.
Can I export the colors?
Yes. Copy one shade or download the full palette as CSS custom properties.
Are colors saved?
No. The palette is generated locally and is not stored.