Website Color Schemes: 18 Palettes (2026)

By SayCraft Team · 2026-06-17 · 8 min read

Color is the first thing a visitor notices and the fastest way to make a site feel intentional or amateur. The good news: you don't need a design degree to get it right. A solid website color scheme is usually just a few colors used consistently. Below are 18 palettes with real hex codes you can copy, grouped by mood and use case, plus the handful of rules that make any palette look deliberate.

If you'd rather not pick hex codes by hand, skip to the end — with an AI website builder you can describe the feeling you want and get a cohesive scheme applied to a live site.

The three rules that matter

Before the palettes, the basics. Get these right and almost any color combination will look professional.

The 60-30-10 rule — roughly 60% of the page is your dominant color (usually a neutral), 30% is a secondary color, and 10% is the accent used for buttons, links, and highlights. This balance is what makes a layout feel composed instead of flat or chaotic.
Pick one accent — one bold color that means “click here.” If everything is colorful, nothing stands out. Reserve your brightest color for the actions you want people to take.
Contrast for readability (WCAG) — body text should have a contrast ratio of at least 4.5:1 against its background (3:1 for large headings). Light-gray text on white is the most common accessibility mistake. Run your text and background colors through any free contrast checker before you ship.

Neutrals do the heavy lifting. Most of a page is background, text, and borders — so choose a clean light tone, a deep dark tone, and one or two grays first, then layer your brand color and accent on top.

Modern SaaS & tech

Clean, trustworthy, and high-contrast — built for product pages and dashboards.

Indigo Crisp — #4F46E5 #6366F1 #0F172A #F8FAFC — the default startup look: a confident indigo accent on near-white, with a slate-black for text. Works anywhere you want to read as modern and credible.
Teal Console — #0D9488 #14B8A6 #134E4A #F0FDFA — teal feels technical without being cold; great for analytics tools and developer products.
Electric Blue — #2563EB #3B82F6 #1E293B #FFFFFF — the most universally “safe” SaaS palette. Hard to get wrong for a landing page or sign-up flow.

Warm & editorial

For blogs, magazines, personal sites, and anything that should feel human and readable.

Terracotta Paper — #C2410C #EA580C #FEF3C7 #1C1917 — warm clay accent on a cream background; reads as crafted and editorial, perfect for long-form writing.
Mustard & Ink — #CA8A04 #FACC15 #FAFAF9 #292524 — a golden accent with near-black text feels confident and a little retro; good for newsletters and portfolios.
Rosewood — #9F1239 #E11D48 #FFF1F2 #1F1315 — deep berry tones for food, lifestyle, or a personal brand with personality.

Dark mode

Dark themes aren't just inverted light ones. Use a soft off-black (never pure #000000) so it doesn't feel harsh, lift body text to a light gray instead of pure white to cut eye strain, and make sure your accent still passes contrast on the dark surface.

Midnight Violet — #0B0B12 #1A1A2E #A78BFA #E5E7EB — a calm purple accent that glows on deep charcoal; popular for tech and creative tools.
Carbon Lime — #0A0A0A #171717 #A3E635 #FAFAFA — an energetic lime accent against carbon; high-impact for product launches and developer sites.
Deep Sea — #0F1729 #1E293B #38BDF8 #E2E8F0 — a sky-blue accent on navy reads as premium and dependable.

Minimal & monochrome

When the content is the star. Restraint reads as confidence.

Pure Mono — #111111 #666666 #E5E5E5 #FFFFFF — black, white, and two grays. Timeless for portfolios, agencies, and anyone selling taste.
Warm Gray — #1C1917 #78716C #E7E5E4 #FAFAF9 — the same idea with a hint of warmth, so it feels softer and less clinical.

Bold & energetic

For launches, events, and brands that want to be remembered.

Sunset Pop — #DB2777 #F97316 #FACC15 #1E1B4B — a pink-orange-yellow gradient feel; loud, fun, and great for creative landing pages.
Volt — #7C3AED #06B6D4 #111827 #F9FAFB — violet and cyan for a futuristic, high-energy product vibe.

Calm & wellness

Muted, natural tones for health, mindfulness, and lifestyle brands.

Sage & Cream — #84A98C #52796F #FEFAE0 #354F52 — soft green and cream; the go-to for wellness, yoga, and spa sites.
Ocean Calm — #94B0C2 #5C7A8A #F1F5F4 #2F3E46 — desaturated blues that feel quiet and trustworthy; good for therapy, coaching, and healthcare.

Luxury & premium

Deep, restrained palettes that signal quality.

Emerald & Gold — #064E3B #0F766E #D4AF37 #FDFDFB — deep emerald with a gold accent; classic luxury for hospitality, jewelry, and high-end services.
Noir & Champagne — #161616 #2A2A2A #C8A96A #F5F1EA — near-black with a muted champagne accent; quiet and expensive-feeling.

Playful & friendly

Approachable palettes for community sites, kids' brands, and casual products.

Bubblegum — #F472B6 #60A5FA #FDE68A #334155 — soft pastels with a friendly dark text; warm and welcoming.
Coral Mint — #FB7185 #34D399 #FFFBEB #1F2937 — a cheerful coral-and-mint pairing that feels fresh and modern.

Pair color with type

A palette only does half the work — typography carries the rest of the mood. A warm editorial scheme wants a different typeface than a high-contrast SaaS palette. Once you've picked your colors, see our guide to the best Google Fonts and match the type to the feeling. Still deciding what to build? Browse our list of website ideas first.

You don't have to pick the hex codes yourself

Copying hex codes is the easy part; making them work together across every button, heading, border, and hover state is where most people get stuck. That's the part SayCraft handles for you. Instead of fiddling with a color picker, you just say what you want — “a calm wellness palette, sage green and cream” or “dark mode with a lime accent” — and it applies a cohesive scheme across the whole site, live, with a preview URL you can open immediately.

Don't like it? Say so. “Make the accent warmer,” “darker background,” “more contrast on the buttons” — it adjusts on the spot while you watch. You describe the feeling; it handles the consistency and the contrast math.

Describe your color scheme — watch SayCraft build the site →

Frequently asked questions

What is a good color scheme for a website?

A good website color scheme is usually three to five colors: one or two neutrals for backgrounds and text, one main brand color, and a single accent for buttons and links. Keep most of the page neutral and let the accent do the work. The palette should match the mood of what you're building — calm and muted for wellness, high-contrast and saturated for a bold product, warm tones for editorial. Cohesion matters more than the exact colors.

How many colors should a website use?

Most well-designed sites use three to five colors total: two neutrals (a light and a dark, or a background and a text color), one primary brand color, and one accent. More than five colors starts to look busy and makes it harder to guide the eye. You can add tints and shades of those base colors freely — that's variation within the same scheme, not new colors.

How do I choose a website color scheme?

Start from the feeling you want — calm, energetic, premium, playful — then pick neutrals first and a single accent second. Check that text has enough contrast against its background (aim for WCAG AA), and test the palette in both light and dark areas of the page. If you don't want to hand-pick hex codes, you can describe the mood to an AI builder like SayCraft and it will apply a cohesive scheme to a live site for you.

What is the 60-30-10 rule in web design?

The 60-30-10 rule is a simple balance guide: about 60% of the page uses your dominant color (usually a neutral background), 30% a secondary color, and 10% an accent color for buttons, links, and highlights. It keeps a layout from feeling either flat or chaotic, and it's the easiest way to make a three-color palette look intentional without any design training.