The short answer
Fewer than you think, and mostly grey. A site needs one brand color, maybe one accent, and four or five neutrals covering text, muted text, surfaces and borders. Choose them by the job they do rather than by how they look, store them as variables, and check that text clears 4.5 to 1 contrast against its background. Most amateur sites do not have too many colors. They have too many slightly different greys.
This is the third of the three decisions that make a site look considered, after spacing and type sizes. Like those, it is a short list you decide once rather than a talent you either have or do not.
Why does a site look amateur even with nice colors?
Because the problem is almost never the brand color. It is the greys.
Think about what is actually on a page: text, quieter text, a background, a card that sits slightly above that background, and lines separating things. That is five decisions, none of which are your brand color, and each one gets made in the moment by someone eyeballing a color picker. So the card is one shade, the sidebar panel is almost the same shade, three borders are three different greys, and a caption is light enough to disappear.
Nothing is obviously wrong. The page just looks a bit noisy and a bit homemade, which is exactly the effect random spacing produces, for exactly the same reason.
How many colors do you actually need?
Six or seven values, and only one or two of them are colorful.
- Text. Your darkest value, for body copy and headings. Rarely pure black.
- Muted text. One step lighter, for captions, labels and secondary lines. This is the one people get wrong.
- Surface. The page background, and usually one slightly different value for cards sitting on it.
- Border. A single line color for dividers, input outlines and card edges. One, not five.
- Primary. Your brand color, for the things people click and for the occasional highlight.
- Accent, optional. One more, only if something genuinely needs to sit apart from primary. Most sites do not need this and are better without it.
Add whatever you need for success and error states later. Those are functional and nobody judges a site by them.
Choose by job, not by color
The habit that makes this stick is naming things for what they do. text-muted and border survive you changing your mind about what fills them. grey-400 and blue become lies the first time the client wants a warmer palette, and then you are searching the site for every place the old blue is hiding.
This is the same idea as design tokens, which covers the mechanics. The point specific to color is that the list of jobs is short and stable across every site you will ever build, while the colors filling them change every project.
Good to know
Build the neutrals first, before you pick the brand color. It feels backwards and it works, because the neutrals are ninety percent of what a visitor sees and they are the part that has to hold together. A brand color dropped into a coherent set of greys looks deliberate. A brand color chosen first, with greys improvised around it, is the usual route to a page that never quite settles.
Where the brand color goes
In fewer places than instinct suggests. Buttons and links, the occasional highlight, perhaps one background on one section. That is usually it.
Color carries meaning on a page, and the meaning of your primary color should be roughly "this is the thing to click". Every time it appears somewhere non-clickable, that meaning weakens. A page where the brand color is in the heading, the icons, a divider, a background band and the button is a page where the button no longer stands out, which is the one job the color was hired for.
The restraint is not aesthetic modesty. It is what makes the color work when you do use it.
Will people actually be able to read it?
This is the part that is not taste, and it has numbers.
Text needs a contrast ratio of at least 4.5 to 1 against its background to meet the standard most accessibility rules point at. Large text, meaning around 24 pixels or 19 pixels bold, needs 3 to 1. Interface pieces that carry meaning, such as an input border or an icon that is the only label for a control, also need 3 to 1.
You do not compute this by eye. Paste the two colors into any free contrast checker and it tells you in seconds, and most design tools now show the ratio next to the color picker. The numbers come from the W3C's contrast criterion, which is worth reading once so you know what they cover.
The failure to look for first is muted text. Light grey on white looks elegant on a large bright screen in a dark room, and vanishes on a phone in daylight, which is where a lot of your visitors are. If one thing on your site fails this check, it is almost certainly the captions.
Contrast sits alongside motion in the same body of accessibility rules we wrote about in accessible animations, and it is by far the easier of the two to get right, because a checker gives you a yes or no.
How do you set this up in Bricks?
As variables, named by role, set once on your theme styles so text and links take their colors without you touching each element. Identical exercise to the other two scales, and if you already did those this will take fifteen minutes.
If you use a CSS framework it ships a color system already, and you should map your brand color into theirs rather than running a second palette beside it. Two systems for one job is how sites end up with two blues that are almost the same. Our framework comparison covers which ones do this well.
One warning worth repeating: if you generate sections with AI, it will happily write raw hex values straight into your markup and quietly bypass everything above. Keeping AI inside your color system covers how to stop that and how to repair the sections where it already happened.
Bottom line
Four or five neutrals, one brand color, an accent only if you can name what it is for. Name them by job, store them as variables, put the brand color mostly on things people click, and check that your text and especially your muted text clears 4.5 to 1.
That is the last of the three lists. Spacing, type sizes and color, each decided once instead of improvised a hundred times, are what separate a site that looks professional from one that looks like it was assembled. None of the three requires taste, and all of them are finished in an afternoon.
FAQ
Questions about this topic
How many colors should a website have?
One brand color, one accent if you truly need it, and four or five neutrals. That is the whole palette for most sites. The neutrals do nearly all the work, because most of a page is text, backgrounds and borders. Sites look amateur when the brand color is asked to appear everywhere rather than in the few places that matter.
What are color roles?
Names for the job a color does rather than for the color itself: text, muted text, surface, border, primary. You decide once what fills each job, then you only ever ask for the role. It means changing the brand color later takes seconds, and it stops you inventing a slightly different grey every time you need a divider.
What contrast ratio do I need for text?
At least 4.5 to 1 against its background for normal text, and 3 to 1 for large text, meaning roughly 24 pixels or 19 pixels bold. Interface pieces such as input borders and icons that carry meaning also need 3 to 1. Unlike the rest of color choice this part is not taste: it is a measurable number and a free checker will tell you in seconds.
Why does my site look amateur even with nice colors?
Usually because there are too many greys rather than too many colors. Every panel, border and caption got its own shade chosen in the moment, so nothing quite matches and the page reads as slightly noisy. Fixing the neutrals to a fixed set of four or five is a bigger visual improvement than changing the brand color.
Is light grey text on white acceptable?
Usually not, and it is the most common contrast failure on small-business sites. Light grey body text looks refined on a designer's bright screen and disappears on a phone outdoors. Muted text still has to clear 4.5 to 1, so check it rather than trusting how it looks on the machine you designed it on.