How to Choose a Website Color Scheme (with the 60-30-10 Rule)

Most color advice stops at theory: a color wheel, some vague talk of "harmony," a mood board, and then you are on your own. This guide does the opposite. It is a repeatable, shippable process for how to choose a color scheme for a real website — from a single anchor color to a balanced, accessible palette using the 60-30-10 rule, ending in CSS variables you can paste into production. Every hex value below is verified, and every text-on-background pair is contrast-checked.

Start with one color (brand, mood, or psychology)

Every good website color scheme grows from one anchor color. Pick that first and the rest of the palette follows naturally; try to choose six colors at once and you will end up fighting yourself. There are three reliable ways to find your anchor.

Use an existing brand color

If you already have a logo, product, or packaging, your anchor is decided — you just need the exact value, not an approximation. Don't eyeball it from a screenshot; drop the asset into the Image Color Extractor to pull the precise hex, or build a full set of variants with the Brand Color Kit. A brand blue that is #2563EB should be #2563EB everywhere, not a sampled #2660E5 that drifts across pages.

Match a mood

No brand yet? Choose by feeling. Two axes do most of the work: temperature (warm reds, oranges and yellows feel energetic; cool blues, greens and violets feel calm and competent) and saturation (vivid reads as playful and loud, muted as premium and serious). A fintech dashboard and a children's app can share a hue and feel completely different on these two dials alone.

Lean on color psychology

Color carries learned associations worth respecting even if they are not laws. Blue signals trust and stability, which is why so much software leans on it (see the blue page); green reads as growth, health and money (more on green); orange and yellow feel friendly and urgent; purple creative or luxurious; black premium. For where these break down by culture, read the color psychology guide.

Build harmony around it (which scheme to use)

Once you have an anchor, you need a relationship for any colors you add — that relationship is what people mean by a color scheme. The five classic ones differ by how far apart the hues sit on the wheel.

Scheme	How it's built	Feels	Best for
Monochromatic	One hue, varied lightness/saturation	Clean, focused	Minimal UIs, content sites
Analogous	2–3 neighboring hues	Calm, cohesive	Marketing pages, nature/wellness brands
Complementary	Two opposite hues	High energy, punchy	Sports, CTAs, bold brands
Split-complementary	Anchor + two beside its opposite	Balanced contrast	Most product sites
Triadic	Three evenly spaced hues	Vibrant, playful	Illustration-heavy, kids, creative

For most websites the safest, most professional move is monochromatic or analogous for the interface, plus one complementary color held in reserve as an accent — cohesion everywhere, with a single pop of contrast where you want attention. The color schemes explained post covers the theory; to generate one from your anchor in seconds, use the Color Palette Generator: paste your hex, choose a harmony, copy the result.

Worked example: anchor #2563EB (a confident blue). A monochromatic scheme keeps the hue and changes lightness; an analogous scheme might add an indigo #4F46E5 and a cyan #0891B2; a complementary accent lands in the orange/amber range, around #F59E0B. We will build the rest of the system around that blue.

The 60-30-10 rule for balanced UI

The 60-30-10 rule is the most useful constraint in this whole process. Borrowed from interior design, it answers the question theory never does: how much of each color do you actually use? The split:

• 60% — dominant. Fills most of the screen — on a website, almost always a near-neutral: your page background and large surfaces. It sets the tone and gives the eye somewhere to rest.
• 30% — secondary. Supporting structure: text, cards, headers, sidebars, borders. Often a darker neutral or a desaturated version of your brand hue.
• 10% — accent. The smallest slice and the loudest: buttons, links, active states, key highlights. This is where your brand color earns its keep.

The magic is the imbalance. A 33-33-33 split has no hierarchy — everything shouts, so nothing does. The accent reads as important because it is rare. The fastest way to ruin a palette is to use your vivid brand color for backgrounds: the moment it covers 60% of the screen it stops being special and starts being tiring.

Mapped onto a typical landing page, it looks like this:

Slice	UI elements	Example value
60% dominant	Page background, section backgrounds	#F8FAFC
30% secondary	Body text, cards, borders, footers	#0F172A text on #FFFFFF cards, #E2E8F0 borders
10% accent	Primary buttons, links, active nav	#2563EB

Add neutrals and a real ramp

Here is what separates amateur palettes from professional ones: most of a real interface is neutral. Your brand color is the seasoning, not the meal. Before you obsess over the accent, build a proper neutral ramp — from near-white to near-black — for backgrounds, surfaces, borders, dividers, and text.

A flat #FFFFFF / #000000 / one gray is not enough. You want roughly nine to ten steps so you always have the right value on hand. A subtle trick: tint the neutrals slightly toward your brand hue (here, a touch of blue) so they feel intentional rather than dead gray. This cool "slate" ramp does exactly that:

Step	Hex	Typical use
50	#F8FAFC	App background
100	#F1F5F9	Hover/zebra rows
200	#E2E8F0	Borders, dividers
300	#CBD5E1	Disabled, subtle borders
400	#94A3B8	Placeholder text
500	#64748B	Muted icons
600	#475569	Secondary text
700	#334155	Strong secondary text
800	#1E293B	Dark surfaces
900	#0F172A	Primary text, dark mode bg

With a ramp like this, "background, border, text" are no longer guesses — they are 50, 200, 900. You can build the equivalent light-to-dark ramp for any anchor with the Shade & Tint Generator and lock the whole neutral set in one pass.

Choose an accent for CTAs (and make it pop)

Your accent is the 10%, and its entire job is to make the next action obvious. Two rules keep it effective.

First, reserve it. If links, buttons, badges, and headings all use the brand color, nothing stands out. Use neutrals for everything structural and let the accent appear only on things you want clicked.

Second, maximize contrast against its surroundings, not just the legibility of its label. A blue button on a white page is fine; a blue button on a mostly-blue hero disappears. This is why a complementary accent works so well: against a cool blue interface, a warm #F59E0B button is impossible to miss. Just remember the accent needs readable text — amber takes dark text, not white:

.btn-primary {              /* blue CTA on light UI  */
  background: #2563EB;
  color: #FFFFFF;          /* 5.17:1 — passes AA     */
}

.btn-highlight {           /* amber CTA, warm pop    */
  background: #F59E0B;
  color: #0F172A;          /* 8.31:1 — dark text!    */
}

White on #F59E0B is only about 2.1:1 and fails badly — a classic mistake. Always test the actual pairing in the Color Contrast Checker before you commit.

Check accessibility before you commit

A scheme is not done until every text-on-background pair is legible. WCAG asks for 4.5:1 for normal text, 3:1 for large text (about 24px, or 18.66px bold) and for UI components like button borders, icons, and focus rings. Run your real combinations, not your hopes. Here are the pairs from the SaaS example above:

Foreground	Background	Ratio	Verdict
#0F172A	#F8FAFC	17.06:1	Pass (AAA)
#475569	#F8FAFC	7.24:1	Pass (AAA)
#FFFFFF	#2563EB	5.17:1	Pass (AA)
#0F172A	#F59E0B	8.31:1	Pass (AAA)
#FFFFFF	#F59E0B	2.15:1	Fail

When a pair fails, the fix is almost always to adjust lightness, not hue — darken the text or fill until it passes and you keep your color identity. The deeper rules (AA vs AAA, the large-text exception, non-text contrast) live in accessible color contrast. Check every pair the moment you pick colors, not after you have built ten components on them.

Extract a scheme from an image or brand asset

When you have no starting hue, lift one from something that already works — a photo, packaging, or an illustration whose mood you love. Drop it into the Image Color Extractor to pull its dominant colors as exact hex, treat the most usable one as your anchor, then expand it into a complete, accessible system with the Brand Color Kit.

Ship it as CSS variables / design tokens

Theory is worthless until it is in code. Ship a scheme as CSS custom properties named by role, not by color. Name them --color-primary, never --color-blue — so the day the brand changes you swap one value and the whole site follows, and dark mode becomes a variable override instead of a rewrite.

:root {
  /* surfaces */
  --color-bg:           #F8FAFC;
  --color-surface:      #FFFFFF;
  --color-border:       #E2E8F0;
  /* text */
  --color-text:         #0F172A;
  --color-text-muted:   #475569;
  /* brand + action */
  --color-primary:      #2563EB;
  --color-primary-fg:   #FFFFFF;
  --color-accent:       #F59E0B;
  --color-accent-fg:    #0F172A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:         #0F172A;
    --color-surface:    #1E293B;
    --color-border:     #334155;
    --color-text:       #F8FAFC;
    --color-text-muted: #94A3B8;
    /* primary + accent stay on-brand; only neutrals flip */
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

Notice that dark mode only flips the neutral ramp — the brand blue and amber are accessible against both light and dark surfaces, so they stay put. (If a brand hue feels muddy on dark, lighten it one step and keep dark text on it.) Prefer a manual toggle? Swap the media query for a [data-theme="dark"] selector on <html>. Using Tailwind? Map these same variables into your theme so bg-bg, text-text, and bg-primary resolve to your tokens — one source of truth, no hardcoded hex in markup.

5 website color schemes broken down (hex codes)

Five complete, contrast-checked starting points, each following 60-30-10: a dominant neutral, supporting structure, a reserved accent. Copy one, tweak the accent, and you have a defensible scheme in minutes.

1. Trustworthy SaaS — cool blue + slate

The default for software: calm, competent, gets out of the way.

Role	Hex	Note
Background (60)	#F8FAFC
Surface (60)	#FFFFFF
Text / borders (30)	#0F172A / #E2E8F0	text 17:1
Primary CTA (10)	#2563EB	white text, 5.17:1
Highlight (10)	#F59E0B	dark text, 8.31:1

2. Calm & natural — green + cream

Wellness, sustainability, food, finance with a softer face.

Role	Hex	Note
Background (60)	#FAFAF9	warm off-white
Surface (60)	#FFFFFF
Text / borders (30)	#1C1917 / #E7E5E4	text 16.7:1
Primary CTA (10)	#15803D	white text, 5.02:1
Accent (10)	#C2410C	terracotta, white text 5.18:1

3. Bold & modern — dark slate + lime

High-contrast dark UI for developer tools, crypto, gaming.

Role	Hex	Note
Background (60)	#0F172A
Surface (60)	#1E293B
Text / muted (30)	#F8FAFC / #94A3B8	17.06:1 / 6.96:1
Borders (30)	#334155
Accent CTA (10)	#A3E635	lime, dark text 11.84:1

4. Warm editorial — burgundy + paper

Publishing, premium content, anything that wants to feel printed.

Role	Hex	Note
Background (60)	#FAF7F2	warm paper
Surface (60)	#FFFFFF
Text / muted (30)	#292524 / #44403C	14.19:1 / 9.61:1
Borders (30)	#EAE0D5	warm hairline
Primary CTA (10)	#831843	burgundy, white text 9.65:1
Accent (10)	#B45309	aged gold, white text 5.02:1

5. Minimal mono — grayscale + one violet

Portfolios and design-forward sites: nearly neutral, with a single deliberate hue.

Role	Hex	Note
Background (60)	#FFFFFF
Surface (60)	#F8FAFC
Text / muted (30)	#0F172A / #475569	17.9:1 / 7.58:1
Borders (30)	#E2E8F0
Accent CTA (10)	#7C3AED	violet, white text 5.70:1

The process is the same for all five: one anchor, a harmony, the 60-30-10 split, a neutral ramp, a reserved accent, a contrast pass, and tokens. Run your own anchor through the Color Palette Generator and you have a scheme you can ship today.

Frequently asked questions

What is the 60-30-10 rule?

It is a balance ratio for an interface: roughly 60% of the visible surface is a dominant or neutral color, 30% is a secondary color, and 10% is an accent reserved for key actions. Giving each color a fixed amount of space is what keeps a palette from feeling chaotic.

How many colors should a website use?

In practice, one dominant neutral, one or two brand hues, and a single accent — about three to five real colors, each expanded into a light-to-dark ramp. More distinct hues than that and the interface starts to feel unfocused.

How do I pick a primary brand color?

Start from one anchor: an existing brand asset, the mood you want, or color psychology. Extract or choose a single hue you can defend, then confirm it still reads as your brand at small sizes and can carry legible white or dark text on a button.

What colors convert best for CTAs?

There is no universally best-converting color. What matters is contrast — the call-to-action should stand out from everything around it and have readable text. A warm accent on a cool interface, or any saturated color you reserve only for actions, tends to perform well.

How do I turn a color scheme into CSS?

Define each role — background, surface, border, text, primary, accent — as a CSS custom property in :root, then reference var(--color-...) throughout your styles. Add a prefers-color-scheme or data-theme block that overrides the same variables for dark mode.