How many colors a website palette needs, and which goes where

Most sites work with one main color that says whose site it is, one or two accents that pull the eye, and neutrals that carry the reading. Each of those becomes several exact values in the CSS: a darker shade for hover, a pale tint for a badge, a transparent version for an overlay. That is why a palette of five can be enough for a site whose CSS holds dozens of colors. More chosen colors make each one weaker; fewer make the main color carry everything.

Charts and status colors (success, warning, error) are the usual exception: they need distinct hues, and they come on top of the brand palette rather than from it.

A common rule of thumb, borrowed from interior design: about 60% of what you see in a neutral or dominant color, 30% in a secondary color and 10% in an accent. On a website the 60 is mostly background and text, the 30 the main color in headers, heroes and buttons, the 10 the accent that marks what matters. It is a starting point to judge by eye, not a measurement to hit; a photo-led shop and a text-heavy blog land in different places.

To judge it on a real page rather than in theory, load the page into Recolor and look at how much of it each swatch takes; How to preview a color palette on a real website walks through it.

Recolor's engine counts the distinct colors a page shows, after merging values closer than 0.04 in OKLab. On October 8, 2026 the fewest among 16 tested sites was news.ycombinator.com with 5, the most tailwindcss.com with 134, and the middle en.wikipedia.org with 28. A large number mostly means shades: tints, hovers and transparent versions of a few base colors. The full table is on Which sites load.

Recolor reads the page, groups its colors into families of near hue (within 25 degrees), and ranks the families by how much of the page they cover and how colorful they are. Family 1 takes swatch 1, family 2 swatch 2, and so on; with more families than swatches the count wraps around. Greys are not ranked: they keep their lightness and lean towards swatch 1. So the first swatch should be the color you want to lead, and the order of the rest is the order of importance. Strength, neutral tint and overrides has the details, and Use site colours in the Mapping panel fills the palette with the page's own colors in that same order.

With the roles in place, check the pairs that carry text: body text on the background, labels on buttons, links in paragraphs. Each needs 4.5:1 for normal text; Black or white text on a color shows how to pick the text color for any swatch. Browse the palette gallery for ready five-color palettes, each with its contrast table.