The five roles a site needs
Palettes often come as five pretty swatches with no instructions. A website needs colors with jobs. The builder uses five roles:
| Role | Job | Typical share of the page |
|---|---|---|
| Primary | buttons, links, active states, the brand moment | 5–10% |
| Secondary | header, footer, sidebars, large brand areas | 10–30% |
| Accent | badges, highlights, chart series, small alerts | under 5% |
| Neutral | body text and icons | all text |
| Surface | page and card backgrounds | 60% or more |
Fill in each role with a HEX code or the picker, or set only the primary and press Suggest the rest from primary. The suggestion keeps your primary and builds a dark secondary from a hue about 200° away, a lighter accent 150° away, a near-black neutral and an off-white surface tinted with your primary's hue. It's a starting point; change anything you like.
Live mockups
Two mockups repaint as you change colors:
- Landing page: navigation bar, a "new" badge, headline, body copy, a primary button, a text link and three feature cards on a soft tint of the primary.
- Dashboard: a sidebar, stat cards, a two-line chart using primary and accent, and an action button.
Tick Dark mode preview to see a derived dark theme. The surface becomes a very dark version of its own hue, the neutral becomes a light text color, and the primary is lifted to at least 68% OKLCH lightness so it stays visible on dark backgrounds. That mirrors what most design systems do. Brand colors that work on white are often too dark on near-black.
The contrast audit
The table checks six pairings against WCAG 2.2:
| Pairing | Required |
|---|---|
| Text on surface | 4.5:1 |
| Primary used as text (links) on surface | 4.5:1 |
| Button text on primary | 4.5:1 |
| Text on secondary | 4.5:1 |
| Accent on surface, as a non-text element | 3:1 |
| Text on accent | 4.5:1 |
For button and badge text, the audit uses whichever of white or near-black reads better on that color, which is what you'd normally choose. The audit follows the dark-mode toggle, so you can check both themes.
The most common failure is primary as link text. A mid-tone brand color often works as a button background with white text and fails as text on white. The fix is usually a darker variant of the primary for links, such as a 700 step from the Tailwind color generator.
Choosing colors that work
- Start with surface and neutral. They cover most of the screen, so get them comfortable first. Pure
#FFFFFFand#000000are harsh. A slightly warm or cool off-white with a soft near-black is easier on the eyes. - One primary. If everything clickable shares one color, people learn what to click.
- Keep the accent rare. If it's everywhere, it's no longer an accent.
- Use the secondary for structure, such as the header and footer, so the primary can stand out.
- Check states. Hover, focus and disabled states need shades of these roles. The monochromatic color scheme generator builds them from one color.
Export
The export box gives you the five roles as CSS variables, SCSS, Tailwind v4 @theme or v3 config, JSON, W3C design tokens or an SVG, plus a PNG swatch card. Variables are named after the roles (--primary, --surface and so on), which keeps your stylesheet readable when the brand changes.
Related tools
To explore palettes before assigning roles, use the palette generator. To test any pair in detail, including APCA, use the contrast checker. For three evenly spaced hues, see the triadic scheme generator, and for dark-theme ideas browse dark colors.
FAQ
How many colors should a website have?
Usually three to five brand colors plus neutrals. More than that is hard to keep consistent. Charts and illustrations are the exception and can use a wider set.
Should the logo color be the primary?
Often, but not always. Some logo colors are too light or too saturated for buttons and text. Use the logo color as the secondary or accent, and pick a more usable primary.
Does the dark mode preview change my exported colors?
No. Export always uses the light-theme values you entered.