What Makes a Good Color Palette for Web Design

Limit Your Palette Before You Start Designing

Most web designers use too many colors. A typical site needs four to six: a primary brand color, a secondary or accent color, a neutral for text, a light neutral for backgrounds, and one color reserved for alerts or errors. That is it. Adding more does not create richness — it creates visual noise that makes users work harder to understand the page.

A useful mental model is the 60-30-10 rule. Sixty percent of your UI uses your dominant neutral or background color. Thirty percent uses your primary brand color. Ten percent is the accent — the thing that draws the eye to buttons, links, and key actions. Violating this ratio is usually what makes a design feel chaotic.

Contrast Is Not Optional — It Is Functional

Color contrast between text and background is not a stylistic preference. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for body text and 3:1 for large headings. Pale gray text on a white background fails both. It feels modern until someone tries to read it on a phone in daylight.

Check every text-background combination with a contrast checker before locking in your palette. The accessible color pair generators can do this in seconds. If your brand color does not have enough contrast against white for body text, reserve it for decorative elements and use a darker shade for actual type.

Color blindness affects around 8% of men and 0.5% of women. Never use color as the sole indicator of meaning — a red error state also needs an icon or text label. Running your palette through a color blindness simulation early saves refactoring later.

Build a Tint and Shade Scale, Not Just One Hex Code

Picking a single hex code per color is where most people stop, but a production design needs a full scale. You need a light tint for hover states and backgrounds, your core value, and a dark shade for pressed states and borders. Frameworks like Tailwind use a 50–900 scale for exactly this reason.

In practice, three to five steps per color is enough for most sites. Generate them from your base color using a tints-and-shades tool. The goal is that your brand blue at 500 is your primary action color, 100 is a background wash, and 700 is the hover state on a button. Everything feels related because it is.

Test Your Palette in Context, Not in Isolation

Swatches look different next to each other than they do alone. A warm cream background will make a neutral gray look cool. A bright accent will look muted beside a competing saturated color. Always test your palette on actual UI components — a card, a hero section, a form — before committing.

Also test in dark mode if your site supports it. A palette built only for light backgrounds often falls apart when inverted. Check that your primary brand color still reads clearly on dark surfaces and that your neutrals have a genuine dark equivalent ready.

Frequently asked questions

How many colors should a website color palette have?

Four to six is a solid range: one primary, one accent, two neutrals (text and background), and one semantic color for errors or warnings. More than that and you spend design time managing exceptions rather than building consistency.

What color contrast ratio do I need for accessible web design?

WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA pushes to 7:1 for body text. Most teams target AA as a baseline minimum.

Should I use pure black and pure white in my palette?

Usually not. Pure black (#000000) on white creates harsh, fatiguing contrast. Most designers use near-blacks like #111827 or #1a1a1a and off-whites like #f8f8f8. The softness is imperceptible to most users but reduces eye strain over long reading sessions.

How do I choose an accent color for my website?

Pick something that contrasts clearly with your primary brand color and works on both light and dark surfaces. Complementary colors (opposite on the color wheel) create strong distinction. Keep accent usage tight — buttons, links, and key callouts — so it retains its visual weight.