How to Choose a Color Palette for Your Website

To choose a color palette for your website, decide the jobs first and the hues second. Most sites need five roles (a background, a surface, a text color, a muted text color and one accent), balanced roughly 60-30-10, with every text pair passing WCAG AA contrast: 4.5:1 for body text and 3:1 for large text. Pick the accent from your brand or mood, build the neutrals around it, then test the whole set on real pages before you commit.

Key takeaways

• Think in roles, not swatches. A palette is background, surface, text, muted text and accent, plus a few state colors.
• Use 60-30-10 as a balance check: about 60 percent ground, 30 percent secondary, 10 percent accent.
• Contrast is not optional. Body text needs 4.5:1, large text and interface components need 3:1.
• The neutrals carry most of the mood. A warm off-white and a cool gray-white make the same accent feel like two different brands.
• Dark grounds need their own palette, not an inverted copy of the light one.

Start with how the site should feel

Color is the fastest carrier of mood on a page, so begin with two or three words for how a visitor should feel. "Calm and precise" points towards a narrow, muted palette with lots of white. "Bold and urgent" points towards saturated contrast and a hot accent. "Warm and earthy" points towards cream grounds, browns and clay.

If you need a vocabulary for this, our guide to website design moods describes 20 moods with their palette tendencies. A serene site, for example, rarely uses more than one or two accents and keeps contrast gentle in its decorative elements while still keeping text fully legible.

The five roles every palette needs

Background

The background sets the temperature of everything. Pure white (#FFFFFF) feels clean and clinical; a warm off-white (#FAFAF7 or #F4F0E8) feels softer and more editorial; a light gray (#F5F5F5) feels neutral and product-like. Choose it with the same care as the accent.

Surface

A surface is one step away from the background: slightly darker on a light theme, slightly lighter on a dark one. On a #FAFAF7 ground, a #F1F0EC surface is enough to separate a card without needing a border. Keep the step small; surfaces that differ too much from the ground make the page look patchy.

Text

Your main text color does not need to be pure black. #1A1A1A on #FAFAF7 gives a contrast ratio of about 16.6:1, which is far above the minimum and slightly gentler on the eye than 21:1.

Muted text

This is where most palettes fail accessibility. Pale gray text looks elegant in a mockup and becomes unreadable on a real screen. On white, #767676 is roughly the lightest neutral gray that still reaches 4.5:1. #999999, a very common choice, only reaches about 2.8:1 and fails for body text. If secondary text is small, keep it at 4.5:1 like any other text.

Accent

One accent, used sparingly, is the strongest tool you have. It marks what can be clicked and what matters most. If everything is the accent color, nothing is. Pick it from the brand, then check it in both directions: as text on your background, and as a button fill with white or dark text on top.

Using the 60-30-10 rule

The 60-30-10 rule comes from interior design and translates well to screens:

• 60 percent dominant: the background and the large neutral areas.
• 30 percent secondary: surfaces, text blocks, images with a consistent tone, a second neutral.
• 10 percent accent: buttons, links, small highlights, one illustrated detail.

It is a balance check, not a formula. Take a screenshot of your page, blur it heavily, and look at the proportions. If the accent occupies a quarter of the screen, it has stopped being an accent. If you cannot find it at all, your call to action is probably invisible too.

Contrast: the numbers that matter

WCAG 2 defines contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). For level AA, which is the usual target:

• Body text: at least 4.5:1.
• Large text: at least 3:1. Large means about 24px regular, or about 18.66px bold, and above.
• Interface components and graphics: at least 3:1 against adjacent colors. This covers input borders, focus rings, icons that carry meaning and chart lines.

Level AAA raises body text to 7:1 and large text to 4.5:1. It is a good target for long-form reading sites.

Some worked examples:

Two lessons from the table: mid-tone brand colors often pass only for large text, and the same blue can work as a button fill while a lighter tint of it fails as link text. Check every pair you actually use.

Building a palette step by step

1. Pick the accent. From the brand, or from the mood. If you are exploring, browse sites by color, for example blue websites, to see how others balance the same hue.
2. Choose the temperature of the neutrals. Warm (with a little yellow or red in the gray), cool (a little blue) or true neutral. Match it to the accent: a warm clay accent sits better on warm neutrals.
3. Set the background and text. Decide how soft you want the extremes, then confirm the text passes comfortably.
4. Derive the surface and muted text. One step from the background for the surface; a mid gray from the same temperature family for muted text, checked against both background and surface.
5. Add state colors. Success (green), warning (amber), error (red), each checked for contrast and never relied on alone: pair color with an icon or a word.
6. Name them by role. Store them as tokens such as --color-bg, --color-surface, --color-text, --color-text-muted and --color-accent. Naming by role lets you change a hue without hunting through the code. Our article on design tokens shows a practical setup.

An example of a complete light palette built this way:

• Background #FAFAF7
• Surface #F1F0EC
• Text #1A1A1A
• Muted text #5C5C5C (about 5.9:1 even on the surface)
• Accent #2563EB (about 4.9:1 as text on the background)

Designing for dark grounds

A dark palette is not the light palette inverted. A few rules hold up well:

• Avoid pure black for the ground if you need layered surfaces. On #000000 there is nowhere darker to go, and lighter surfaces look like holes. A near-black such as #121212 lets you lift cards to #1E1E1E.
• Soften the text. #EDEDED on #121212 gives about 16:1, which is plenty and reduces the glare of pure white on black.
• Lighten and desaturate the accent. Saturated mid-tone colors vibrate on dark grounds and may fail contrast. A blue that works on white (#2563EB) is often replaced by a lighter one, such as #7AA2FF, which reaches about 7.5:1 on #121212.
• Use elevation by lightness, not shadow. Shadows barely show on dark grounds; raise surfaces by making them a little lighter instead.
• Check muted text on every surface. #A0A0A0 passes on #121212 at about 7.2:1 and still passes on #1E1E1E at about 6.4:1, but lighter grays may not survive two levels of surface.

Testing your palette

1. Run every pair through a contrast checker. Text on background, text on surface, muted text on both, accent text, text on accent buttons, borders and focus rings against their surroundings.
2. View it in grayscale. If the hierarchy disappears, you are relying on hue where you need lightness.
3. Simulate color vision deficiencies. Red and green state colors are the classic trap; add icons and labels so meaning never depends on color alone.
4. Look at real pages, not swatches. A palette that sings on a swatch sheet can look flat across a long page. Build a hero, a feature grid and a footer before deciding.
5. Try a phone outdoors and a cheap monitor. Low-contrast grays disappear first in bright light and on poorly calibrated screens.
6. Check the states. Hover, focus, active, disabled and error states need their own contrast too.

Common palette mistakes

• Too many brand colors with equal weight. Pick one accent and let the rest be neutrals.
• Gray text that is too pale. The single most common accessibility failure on modern sites.
• An accent that is also the error color. If your brand is red, give errors a different treatment, such as an icon and a darker red.
• Ignoring photography. Images bring their own color. A cool-toned palette with warm photography can feel disjointed unless that contrast is intentional.

In short

Choose the jobs before the hues: background, surface, text, muted text and accent. Balance them roughly 60-30-10, keep the accent scarce, and make every text pair pass 4.5:1 (3:1 for large text and interface parts). Build a separate dark palette rather than inverting the light one, then test on real pages and real screens. If you want to see finished palettes with their roles assigned, every moodboard on MUUDS includes one, drawn from real analysed websites.