Website color combinations
A website needs more than a pretty palette: every color has a job, and text has to stay readable. These 12 website color schemes give each color a role (background, surface, text, primary and accent) with the contrast of the pairs that matter, so you can use them as they are.
12 website color schemes
- Clean SaaSSoftware, startups
- Warm editorialBlogs, magazines
- Dark techDeveloper tools, gaming
- Calm healthClinics, wellness
- LuxuryFashion, jewelry, hotels
- Friendly kidsEducation, toys
- Corporate navyConsulting, law, B2B
- EcoSustainability, outdoors
- Pastel creativePortfolios, studios
- MonochromeArchitecture, photography
- FoodRestaurants, recipes
- Finance trustBanking, fintech
Roles and contrast
| Scheme | Background | Text | Primary | Accent | Text contrast | Button text |
|---|---|---|---|---|---|---|
| Clean SaaS | #FFFFFF | #111827 | #2563EB | #F59E0B | 17.7:1 | white, 5.2:1 |
| Warm editorial | #FBF7F1 | #2B2118 | #B5542C | #6B8F71 | 14.8:1 | white, 4.9:1 |
| Dark tech | #0B0F17 | #E6EAF2 | #7C5CFF | #22D3EE | 15.9:1 | black, 4.8:1 |
| Calm health | #F6FBF9 | #17332B | #2F7D6D | #F2A65A | 13.0:1 | white, 4.9:1 |
| Luxury | #0E0E10 | #F4EFE6 | #C9A227 | #8C1C13 | 16.8:1 | black, 8.7:1 |
| Friendly kids | #FFFDF5 | #1E2A3A | #D9480F | #2EC4B6 | 14.2:1 | black, 4.9:1 |
| Corporate navy | #FFFFFF | #0F1C2E | #1F4E8C | #E4572E | 17.1:1 | white, 8.3:1 |
| Eco | #F7F5EE | #1F2B1D | #4A7C3A | #D99A2B | 13.5:1 | white, 5.0:1 |
| Pastel creative | #FFF9FB | #2A1F33 | #B04A8F | #6CC5B0 | 15.0:1 | white, 5.0:1 |
| Monochrome | #FFFFFF | #111111 | #333333 | #E10600 | 18.9:1 | white, 12.6:1 |
| Food | #FFF8F0 | #2D1B12 | #C0392B | #5E8C31 | 15.6:1 | white, 5.4:1 |
| Finance trust | #F8FAFC | #0F172A | #0F766E | #CA8A04 | 17.1:1 | white, 5.5:1 |
Choosing website colors by industry
Colors carry associations, and visitors expect some of them. None of these are rules, but they explain why so many sites in one field look alike, and where you can stand out.
- Finance, law and B2B: navy, deep teal and slate signal stability; a warm accent keeps it human.
- Health and wellness: soft greens, teals and plenty of white feel clean and calm.
- Food and hospitality: warm reds, oranges and creams suggest appetite and comfort.
- Technology: blues and violets on white, or dark themes with neon accents.
- Luxury and fashion: black, ivory and a metallic gold, with very few other colors.
- Children and education: bright primaries and secondaries, softened with a cream base.
Read more about what colors suggest in color meanings, or start from a curated set in the tech, corporate and food palettes.
How to build a website color scheme
- Start with your brand color as the primary: buttons, links and key highlights.
- Pick a background and a text color with strong contrast, at least 4.5:1 and ideally above 7:1 for long reading.
- Add a surface color a step away from the background for cards, panels and inputs.
- Choose one accent for badges, charts and small highlights, ideally from a different part of the color wheel.
- Plan dark mode: swap background and text lightness and check every pair again.
The Color System Studio does these steps for you from one brand color, in light and dark mode, with contrast checked. To borrow a scheme from a site you like, the website colors tool pulls the colors any site uses, and the palette visualizer previews a palette on real page layouts.
Frequently asked questions
What are the best color combinations for a website?
A light or dark neutral background, a high-contrast text color and one brand color for buttons and links, plus a small accent. The clean SaaS and corporate navy schemes on this page are safe starting points.
How many colors should a website use?
Usually three to five: a background, a text color, a primary brand color, a surface tint and an accent. More than that gets hard to keep consistent.
What contrast ratio does website text need?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text and interface parts such as buttons and icons. AAA asks for 7:1 for normal text.
Should a website use dark mode colors?
It helps many readers. Define dark versions of each role, not just inverted colors, and check contrast again: saturated brand colors often need lightening on dark backgrounds.