I've watched designers spend three hours picking the perfect fifth color for a landing page that already had four perfectly good colors. The fifth color didn't make the design better. It made it confused.
The question "how many colors should my website use?" is one of the most asked questions in design communities. And every answer you find — "3 to 5," "no more than 4," "the 60-30-10 rule" — is technically correct but practically useless, because they all assume you already know what each color is supposed to do.
Here's the real answer: your website should have exactly as many colors as it has jobs. No more, no less.
The Jobs Your Colors Need to Do
Every color on a website has one of five jobs. If a color doesn't have a job, it shouldn't be there.
Job 1: The Canvas (1 color)
This is your background — the surface everything else sits on. It takes up 50-70% of your visual space. For most websites, this is white or near-white (#F8FAFC). For dark mode, it's a near-black (#0F172A). This color should be quiet, unremarkable, and never fight for attention.
The rule: one canvas color, period. If you're using two different background colors on different sections, you're building a patchwork, not a system.
Job 2: The Primary Accent (1 color)
This is your brand color — the one that shows up on your logo, your CTAs, your active states, and your links. It should appear in roughly 10% of your visual space. It's the loudest color in your system, and its job is to say "click here."
The rule: one primary accent. If you're choosing between "our blue" and "our teal" for the button, you don't have two options — you have one color that hasn't been committed to yet.
Job 3: The Neutrals (2-3 colors)
Body text, secondary text, borders, dividers, disabled states — these all come from a neutral gray scale. You need at minimum:
- Dark neutral for body text (#1A1A2E or similar)
- Mid neutral for secondary text, borders (#6B7280 or similar)
- Light neutral for backgrounds of cards, subtle surfaces (#F1F5F9 or similar)
These aren't really "colors" in the way people think of them — they're shades of a single neutral scale. But they do 60% of the visual work on your page.
Job 4: Functional Colors (2-3 colors)
Every interface needs status colors: green for success, red for errors, yellow/amber for warnings. These are non-negotiable. They're not decorative — they're communication infrastructure.
The rule: never use these for decorative purposes. A yellow warning icon means "pay attention." If you also use yellow for a decorative accent, the warning stops working.
Job 5: The Optional Second Accent (0-1 colors)
This is where most designers get into trouble. A second accent is useful for:
- Hover states that need to differ from the primary accent
- Data visualization where you need to distinguish series
- Multi-product branding where different sections have different identities
But here's the test: can you explain the difference between your primary and secondary accent in one sentence? If the answer is "one is for buttons and the other is for... I don't know, it just looked nice," you don't need a second accent. You need to commit to your first one.
The Real Math: What Top Sites Actually Use
Let's count the colors in some of the most respected design systems:
Stripe
Stripe's dashboard uses: white canvas, near-black text (#425466), one purple accent (#635BFF), gray neutrals for surfaces, and the standard functional colors (green/red). That's 5 core colors + functional colors. The entire Stripe documentation — hundreds of pages — runs on this system.
Linear
Linear's interface: dark canvas (#1A1B26), one indigo-purple accent (#5E6AD2), near-white text (#E8E8ED), and a minimal neutral scale. 4 core colors + functional colors. Linear is widely considered one of the best-designed products in existence, and it runs on fewer colors than most Instagram posts.
Notion
Notion is interesting because it appears colorful — it uses colored page icons and database property colors. But the actual UI system is: white/light canvas, black text, one accent (used sparingly), and gray neutrals. The "color" in Notion is content decoration, not UI infrastructure. The interface itself is essentially monochrome.
The pattern is clear: the best-designed products use 4-6 core colors, and every additional color beyond that has a specific, defensible purpose.
The 60-30-10 Rule: Why It Works (And When It Doesn't)
You've probably heard the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent. This works for most websites because it mirrors how the human eye processes visual hierarchy.
Our peripheral vision is tuned to detect difference. When 90% of a page is the same tone (60% canvas + 30% neutrals), the 10% accent color immediately draws focus. It's not a design trend — it's neuroscience. The eye goes to whatever stands out from the background.
But the rule breaks down when you have multiple accents competing for that 10%. If your button is blue, your secondary CTA is green, your badge is orange, and your icon is purple — you've distributed your 10% across four colors, and none of them stand out. The hierarchy collapses.
The fix: If you have more than one accent color, only one of them gets to be "loud." The others should be desaturated or reduced in size so they don't compete with the primary accent for attention.
When More Colors Actually Work
There are legitimate cases for 7+ colors:
- Data-heavy dashboards — charts and graphs need distinct colors to differentiate data series. A financial dashboard might need 6-8 chart colors plus the base UI system.
- Multi-brand platforms — if your product serves different verticals (e.g., a SaaS with industry-specific themes), each vertical might have its own accent color.
- E-commerce product categorization — color-coded categories (electronics = blue, fashion = pink, home = green) can improve navigation speed.
But even in these cases, the additional colors are content colors, not UI colors. The interface itself still runs on 4-6 core colors. The extra colors exist inside specific contexts, not across the whole system.
The Practical Test: Count Your Colors Right Now
Open your current design and list every distinct hue you're using (ignore grays for now). For each one, answer:
- What job does this color do?
- If I removed this color, what would break?
- Is there another color already doing this job?
If you can't answer question 1, the color shouldn't be there. If question 2's answer is "nothing," it shouldn't be there. If question 3's answer is "yes," you have redundancy — pick one and remove the other.
Most designers are surprised by how many colors they're actually using. A typical landing page might have: white, off-white, three different grays, the brand blue, a secondary teal, green for "new" badges, red for errors, orange for sale items, and purple for links. That's 11 colors. Most of them can be collapsed into 5-6.
Summary: The Color Count Framework
- Canvas: 1 color (background)
- Primary accent: 1 color (brand, CTAs, links)
- Neutrals: 2-3 shades (text, borders, surfaces)
- Functional: 2-3 colors (success, error, warning)
- Optional second accent: 0-1 colors (only if it has a specific job)
Total: 4-6 core colors + functional colors.
If you're above 7 distinct hues (not counting neutrals), you probably have colors without jobs. Find them. Cut them. Your design will get better, not worse.
Frequently Asked Questions
How many colors should a website have?
Most websites need 4-6 core colors: 1 background, 1-2 brand/accent colors, 1-2 neutrals, and 1-2 functional colors (success, error). Beyond that, every additional color needs a specific job or it creates visual noise.
What is the 60-30-10 rule?
Use 60% dominant color (background/neutral), 30% secondary (cards, surfaces), and 10% accent (CTAs, links). This ratio creates visual hierarchy by leveraging how the human eye detects contrast.
Can a website use too many colors?
Yes. After 6-7 distinct hues, users can't form a mental model of your visual system. The result is a design that feels scattered and unprofessional, even if each individual color is beautiful.