Website color schemes: roles, ratios and real examples
Updated 2026-09-11 · by the ColorSwoop team
A palette is a list of colors. A color scheme is a palette with jobs. Here is how to hand out the jobs.
The five roles every site needs
- Background: the lightest neutral (or darkest, in dark mode). Used everywhere.
- Text: a near-black or near-white with at least 4.5:1 contrast against the background.
- Primary: your brand color. Buttons, links, active states.
- Secondary: a calmer companion for cards, sections and secondary buttons.
- Accent: a small, vivid color for badges, highlights and success/warning states.
ColorSwoop's palette pages assign these roles automatically by lightness in the UI preview; use Rotate roles to try alternatives.
The 60-30-10 rule
Background and surfaces take about 60% of pixels, secondary areas about 30%, primary and accent about 10%. If your page looks busy, the accent is probably over 10%.
Example schemes by industry
- SaaS / tech: white or #F8F9FA background, #111827 text, a confident blue or violet primary, one green or orange accent. Browse tech palettes.
- E-commerce / lifestyle: warm off-white, charcoal text, terracotta or sage primary. See earthy and boho palettes.
- Finance / legal: navy, gray and a single gold or teal accent. See luxury and gold.
- Gaming / developer tools: near-black background, light text, neon accent. See dark and neon.
- Health / wellness: soft greens and blues on white. See nature and pastel.
Implementing it in CSS
Define the roles as custom properties so the scheme lives in one place:
:root {
--bg: #FFFFFF; --text: #141416;
--primary: #5B3DF5; --secondary: #E9E5FF; --accent: #FF5C8A;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #0F0F12; --text: #F2F2F5; --secondary: #24203F; }
}Every ColorSwoop palette exports this format (plus SCSS, Tailwind and JSON) with one click.
Dark mode
Swap background and text, keep the primary hue but reduce its saturation 10-20% so it does not vibrate, and raise the lightness of the secondary so cards remain visible. Test both modes with the contrast checker.
FAQ
What is the best color scheme for a website?
The most reliable formula is a neutral background, a dark neutral for text, one primary brand color for actions and one accent for highlights. Trustworthy blues and clean grays dominate SaaS; warm neutrals and terracotta suit lifestyle brands; dark backgrounds with a neon accent suit gaming and developer tools.
How many colors should a website use?
Three to five including neutrals. Two neutrals (background and text), one primary, one accent and optionally one secondary is enough for almost every site.
Should my website have a dark mode?
Increasingly yes. Design the light palette first, then create a dark variant by swapping background and text and slightly desaturating accents so they do not glow.