Short answer: A website color scheme is the small set of colors your site uses and the role each one plays. Start with two or three: a neutral dominant color, a neutral secondary one and an accent kept for your main call to action. Use each color the same way everywhere, and never rely on color alone.
What a color scheme does
Nielsen Norman Group calls color one of the most influential tools a designer has. A palette sets the tone of the brand, draws attention and makes the site easier to use. That works when the colors combine well and mean the same thing on every page.
NN/g also warns against reading too much into color psychology: there is little real research that proves a universal effect of a particular color on emotions.
Color harmonies to start from
| Color harmony | How it is built | What it gives you |
|---|---|---|
| Monochromatic | Tones and shades of a single hue | A calm look with few choices to manage |
| Analogous | Colors next to each other on the color wheel | Low color contrast |
| Complementary | Colors opposite each other on the wheel | High color contrast |
| Split-complementary | One color with the two beside its opposite | Contrast a little softer than complementary |
| Triadic | Three colors 120 degrees apart | Three distinct colors to balance |
From Nielsen Norman Group’s article on using color in design, read November 3, 2026.
How to build a palette that works
- Start from your brand colors if you have them; if not, look at the colors you already use.
- Pick a harmony and keep it to two or three colors at first.
- Make the dominant and secondary colors fairly neutral, and keep the accent for the main call to action.
- Apply the 60-30-10 rule as a first draft: dominant, secondary and accent.
- Use each color for one job everywhere, such as one blue for every call to action.
- Never use color as the only way to show information; add text, an icon or an underline.
- Check contrast and color blindness, and test the palette in dark mode if your site has one.
Our color contrast checker guide covers the contrast step, and our brand guidelines guide covers where to write your colors down.
How our own palette works
We read our home page on November 3, 2026, as a visitor, in light and dark mode. In light mode the background is white, body text is a near-black navy (#0A0D13) and the accent is a blue (#3F71D1). Our main button starts from that same blue.
In dark mode the background turns near-black (#0A0B12), the text off-white (#ECEDF2) and the main button runs from violet to blue.
In a full screenshot of our home page in light mode, white takes 64.8% of the pixels and light gray 27.9%, close to the 60 and 30 of the rule. Both are neutrals, as NN/g advises for the dominant and secondary colors. Our blue accent takes 0.5%, far below 10%, because we keep it for what should stand out, such as the main button. Dark text and shapes take 0.8% and everything else 6.1%.
Before you settle on your colors
- The palette has two or three main colors.
- The accent is kept for what should stand out most.
- Each color means the same thing on every page.
- No link, error or status relies on color alone.
- Text passes contrast against every background it sits on.
- Dark mode, if you have one, has its own checked palette.
RememberTwo or three colors, neutral ones carrying the page, one accent for the action, and the same meaning everywhere.
If you want a palette that fits your brand and passes contrast, our web design service can build it with you.
Quick answers about website color schemes
How many colors should a website have?
Start with two or three, as NN/g suggests: a dominant color, a secondary one and an accent. Neutral dominant and secondary colors leave the accent free to mark what matters most, such as your main call to action.
What is the 60-30-10 rule?
A proportion NN/g describes for balance: 60% of the design area in the dominant color, 30% in the secondary color and 10% in the accent. NN/g treats it as a first draft to tweak: our home page sits near 60 and 30 with white and light gray, and keeps its blue accent far below 10%.
Do colors have fixed meanings for visitors?
Not reliably. NN/g notes there is little real research that proves a universal effect of a particular color on emotions. A few colors do carry standard meanings, such as red for stop and green for go.
Can I use color alone to show a link or an error?
No. WCAG says color must not be the only visual means of conveying information, indicating an action or prompting a response. Add text, an icon or an underline, so people who can’t tell the colors apart still get the message.
Should my website have a dark mode?
It can follow the visitor’s choice. Browsers expose whether someone asked for a light or dark theme through the prefers-color-scheme media feature, set in the operating system or the browser. Each mode then needs its own checked palette.
Sources
Read on November 3, 2026. Nielsen Norman Group: Using Color to Enhance Your Design (June 6, 2021). W3C Web Accessibility Initiative: Understanding SC 1.4.1 Use of Color. MDN Web Docs: prefers-color-scheme CSS media feature. Our own case: our home page in light and dark mode at 1,440 pixels, read as a visitor on November 3, 2026.