Quick answer: Start with one color that matches the feeling you want your brand to have. Apply it using the 60-30-10 rule, sixty percent neutral background, thirty percent supporting color, ten percent bold accent. Then check every text and background pairing against WCAG contrast minimums, 4.5 to 1 for body text. Everything after that is refinement.
If you have ever opened a color picker, stared at it for ten minutes, and closed the tab without picking anything, you are not alone. Color feels like it should be simple. Pick some colors you like, put them on the site, done. But most people who try this end up with a homepage that looks fine in isolation and slightly off once everything is put together. The buttons blend into the background, the text is hard to read on the hero image, and nothing quite feels intentional.
Here is the part that actually matters: a bad palette is not just a cosmetic issue. It costs you visitors, not because the colors look ugly, but because people cannot read the text, cannot find the button, or leave in the first few seconds because something feels off without knowing why.
The good news is that choosing a color palette is not about having a good eye. It is a process, and once you understand a handful of ideas from color theory, the guesswork mostly disappears.
What is color theory?
Color theory is just a simple set of rules for which colors look good together and why. That is it. Nothing complicated.
Think about a rainbow arranged in a circle. That circle is called the color wheel, and it is the main tool color theory is built around. Colors sitting next to each other on that circle, like blue and green, tend to feel calm together because they are close cousins. Colors sitting across from each other, like blue and orange, create a lot of contrast because they are opposites, which is why they stand out so much when paired.
Every color also has three simple traits. How bright or dull it is. How light or dark it is. And the actual color itself, like red or blue or yellow. Once you know these three traits and how colors sit on that circle, you basically know color theory. Everything else in this guide is just applying that idea to a real website.
Did you know? The color wheel isn't a modern design invention. Isaac Newton created the first one in 1666, splitting sunlight through a prism to figure out that white light is actually made of every color combined. Over 350 years later, designers still use the same basic circle he came up with.
A website’s colors do three jobs at once, and most people only think about one of them.
The first job is identity. Color is one of the fastest things a visitor notices, often before they have read a single word. It sets a tone before your copy gets a chance to.
The second job is guidance. Good color choices tell a visitor where to look first, where the important button is, and what is safe to ignore. A page where everything is the same shade of gray asks the eye to work harder than it should, and tired eyes tend to leave.
The third job, and the one that gets skipped most often, is readability. A palette that looks beautiful in a design tool can still fail the basic test of being easy to read on a phone screen in daylight, which is where a lot of your traffic is actually coming from.
Get all three right and the palette works invisibly. Get one wrong and visitors feel it, even if they could not tell you exactly why.
The building blocks: hue, saturation, and value
Before touching color harmony rules, it helps to know the three properties that describe any color.
Hue is the color itself, the thing you would point to on a rainbow: red, blue, green, and so on.
Saturation is how intense or muted that hue is. A highly saturated red looks almost like it is glowing. Pull the saturation down and you get a dusty, faded brick red.
Value, sometimes called lightness, is how close the color sits to white or black. This is the one most people underrate. If you convert your entire design to grayscale and it still makes sense, your value contrast is doing its job. If everything turns into the same shade of gray mush, your design is relying on hue alone, and that tends to fall apart for anyone with low vision or color blindness.
Here is a quick test you can run yourself. Take a screenshot of your homepage and desaturate it in any photo editor. If you can still tell your heading from your body text and your button from your background, you are in good shape.
Word Count by CoColor harmony: the five combinations worth knowingntent Type
The color wheel is the tool designers have used for centuries to figure out which colors sit well together, and it still works. Here is what each pairing actually does for you.
Click any color on the wheel. The dots show which colors pair with it under the selected harmony rule.
Complementary colors
Complementary colors sit directly across from each other on the wheel, like blue and orange, or red and green. These pairs create the strongest possible contrast, which makes them great for a call to action button that needs to jump off the page. Use them for backgrounds and large areas, though, and they can start to vibrate uncomfortably.
Analogous colors
Analogous colors sit next to each other on the wheel, like blue, teal, and green. Because they are close relatives, they naturally feel calm and cohesive. This is a safe, forgiving choice if you want a website that feels put together without a lot of trial and error.
Triadic colors
Triadic colors are three hues spaced evenly around the wheel, like red, yellow, and blue. This combination is lively and playful, but it needs a firm hand. Let one color lead and use the other two sparingly, or the page starts to feel like a toy box.
Split-complementary
Split-complementary takes one base color and pairs it with the two colors sitting next to its complement, rather than the complement itself. It gives you a lot of the punch of a complementary pair with less visual tension, which makes it a good middle ground if you are still building an eye for this.
Monochromatic palettes
Monochromatic palettes use a single hue in different tints and shades. It is close to impossible to get this one wrong, since everything already agrees with everything else. The tradeoff is that it can feel a little flat if you do not add enough contrast in value.
None of these are rules so much as starting points. A trained designer will happily break them once they understand why they exist. The point of learning the wheel is not to follow it rigidly forever, it is to have a reason for the choices you make instead of guessing.
The 60-30-10 rule
Once you have picked a set of colors, the next question is how much of each one to actually use, and this is where a lot of otherwise good palettes go wrong. People pick three great colors and then use them in roughly equal amounts, which makes a page feel busy and undecided.
The 60-30-10 rule solves this by giving each color a job and a proportion.
Sixty percent of the page should be your dominant color, usually a neutral or a very light tint. This is your background, and it should almost disappear so the content can breathe.
Thirty percent goes to your secondary color, used for things like section backgrounds, headers, or supporting UI elements. It should feel related to the dominant color without competing with it.
The remaining ten percent is your accent, reserved for the things you actually want someone to notice: buttons, links, small icons, a highlighted price. Because it only shows up in small doses, it can afford to be the boldest, most saturated color in your palette.
If a palette looks great in a color picker tool and then feels wrong once it is actually on the page, this ratio is usually the missing piece. The colors were fine. The proportions were not.
To see it rather than just read about it, here is a working example you can drop into a page and adjust with your own colors:
Quick Pre-Publish Checklist
Before you publish anything, run through this in about two minutes:
- What’s the actual job of this piece? Rank for a keyword, convert a visitor, or update a subscriber? The job decides the length range, not the other way around.
- Does the length match the content type benchmarks above, or is it wildly outside them for no clear reason?
- If you cut 20% of the words right now, would you lose an actual idea, or just filler?
- Paste it into a reading time tool. Does the estimated read time match what a reader would expect from the title?
- Are there subheadings every 250 to 350 words so someone can scan it, not just read it top to bottom?
<div class="palette-demo">
<div class="palette-block dominant">60%<br><span>Dominant</span></div>
<div class="palette-block secondary">30%<br><span>Secondary</span></div>
<div class="palette-block accent">10%<br><span>Accent</span></div>
</div>.palette-demo {
display: flex;
width: 100%;
height: 120px;
border-radius: 8px;
overflow: hidden;
font-family: sans-serif;
font-weight: 600;
text-align: center;
}
.palette-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
}
.palette-block span {
font-size: 0.75rem;
font-weight: 400;
opacity: 0.85;
}
.dominant {
flex: 6;
background: #f4f1fb;
color: #2b2b2b;
}
.secondary {
flex: 3;
background: #b8a4e3;
}
.accent {
flex: 1;
background: #6c2bd9;
}Swap in your own three hex codes and the proportions explain themselves. A visitor sees 60-30-10 instead of just reading about it.
What your colors are actually saying
Color carries meaning before anyone reads a word of your copy, and it is worth being deliberate about what you are signaling.
| Color | What It Signals | Where It Shows Up |
|---|---|---|
| Blue | Trust, calm | Banking, healthcare, software |
| Green | Health, growth, money | Sustainability, wellness, finance |
| Red | Urgency, energy | Single CTA buttons, rarely as a dominant background |
| Yellow, orange | Optimism, friendliness | Casual, approachable brands |
| Purple | Luxury, creativity | Design tools, premium software |
Once you have your palette locked in, gradients are a common next step for buttons, hero sections, and backgrounds. If that’s where you’re headed next, this guide on using CSS gradients in web design walks through it.
None of these associations are universal laws. Culture changes what a color means, sometimes significantly. White reads as clean and minimal in most Western design, but it carries associations with mourning in parts of East Asia. If your audience is global, it is worth spending a few minutes researching how your main colors read outside your own cultural context before locking anything in.
Contrast and accessibility are not optional
This is the part that gets ignored the most, and it is the part that actually determines whether people can use your site at all.
The Web Content Accessibility Guidelines set a minimum contrast ratio between text and its background, 4.5 to 1 for normal body text, and 3 to 1 for large text such as big headings. These numbers are not arbitrary. They come from research into what is actually readable for people with low vision, and they affect a real share of your visitors even if nobody ever mentions it to you. Color vision deficiency alone affects a meaningful slice of readers, which is one more reason to lean on value contrast and not just hue.
A common failure point is light gray text on a white background. It looks clean and minimal in a design mockup, and then it turns out to be nearly invisible for a lot of real people reading on a phone in sunlight. Another common one is white text over a busy photo, where contrast is fine in some areas of the image and terrible in others.
The good news is that checking this takes seconds. Free tools like the WebAIM contrast checker let you paste in a text color and a background color and get an instant pass or fail. Build this into your process from the start rather than fixing it after launch. It is a lot easier to adjust one hex code now than to redesign a page later because a client, or an accessibility audit, flags it.
Tools that make this easier
You do not need to build a palette by eye. A few tools do most of the heavy lifting.
Coolors and Adobe Color both let you generate a full harmony based on a single starting color, and you can lock in the ones you like while it experiments with the rest.
Figma’s built in color wheel is useful if you are already designing in Figma, since it keeps the palette attached to your actual layout instead of living in a separate tab.
The WebAIM contrast checker, mentioned above, should be part of your process no matter which tool you use for picking the colors themselves.
None of these tools replace understanding the theory behind what they are doing. But once you understand hue, value, harmony, and the 60-30-10 rule, these tools go from confusing to genuinely fast.
If you want something simpler and don’t need an account, try the free color palette generator on this site. It generates a full palette from a single starting color in a few clicks, similar in spirit to Coolors, without leaving the page.
A simple process to follow
Start with one color that matches the feeling you want the brand to have. Do not overthink this first pick, it just needs to be in the right emotional territory.
Decide on a harmony model based on how energetic or calm you want the site to feel. Analogous or monochromatic for something calm and cohesive, complementary or triadic for something bolder.
Assign your colors using the 60-30-10 ratio before you touch a single page. Know which color is your background, which is your supporting color, and which one is reserved for the handful of things you actually want someone to click.
Check every text and background pairing against the WCAG contrast minimums before you consider the palette finished.
Test it on an actual device in actual daylight, not just on your monitor at your desk. Colors read very differently on a phone screen outdoors than they do in a dim room on a calibrated display.
As a real example, hsarticle.com settled on a purple accent system built around a couple of related purple shades, paired with a mostly white and light gray base. It is close to a monochromatic approach with one accent hue doing the heavy lifting, and it holds up because the supporting neutrals stay out of the way and let the purple do its job in the small percentage of the page where it actually appears.
Mistakes that quietly kill a palette
Using too many colors is probably the single biggest issue. Three to five colors, including your neutrals, is usually enough for an entire website. Every additional color you add makes it harder for the eye to know what matters.
Treating every color as equally important is the second most common mistake, which is really just the 60-30-10 rule being ignored. If your background, your headings, and your buttons are all fighting for attention, nothing wins.
Choosing colors purely on personal taste without checking contrast is the third. A palette can look stunning in a mockup and still be genuinely hard to use for a meaningful number of your visitors.
Ignoring how the palette looks in grayscale rounds out the list. If a design only works because of hue and falls apart the moment you remove color, the underlying structure was never solid to begin with.
Frequently Asked Questions
How many colors should a website palette have?
Three to five, including your neutrals. Beyond that, visitors struggle to tell what actually matters on the page.
What is the minimum contrast ratio for website text?
4.5 to 1 for normal body text, and 3 to 1 for large text, based on WCAG guidelines.
What is the 60-30-10 rule in web design?
A ratio for applying your palette. Sixty percent dominant or neutral color, thirty percent secondary color, ten percent accent color reserved for buttons and links.
Is a monochromatic color scheme good for websites?
Yes. It is one of the safest options since every shade already agrees with the others. The tradeoff is that it can feel flat without enough contrast in lightness and darkness.
A good color palette is not really about finding the right colors. It is about picking colors with intention, giving each one a clear job, and checking that the result actually works for the people who have to read it. Once that process is in place, the rest gets a lot less stressful.
