Website color schemes: roles, ratios and real examples
A palette is a list of colors. A color scheme is a palette with jobs. Here is how to hand out the jobs — and what a page looks like once every color has one.
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.
Here is a catalogue palette with the roles assigned by lightness, the way every palette page's UI preview does it:
A page is where a palette becomes a scheme
Four colors, one page: background, text, a primary action and an accent — the roles a real interface needs.
Primary action Secondary#DDE6ED · text #27374D · primary #526D82 · accent #9DB2BF — open Slate StudioThe 60-30-10 rule
Background and surfaces take about 60% of the pixels, secondary areas about 30%, primary and accent about 10%. If a page looks busy, the accent is almost always over its 10%.
#DDE6EDSecondary areas · 30% #526D82Primary & accent · 10% #27374DExample schemes by industry
Category expectations are real, so a scheme usually starts from what the reader already trusts and departs from it in one place. Each of these is a real palette you can open and export.
- SaaS / tech: white or a cool off-white background, near-black 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.
- 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 and dark mode is a five-line override:
:root {
--bg: #FFFFFF; --text: #141416;
--primary: #5B3DF5; --secondary: #E9E5FF; --accent: #FF5C8A;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #0F0F12; --text: #F2F2F5; --secondary: #24203F; }
}
.button { background: var(--primary); color: #fff; }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. The same palette, inverted:
The same scheme with the roles inverted
Four colors, one page: background, text, a primary action and an accent — the roles a real interface needs.
Primary action SecondaryTest both modes with the contrast checker; the dark mode guide has the rules that are specific to dark.
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.