Web Design Color Theory: Build a Website Palette That Works

Web design color theory is the set of rules for choosing website colors that belong together, stay readable for every visitor and point people to the one button you want them to press. On a real site it comes down to three moves: pick colors on the wheel, prove they can be read with a contrast ratio, and place each color in its job with the 60-30-10 split.

This guide walks you through all three with real hex codes, the exact numbers from the accessibility standard and a free Palette Lab that builds a working palette from your logo color. By the end you can set your site’s colors yourself, in WordPress, Wix, Squarespace or Shopify, and know they pass.

The color wheel for websites (it is a circle of light)

The color wheel you need for a website is the hue circle: every color on a screen sits at an angle from 0 to 360 degrees. Red is at 0, green at 120, blue at 240, and everything else falls in between.

That matters because many guides still teach the painter’s wheel, where red, yellow and blue are the primaries. Paint and ink mix by absorbing light. Screens do the opposite: they mix red, green and blue light, and all three at full strength make white. Isaac Newton drew the first science-based color wheel by joining the two ends of the spectrum into a circle, in his book Opticks (1704), according to the Cooper Hewitt museum. Web color tools still use that circle.

Here is the useful part: because hue is a number, color harmony is simple arithmetic. Add 180 to get the opposite color. Add and subtract 30 to get its neighbours. Hold that thought, because the scheme section below is just angles.

Hue, saturation and lightness: the three dials of every color

Every website color can be described with three dials, and knowing them lets you make a whole family of colors from one logo color.

• Hue is the angle on the wheel: which color it is.
• Saturation is how pure or grey it is. 0% is grey, 100% is the most vivid version. Lowering saturation makes a color duller, not darker.
• Lightness runs from black (0%) to white (100%). A tint is the color with white added, a shade has black added, and a tone has grey added.

Keep the hue, slide the lightness, and you get a ramp: light tints for backgrounds, the pure color for big buttons, dark shades for text and links. This is how design systems work. Google’s Material Design, for example, builds every scheme from five key colors, each with a tonal palette of 13 tones.

The 7 color schemes (the “7 types of color theory”)

A color scheme is a rule for picking colors by their angle on the wheel. People often call these the 7 types of color theory. Pick one, and your second and third colors stop being guesses. Tap each scheme to see where the colors sit, starting from our brand blue at 207 degrees.

Neutrals sit outside the wheel: white, greys and near-blacks carry most of a website. That is why the next rule exists.

The 60-30-10 rule (and the 3-color and 70-20-10 rules)

The 60-30-10 rule says 60% of your page is one dominant color, 30% a secondary color and 10% an accent. Nielsen Norman Group puts it plainly: “colors should be used in 60%, 30%, and 10% of your design area”, and it advises you to “reserve the accent color for what you want to stand out the most on your page”.

• 60%, dominant: page background. White or an off-white.
• 30%, secondary: header, footer, cards, section bands. Usually your brand color or a dark navy.
• 10%, accent: buttons and the one link you care about. If everything is the accent color, nothing is.

What is the 3-color rule for websites? It is the same idea counted differently: limit the palette to three colors (plus neutrals for text). NN/g’s advice is to “limit your palette to three colors”. The 70-20-10 rule is a quieter variant: more background, a little less secondary, same small accent. Pick 70-20-10 if your brand color is loud, like orange or red.

Contrast: the one color rule that is math, not taste

Contrast ratio is a number from 1:1 (no contrast) to 21:1 (black on white) that measures how readable text is on its background, and the web standard sets a minimum. The W3C’s WCAG 2.2 (a W3C Recommendation, latest edition 12 December 2024) asks for:

The pixel sizes come from the W3C’s own note that 14pt and 18pt “are equivalent to approximately 18.5px and 24px”. Two more details trip people up. The ratio is never rounded: the W3C says “4.499:1 would not meet the 4.5:1 threshold”. And 4.5:1 was chosen to make up for the contrast loss of roughly 20/40 vision, so it is not a strict standard, it is a floor.

This is the most failed rule on the web. WebAIM’s 2026 scan of the top one million home pages found low-contrast text on 83.9% of home pages, up from 79.1% in 2025, with an average of 34 low-contrast pieces of text per page. Light grey body copy, white text on bright orange and pale links are the usual causes.

How to check a pair yourself: paste both hex codes into the WebAIM Contrast Checker, or use the Palette Lab below, which checks every pair at once. If you like to see the math, the W3C formula is short: turn each color into its relative luminance (L = 0.2126 R + 0.7152 G + 0.0722 B, using linear values), then divide (lighter + 0.05) by (darker + 0.05).

Design for color blindness: never let color speak alone

About 1 in 12 men have a color vision deficiency, says the US National Eye Institute, and the most common type makes red and green hard to tell apart. Colour Blind Awareness puts it at 1 in 12 men and 1 in 200 women. For a local business with a few thousand visitors a month, that is a real share of the people trying to book.

WCAG 2.2 has a rule for exactly this, Success Criterion 1.4.1: “Color is not used as the only visual means of conveying information”. In practice:

• Add words or icons to status colors (“Booked”, “Error: enter a phone number”).
• Underline links inside paragraphs. If you remove the underline, the W3C technique asks for a 3:1 contrast between the link and the text around it.
• Do not mark required form fields with red alone. Add “required” or an asterisk with a note.
• Test it: in Chrome, open DevTools, press Ctrl+Shift+P (Cmd+Shift+P on Mac), type “Rendering”, and use Emulate vision deficiencies to view your page as a color-blind visitor would.

Does color psychology work? What the research actually says

Color does change how people feel about a brand, but there is no proven “blue means trust, red means buy” rule you can copy. Here is what holds up when you go back to the studies.

• Color shapes brand personality. Labrecque and Milne ran four studies and found hue, saturation and lightness affect brand personality, likability and purchase intent. Their point is that marketers “can strategically use color to alter brand personality and purchase intent” (Journal of the Academy of Marketing Science, 2012).
• The famous “62 to 90%” figure is a review, not an experiment. It comes from Satyendra Singh’s 2006 paper in Management Decision, which summarises earlier research. Treat it as a direction, not a measured fact about your website.
• First impressions are fast, and simple wins. Google researchers found that “in less than 50 milliseconds, users build an initial gut feeling” about a site, and that sites with low visual complexity and a familiar look were rated most appealing, with effects visible within 17 ms.

So the practical lesson is consistency, not magic colors. NN/g’s rule is to “use colors consistently in your interface”: if orange means “book now” on one page, it should mean that everywhere, and nothing else should be orange.

How to build a website color palette: 5 steps and a free Palette Lab

You can build a complete, readable website palette from one color in about ten minutes. Follow the five steps, and let the Palette Lab do the math.

Step 1. Find your brand color’s hex code

Your logo color is your base. If you do not know its hex code, open your logo or website in Chrome, right-click, choose Inspect, and click any color square in the Styles panel to get the eyedropper. Copy the six-character code, such as #1595FB.

Step 2. Pick a scheme for your accent

For most local businesses, complementary gives the clearest Call or Book button. Choose analogous or monochromatic if you want a calmer look.

Step 3. Give every color a job

A working website palette has six roles: background, surface (panels and cards), text, muted text, brand (headings, links, header) and button. That is 60-30-10 made concrete.

Step 4. Prove every text pair passes

Check text on background, text on surface, muted text, links and the button label. Anything under 4.5:1 gets darker (or lighter), keeping its hue. The lab does this automatically and shows you the fix.

Step 5. Copy it and paste it into your site

Copy the hex list into your builder’s color settings (paths below), or copy the CSS if you edit code.

Two honest limits. The lab follows the rules on this page, so it will not invent a brand for you; if your logo color is very light (yellow, pastel), it will darken it for text and keep the original for large shapes. And it checks contrast, not taste, so look at the preview and trust your eye on the mood.

Before and after: fixing a local business palette

Here is a typical small business palette problem, and the same page after the three moves. The business is an example, but every ratio below was calculated with the WCAG formula.

Notice what did not change: the brand is still blue and orange, a complementary pair. The fix was lightness, not new colors. Most palettes can be saved the same way: keep your hues, adjust their lightness until they pass.

Where to set colors in WordPress, Wix, Squarespace and Shopify

Every major builder has one place for site-wide colors. Change them there, not block by block, so every page stays consistent. These paths come from each platform’s own help pages.

On a classic WordPress theme or a page builder such as Elementor, look for “Global Colors” in the builder’s site settings. If you or your developer edit CSS, paste the Palette Lab’s CSS at the top of your stylesheet and use the names everywhere:

:root {
  --color-bg: #FFFFFF;
  --color-surface: #F3F9FF;
  --color-text: #0F1F36;
  --color-brand: #1595FB;
  --color-link: #0067F2;
  --color-button: #C2410C;
}
a { color: var(--color-link); }
.button { background: var(--color-button); color: #FFFFFF; }

What about dark mode? It is optional. NN/g’s testing found that for people with normal vision “light mode leads to better performance most of the time”, and its survey of mobile users split roughly one third dark, one third light, one third both. If you add it, use the CSS prefers-color-scheme media query, and run every pair through the contrast check again. Do not just invert colors.

The 60-second color check before you publish

1. Squint test. Blur your eyes at the page. The main button should be the first thing you see.
2. Count the colors. Three plus neutrals. If you count five, one of them has no job.
3. Body text 4.5:1 or more. Including grey captions, footer text and text on photos.
4. Button label passes. White on a bright button often fails; darken the button or use dark text.
5. Links are underlined or clearly different from the text around them (3:1).
6. No meaning by color alone. Run Chrome’s Emulate vision deficiencies once.
7. Check it on a phone outside. Low contrast that looks fine on a monitor disappears in daylight.

Colors are one part of a site that earns calls. If you want the rest checked too, run our free Website SEO Audit and the Core Web Vitals Checker, and read how to plan the top of your page in website header examples and how layouts adapt in responsive web design. If you would rather have it done, our web design team builds local business sites with these rules baked in; see the work in our web design case studies.

FAQs

What colors are best for a website?

The best website colors are your brand color plus a white or off-white background, a dark text color and one contrasting accent for buttons. Choose the accent with a scheme such as complementary, then check every text pair reaches 4.5:1 contrast. Readable, consistent colors beat any single “best” color, because no color works if visitors cannot read it.

How many colors should a website have?

Most websites need three colors plus neutrals: one dominant, one secondary and one accent, used roughly 60%, 30% and 10%. Neutrals such as white, greys and a near-black for text do not count toward the three. Nielsen Norman Group advises limiting a palette to three colors and keeping the accent for the main call to action.

What is the best color for a call-to-action button?

The best button color is the one that contrasts most with the rest of your page and is used for nothing else. Often that is the complement of your brand color, such as orange on a blue site. No color wins on every site, so test your own page if you can. Make sure the label reaches 4.5:1.

Is pure black text on white bad for websites?

Pure black on white is not bad: at 21:1 it passes every contrast rule. Many designers prefer a very dark navy or charcoal, such as #0F1F36 at 16.54:1, because it feels softer next to brand colors while staying far above the 4.5:1 minimum. The real problem on most sites is the opposite: grey text that is too light.

What is the difference between RGB, HEX and CMYK?

RGB and HEX describe screen colors made of red, green and blue light; HEX is just RGB written as six characters, so #1595FB equals rgb(21, 149, 251). CMYK describes printing ink (cyan, magenta, yellow, black). Use HEX or RGB for your website and CMYK only for printed items like flyers and vans.