Color theory on the web is not the painter’s color wheel from art class. It is a working system for picking a small set of colors that hold up across product, marketing, and brand surfaces, scale into dark and light modes, hit accessibility contrast targets, and still feel like a design rather than a swatch library. The pattern that works for production sites: one strong primary, a quiet neutral foundation, a single accent for action, and a disciplined extension into semantic colors.
Start with role, not hue
The first move in any web color system is to define color roles before choosing colors. Role-based palettes scale; hue-first palettes break the moment a designer needs a fourth or fifth color and starts grabbing whatever looks nice. The roles every modern web color system needs:
A primary brand color that owns identity. A neutral background and surface scale (usually a near-white and a near-black with three to five steps in between). A secondary or accent color used sparingly for the most important calls to action. Semantic colors for success, warning, danger, and info, all chosen to be distinguishable both by hue and by lightness for accessibility. A muted text scale (primary, secondary, tertiary) that derives from the neutral scale, not separate hex values invented per page.
If a system has 47 hex codes and no role names, it is not a system. It is a snapshot. Stripe, Linear, Vercel, and Apple all publish role-based palettes with eight to fifteen named roles, then derive specific hex values for each surface. That is the model worth copying.
The 60-30-10 rule, used carefully
The classic interior-design rule applies, with caveats: 60 percent of the screen should be a dominant neutral (background, surfaces), 30 percent a secondary tone (containers, structural elements, sectional shifts), and 10 percent the accent and brand color (buttons, links, badges, highlights). The exact ratios will vary, but the principle holds. Sites that violate it (40 percent of the screen in a saturated brand color) feel exhausting after thirty seconds.
The single biggest rookie mistake is making the brand color the dominant color. Your homepage is not your logo. The brand color earns its impact by being scarce. The neutral does the heavy lifting. The accent does the conversion work. If the entire screen is brand color, nothing pops.
Contrast is non-negotiable
Web color choices live or die by contrast. WCAG 2.1 AA requires 4.5:1 contrast ratio for normal text, 3:1 for large text (18pt and up, or 14pt bold and up), and 3:1 for non-text UI components and graphical objects. WCAG 2.2 keeps these thresholds. AAA goes higher (7:1 for normal, 4.5:1 for large) but is rarely a hard requirement outside government and accessibility-first products.
Run every text-on-background combination through a contrast checker (the Stark plugin in Figma, the WebAIM contrast checker, or the Chrome DevTools color picker). The combinations that almost always fail: light gray on white (#999 on #FFF is only 2.85:1), pale blue links on light backgrounds, white text on yellow or light orange CTAs, and mid-saturated greens for success states.
The fix is rarely a brand-breaking change. Darken the text by one or two steps. Add a thin border or shadow to color combinations that have to stay legally bound to the brand. Never rely on color alone to convey state; pair every red error with an icon, every green success with a checkmark, every blue link with an underline or a clear visual treatment. Our website accessibility guide covers the full audit and remediation pattern.
Building the neutral scale
The neutrals do most of the work in modern web design. A typical neutral scale runs from a near-white (background) to a near-black (primary text) with five to ten steps in between for cards, dividers, secondary text, hover states, and disabled states. Build this with a perceptually uniform color model (HSL, OKLCH, or a custom curve), not by eyeballing hex values.
The temperature of the neutrals is one of the highest-leverage choices in the entire system. Cool grays (slight blue tilt) read as technical, modern, and slightly cold. Warm grays (slight yellow or red tilt) read as humane, approachable, and editorial. Pure neutrals read as clinical. Match the neutral temperature to the brand emotion. A consumer health brand benefits from warm neutrals; an enterprise security brand often benefits from cool neutrals.
Stripe runs a slightly cool neutral with a hint of blue. Linear runs a deeper, near-black neutral with a touch of warmth. Vercel runs near-black with cool overtones in dark mode and a clean off-white in light mode. Pick a temperature, commit, and document it.
Dark mode is its own design problem
Dark mode is not just an inverted light mode. The colors that work on a white background often look toxic on a black background, and vice versa. A pure brand red that looks confident on white will glow on black. A bright blue link on white can vibrate uncomfortably on black.
The patterns that work: build dark mode with elevated surfaces (a layered black, like #0A0A0B for background, #15151A for cards, #1F1F26 for elevated cards) instead of one flat black. Reduce saturation on accent colors by 10 to 20 percent for dark mode. Use lighter, less saturated text colors (#E4E4E7 instead of pure white). Let dark mode breathe. For more on dark mode design system patterns, our dark mode website design guide breaks down the surface model and contrast targets in detail.
The accent color earns conversions
The single most important color choice on most websites is the primary call-to-action color. It does not have to be the brand color. Often it should not be. The accent color exists to draw the eye to the action you want the visitor to take, and it works best when it has visual distance from the brand color and from the rest of the surface.
Stripe pairs a brand purple with a deep navy that is used for primary actions. Linear pairs its purple with white-on-black buttons. Apple uses blue almost universally for primary actions across product. Notion uses a dark gray near-black for primary actions, with the accent earning attention through contrast rather than saturation. None of these are accidents.
Test your accent color in context. Drop a primary button on the homepage hero, a pricing card, and a settings panel. If it stands out without screaming on all three, it is doing its job. If it disappears on one and overwhelms the others, the choice is wrong.
Color and brand emotion
Color carries emotional and cultural meaning that varies by category and audience. Some patterns hold across most B2B and consumer web design:
Blue reads as trustworthy, technical, and corporate; overused, it reads as generic. Green reads as healthy, growth-oriented, financial, and natural. Red reads as urgent, premium, dangerous, or appetizing depending on saturation and context. Purple reads as creative, technical, and increasingly modern in B2B (Linear, Stripe). Orange reads as energetic, friendly, and slightly less corporate. Black and white read as luxury, editorial, or stark. Yellow and pink work as accents but rarely as primary brand colors outside specific consumer categories.
None of this is law. The point is that color choices carry signal, and a brand should pick colors that match the emotional tone it actually wants to convey, then test the choice in production-context mockups before committing. For more on building a complete brand expression, see our website typography guide on pairing typefaces with palette decisions.
Tools and modern color spaces
Modern web color tooling has caught up with the perceptual problems that used to plague hex-only workflows. CSS now supports OKLCH, a perceptually uniform color space that lets designers shift lightness without weird hue drift. Figma supports it. The major design system tooling (Tokens Studio, Style Dictionary) supports it. Use it.
Practical workflow: build the palette in OKLCH or HSL, generate accessible scales using a tool like Leonardo (Adobe), Radix Colors, or Tailwind’s palette, then export to design tokens. Audit contrast in Figma with the Stark plugin or in browser with the Chrome DevTools color picker. Document the palette with role names and example uses, not just swatches.
Common color theory mistakes
Picking the brand color first and the neutrals afterward as an afterthought. Using the brand color for everything, which kills its impact. Pure black (#000) on pure white (#FFF), which is harsh and creates eye strain; offsetting both slightly is more comfortable. Inventing new hex codes per project rather than working from a system. Ignoring color blindness; eight percent of men have some form of red-green deficiency, and red-green semantic pairs without supporting icons fail them. Choosing accent colors that fail contrast on top of the brand color, then having to invent a third color to make the button readable. Testing colors only in Figma, where the screen is calibrated and bright, not on actual user devices in coffee shops with reflections.
One more, and it is the biggest: copying competitors instead of designing for the audience. The fact that every fintech uses blue does not mean every fintech should. The brand that picks a different lane (a Robinhood green, a Lemonade pink, a Klarna pink) tends to be the one people remember.
Frequently Asked Questions
How many colors should a website use?
A production-ready palette typically has 8 to 15 named roles, with derived scales for neutrals (5 to 10 steps), text (3 to 5 levels), and semantic states (success, warning, danger, info). The visible palette on any single page is usually three to five distinct colors. More than that and the page feels chaotic; less and it feels under-designed.
Should the call-to-action color match the brand color?
Not necessarily. The CTA color exists to draw attention to the most important action on the page. Often the brand color is too dominant elsewhere on the page to also serve as the CTA. A complementary or contrasting color used only on primary actions almost always converts better than re-using the brand color for everything.
What contrast ratio do I need?
WCAG 2.1 AA requires 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold), and 3:1 for non-text UI elements and graphical objects. AAA targets 7:1 and 4.5:1 respectively. AA is the practical standard for most commercial sites; AAA is required for some government, healthcare, and accessibility-focused products.
How do I pick a brand color?
Start with the emotional tone you want to convey, then narrow by category convention (or deliberate divergence from it), then test in production-context mockups across hero, pricing, and product UI. Run the candidate against accessibility contrast targets, against your full neutral scale, and against any logos or imagery the brand already uses. Avoid picking from a single Pinterest mood board.
Is dark mode required for a modern website?
For consumer apps and developer tools, yes; users expect it and OS-level preference detection has made it table stakes. For most B2B marketing sites, dark mode is optional. Build it if your audience expects it, skip it if it doubles design and QA work without clear benefit.
If you want a site built on a real color system that ships fast and holds up across product and marketing surfaces, we design and build in Framer with role-based palettes and accessibility-first contrast targets. Get in touch and we will share recent work.