Generator
Website color palette generator
Generate a complete website color palette — background, surface, text, primary, and accent — ready to drop into CSS or Tailwind.
Roles for a website palette
- Background — the page canvas, usually light and quiet.
- Surface — cards and panels, a step from the background.
- Text / ink — high-contrast body color.
- Primary — links and main buttons.
- Accent — highlights and secondary actions.
Generate, assign roles, verify contrast, and export. Browse SaaS, ecommerce, and portfolio palettes for inspiration.
Check pairings with the contrast checker or browse ready-made collections.
Frequently asked questions
How many colors does a website need?
A five-role system — background, surface, text, primary, and accent — covers most websites, with tints and shades for states.
Where do I use the accent color?
Reserve it for important actions and small highlights so it keeps its impact and the page stays easy to scan.