Color Palettes for Websites (With Hex Codes)
Color is the first thing visitors register, often before they read a single word. A focused set of color palettes for websites keeps your interface consistent, readable, and on-brand across every page. The guiding principle: pick one dominant color, one supporting tone, and one accent — then let neutrals do the heavy lifting for backgrounds and body text.
How to choose a website color palette
Limit yourself to three to five colors and apply the 60-30-10 rule: roughly 60% a neutral or background tone, 30% a secondary surface or text color, and 10% a bright accent for buttons and links. Always check contrast — body text should hit at least a 4.5:1 ratio against its background for WCAG AA accessibility. Match the mood to your audience: blues read as trustworthy for SaaS and finance, warm neutrals feel editorial, and dark schemes suit developer and media products. See our primer on color theory for the fundamentals.
Modern SaaS Blue
Clean, confident, and conversion-friendly — the default for software and dashboards. Blue signals reliability while white space keeps the UI calm.
Hex: #2563EB, #1E3A8A, #60A5FA, #F8FAFC, #0F172A — use #2563EB for buttons and links, #F8FAFC as the page background, and #0F172A for body text.
Warm Neutral
Soft, editorial, and easy on the eyes — ideal for blogs, agencies, and content-heavy sites that want a human feel.
Hex: #FAF7F2, #E7E0D6, #A87D52, #3F3A34 — #FAF7F2 is the background, #3F3A34 the text, and #A87D52 a warm accent for links and headings.
Dark Mode Slate
Low-glare and focused — a favorite for developer tools, dashboards, and media sites viewed in dim settings.
Hex: #0B1120, #1E293B, #38BDF8, #E2E8F0 — #0B1120 is the base background, #1E293B for cards, #38BDF8 the accent, and #E2E8F0 the text.
Accessible High-Contrast
Built for maximum readability and WCAG AAA-level contrast — great for government, healthcare, and large-audience sites.
Hex: #FFFFFF, #1A1A1A, #005A9C, #B91C1C — #FFFFFF background with #1A1A1A text passes AAA; #005A9C for links and #B91C1C for error states.
Minimal Mono
A restrained grayscale base with a single green accent — elegant for portfolios, studios, and luxury brands.
Hex: #FAFAFA, #D4D4D4, #171717, #10B981 — #FAFAFA background, #171717 text, #D4D4D4 for borders, and #10B981 as the lone accent.
Vibrant Startup
Energetic violet and amber for landing pages that need to feel bold, friendly, and click-worthy.
Hex: #7C3AED, #F59E0B, #FDF4FF, #2E1065 — #7C3AED is the primary, #F59E0B the call-to-action accent, #FDF4FF the background, #2E1065 the text.
Tips for using these website palettes
Define your colors as reusable variables (CSS custom properties or design tokens) so a single change updates the whole site. Reserve your accent color strictly for interactive elements — buttons, links, and active states — so users instantly learn what’s clickable. Test every text-on-background combination for contrast before launch, and preview your palette in both light and dark environments. For deeper guidance on how hues affect perception, read about color psychology and complementary colors.
Frequently Asked Questions
What colors are best for a website?
Blue is the safest universal choice because it reads as trustworthy and professional, which is why most SaaS and finance sites lean on it. Pair one dominant brand color with neutral backgrounds and a single bright accent for buttons. The best palette ultimately depends on your audience and the emotion you want to evoke.
How many colors should a website use?
Stick to three to five colors total: one dominant, one secondary, one accent, plus a couple of neutrals for backgrounds and text. More than five quickly looks chaotic and dilutes your brand. The 60-30-10 rule keeps the proportions balanced and the interface calm.
What is the 60-30-10 rule in web design?
It’s a proportion guide: use your main color for about 60% of the layout (usually backgrounds), a secondary color for 30% (surfaces and text), and an accent for the final 10% (buttons and highlights). This ratio creates visual hierarchy and prevents any single color from overwhelming the page.
How do I make sure my website colors are accessible?
Check the contrast ratio between text and its background — aim for at least 4.5:1 for normal text to meet WCAG AA. Never rely on color alone to convey meaning; add icons or labels too. Free contrast checkers let you verify hex pairs before you ship.
Should my website support dark mode?
If your audience uses your site at night or for long sessions, dark mode reduces eye strain and is increasingly expected. Build a parallel dark palette (like the Dark Mode Slate above) rather than simply inverting colors, and test contrast separately since light-mode ratios don’t carry over.
