Guide
How to choose a color palette for a website
Choosing website colors is easier when you think in roles, not just shades. Here is a simple system that works for almost any site.
Think in roles
Instead of picking “nice colors,” assign each color a job: a background, a surface for cards, a readable text/ink, a primary for links and buttons, and one accent for highlights. Five roles cover most websites.
Start with one color
Pick a primary that fits your brand’s personality, then build everything else around it. Use the palette generator to find harmonious supports.
Reserve the accent
Use your loudest color sparingly — only for important actions and small highlights. If everything is accented, nothing stands out.
Check contrast
Confirm body text reaches at least 4.5:1 against its background with the contrast checker before you commit.
Build shades
Expand each role into a few tints and shades for hover, active, and border states using the shade & tint generator.
Frequently asked questions
How many colors should a website use?
A five-role system — background, surface, text, primary, and accent — works for most sites, with tints and shades for states.
Should I use trendy colors?
Trends can date quickly. Favor colors that fit your brand and pass contrast; use trends as accents, not foundations.