Most color scheme articles show you a pretty screenshot and call it a day. No contrast ratios. No WCAG verification. No actual CSS. This is not that article.
Below are 8 complete web color schemes. Each includes a primary palette, background/text pairing, accent colors, verified contrast ratios, and CSS custom properties you can copy-paste into your project. Every scheme has been tested — every text-background pair meets WCAG AA or better.
Scheme 1: Modern SaaS (Blue + Slate)
The default choice for B2B software — and for good reason. Trustworthy, professional, easy to maintain. Works for dashboards, documentation sites, and enterprise apps.
CSS: --bg: #F8FAFC; --text: #1E293B; --primary: #2563EB; --muted: #64748B;
Scheme 2: Editorial & Publishing (Warm Neutral)
For long-form reading — blogs, news sites, newsletters. Warm tones reduce eye strain during extended reading sessions.
CSS: --bg: #FDFBF7; --text: #2D2420; --primary: #8B3A3A; --muted: #7D6E63;
Scheme 3: Creative Agency (Dark + Bold Accents)
For portfolios, creative studios, and design-forward brands. Bold and memorable without sacrificing readability.
CSS: --bg: #0F0F1A; --text: #E8E8F0; --primary: #7EE2C6; --card: #1A1A2E;
Scheme 4: Healthcare & Wellness (Calm Green)
For health tech, wellness apps, and environmental organizations. Grounded, trustworthy, and gentle on eyes.
CSS: --bg: #F7FAF8; --text: #1A2E24; --primary: #2E7D32; --highlight: #E8F5E9;
Scheme 5: E-Commerce (Warm + Energetic)
For online stores, marketplaces, and consumer apps. Warm, inviting, and optimized for conversion.
CSS: --bg: #FFFBF7; --text: #2D2420; --cta: #C44536; --sale: #9B1B30;
Scheme 6: Developer Tools (Dark + High Contrast)
For IDEs, terminal emulators, code documentation, and developer-focused products. High contrast for long coding sessions.
CSS: --bg: #1E1E2E; --text: #CDD6F4; --accent: #89B4FA; --code-highlight: #A6E3A1;
Scheme 7: Minimalist Brand (Black + White + Single Accent)
For personal brands, architects, photographers, and luxury minimalists. Maximum contrast, one accent to carry identity.
Pick one accent. Use it for links, buttons, and exactly 5% of your surface area. No more. The scheme's power comes from what you DON'T add.
CSS: `--bg: #FFF; --text: #1A1A1A; --accent: / pick one above /; --border: #E5E7EB;`
Scheme 8: Data Dashboard (Multi-Color + Accessible Charts)
For analytics dashboards, data visualization, and monitoring tools. Multiple distinguishable colors that work for color blind users.
These 6 chart colors are distinguishable under deuteranopia, protanopia, and tritanopia when combined with direct labels. Never rely on color alone — always add text labels to data points.
CSS: --bg: #F5F6FA; --chart-1: #2563EB; --chart-2: #D97706; --chart-3: #7C3AED; --chart-4: #059669; --chart-5: #DC2626; --chart-6: #0891B2;
The Formula Behind All 8 Schemes
Notice the pattern? Every scheme follows the same structure: near-white or near-black background + highly readable text (12:1+) + accents at 4.5:1+. No scheme puts a pastel on a light background. No scheme uses mid-tone text. Every scheme has at least one color that a color blind user can distinguish.
You don't need to invent color theory from scratch. Pick a scheme that matches your brand's personality, copy the CSS custom properties, verify with our Color Contrast Checker, and customize from there. Your users — all of them — will read your content without squinting.