19 July 2026

How to Pick a Website Color Palette (5-Token Method)

The short answer

Pick a website palette with five tokens: a background (near-white or near-black, never pure), a surface color one step away from it for cards, a text color with strong contrast (dark grey, not pure black), a muted text color for secondary copy, and exactly one accent used only for actions and highlights. Roughly 90% of the page is background/surface/text; the accent stays under 10%. One accent, used sparingly, looks more premium than five colors used bravely.

Amateur palettes fail from too much, not too little: five brand colors all fighting for attention. Professional sites are mostly neutral with one color doing all the pointing. The five-token method encodes that discipline.

The five tokens

background: near-white (#fafafa-ish) or near-black (#0a0a0a-ish) — pure #fff/#000 feels harsh
surface: one step off the background, for cards and panels — depth without borders
text: high contrast but softened — #1a1a1a on light, #ededed on dark
muted: secondary text at comfortable contrast for captions and labels
accent: one saturated color, reserved for buttons, links and key highlights

How do you choose the accent?

Start from meaning, then adjust for contrast: the accent must pass readable-contrast against your background since it will sit on buttons (aim for the WCAG AA ratio of 4.5:1 for text-sized uses). Test it in both a filled button and as link text before committing. If your brand already has a color, use it; if not, pick one and stay consistent — consistency reads as branding more than the specific hue does.

Look at any site that feels expensive: acres of calm neutrals, then one color marking exactly what to click. That restraint is learnable. The Premium Website Masterclass builds this token system into a repeatable workflow — including dark-mode variants and how to extend five tokens when a project genuinely needs more. To see the method applied, the Cobalt SaaS template runs on exactly this kind of restrained token palette, and swapping its accent to your brand color is a one-line CSS change.