Color Palettes for Websites — Industry Examples, CSS Setup & Dark Mode Guide

Picking colors for a website is not abstract art — it is a system. Your palette needs to handle headers, body text, buttons, links, cards, alerts, borders, hover states, and dark mode. Here are industry-proven palettes with the exact CSS to implement them.

Industry Color Palettes

Industry	Primary	Secondary	Accent	Why It Works
SaaS / Tech	#1E40AF (Deep Blue)	#F1F5F9 (Light Gray)	#2563EB (Bright Blue)	Trust + clean + professional. Blue dominates SaaS for a reason.
Healthcare	#0D9488 (Teal)	#F0FDF4 (Soft Green)	#059669 (Emerald)	Calming + clinical + trustworthy. Green signals health.
Food & Restaurant	#DC2626 (Red)	#FFFBEB (Warm Cream)	#F59E0B (Amber)	Appetite-stimulating + warm + inviting. Red and orange drive hunger.
Luxury / Fashion	#18181B (Near Black)	#FAFAF9 (Off White)	#A16207 (Gold)	Sophisticated + minimal + premium. Black and gold signal exclusivity.
Fintech	#1E1B4B (Dark Indigo)	#EEF2FF (Lavender White)	#6366F1 (Indigo)	Modern + trustworthy + distinct from traditional banking blue.
Education	#1D4ED8 (Royal Blue)	#FEF3C7 (Soft Yellow)	#F97316 (Orange)	Approachable + energetic + stimulating. Orange signals enthusiasm.
Fitness	#111827 (Charcoal)	#F9FAFB (Near White)	#EF4444 (Red)	Bold + intense + action-oriented. Dark with red accents drives motivation.

Applying a Palette to a Website

A palette is not just five swatches — it is a system with specific roles for each color:

• Background (60%) — Your lightest color. Usually white, off-white, or a very light tint of your brand color. This is the canvas.
• Text — Near-black for body copy (#1A1A1A or #111827). Never pure black on pure white — the contrast is harsh. Use your secondary or a muted version for subtext.
• Navigation / headers — Your primary color or a dark neutral. This anchors the page structure.
• Cards / sections — Your secondary or a slight variant of the background. Creates visual separation without heavy borders.
• Buttons (primary CTA) — Your accent color. This is the most important color on the page — it tells users where to click.
• Links — Your accent color or a blue variant (users expect blue links). Must be distinguishable from surrounding text.
• Borders — Light gray (#E5E7EB or #D1D5DB). Subtle, not distracting. Never your accent color for borders.
• Alerts / feedback — Semantic: red for errors, green for success, yellow for warnings, blue for info. These are independent of your brand palette.

CSS Custom Properties — The Implementation

Define your palette as CSS custom properties on :root. This gives you one source of truth that your entire stylesheet references:

• :root { --color-primary: #1E40AF; --color-secondary: #F1F5F9; --color-accent: #2563EB; --color-bg: #FFFFFF; --color-text: #111827; --color-text-muted: #6B7280; --color-border: #E5E7EB; }
• Reference anywhere: background: var(--color-bg);, color: var(--color-text);, border: 1px solid var(--color-border);
• Override for components: .card { background: var(--color-secondary); }

The power of this approach: changing your entire site palette means editing 7 lines, not 700.

Dark Mode — Same Brand, Different Values

Dark mode is not "invert everything." It is a deliberate remapping of your palette to work on dark backgrounds:

Element	Light Mode	Dark Mode	Why
Background	#FFFFFF (White)	#0F172A (Slate 900)	Pure black (#000) feels like a hole. Dark slate is easier on eyes.
Surface/cards	#F1F5F9 (Gray 100)	#1E293B (Slate 800)	Subtle elevation difference from background.
Text	#111827 (Gray 900)	#E2E8F0 (Slate 200)	High contrast but not pure white (too harsh).
Muted text	#6B7280 (Gray 500)	#94A3B8 (Slate 400)	Readable but clearly secondary.
Primary/accent	#2563EB (Blue 600)	#3B82F6 (Blue 500)	Slightly lighter to maintain vibrancy on dark.
Borders	#E5E7EB (Gray 200)	#334155 (Slate 700)	Visible but subtle against dark backgrounds.

Implementation with CSS custom properties is straightforward. Wrap your dark mode overrides in a media query:

• @media (prefers-color-scheme: dark) { :root { --color-bg: #0F172A; --color-text: #E2E8F0; --color-surface: #1E293B; /* ... */ } }
• Every element referencing var(--color-bg) automatically switches. Zero per-component changes needed.

Common Palette Mistakes

• Too many accent colors. If your page has 4 competing bright colors, nothing stands out. One accent. One.
• Buttons that blend in. Your primary CTA button should be the highest-contrast, most attention-grabbing element on the page. If it is the same color as your navigation, it disappears.
• Ignoring hover states. Every clickable element needs a distinct hover state. Darken the accent by 10-15% lightness. Do not change the hue — just the lightness.
• Testing only on your monitor. Colors render differently on MacBook Retina vs. budget PC monitor vs. phone OLED. Test on multiple devices.
• No neutral foundation. A palette of five vivid colors with no white, gray, or dark neutral will overwhelm every layout. Neutrals are the silent majority of your palette.

Generate and Export Your Palette

• Palette Generator — pick a base color, choose a harmony, export CSS or Tailwind
• Color Picker — grab exact colors from any source
• Hex-RGB Converter — convert between formats for your stylesheet
• CSS Gradient Generator — create gradients from palette colors for hero sections
• Box Shadow Generator — shadows that match your palette tone
• Code Formatter — clean up your CSS after pasting palette values
• Image Compressor — optimize images once your design is final