How to Choose Colors When Designing a Website

This article is going to cover colors - specifically, how to choose them when designing a website, and how to select them in a way that aligns with feelings, themes, and ideas like calm, trust, elegance, playfulness, or professionalism. Furthermore, the goal is to demonstrate how to choose colors that work within real design philosophies, systems, and standards such as Material UI, WCAG, and more.

How to Pick Colors

Before you start picking colors for a website, one of the most important things to do is define what your website needs to convey. This is where most true professionals start. Perhaps that’s professionalism and calm, or playful and exciting. In those cases, you need to define colors that convey those emotions. For playful, perhaps it’s dreamy colors like light pink and purple, or it could also be green and yellow for something playful and exciting, etc. As such, defining this is where we are going to start as well.

Defining Emotions

So let's start by saying we are making a high-quality landscaping site made for a professional, and we want to choose three colors: two accents and a background color. So, let's define the feelings a landscaping site should convey, and something that works is the following.

• Calm
• Trust
• Professionalism
• Warmth

These work. They are simple and generally convey what a basic landscaping business would want: trust, professionalism, and a little bit of closeness in the form of calm and warmth.

But before we go into actually picking colors, I want to provide some tools so you can define what feelings certain colors convey. To do so, I added a cheat sheet below so you can get an overview. You can also use Google or what I will personally be using for most of this article, coolors. This tool specifically can both help you find colors and understand the psychology and emotions of any color, among many other useful things the website offers.

Picking Initial Colors

So to start let’s pick accents first, then a background. And for our first accent maybe we choose blue? That works; it fits the feelings of calm, trust, and professionalism. But it's also a little cold along with being dreadfully common so since we are doing a landscaping site, a better color might be green. It’s on brand and conveys life, growth, health, and generally hits our emotions, primarily warmth, trust, and calm.

Naturally, let’s choose our second accent. Currently, we need something more trust-generating and professional. We have an exciting, lively color, but it needs balance. Orange would work, it hit's our emotions but again it’s a little loud, so perhaps brown. It’s on theme with landscaping and conveys stability, warmth, and reliability, which promotes what we are currently missing: professionalism.

This is the easy part: the background. This usually splits into two camps for websites: dark themes and light themes. And those usually are either black or white for light and dark themes, respectively. Now, a dark theme is not at all what we want; the emotions are off. Therefore, that means we need a light theme, but pure white is cold and empty. And though backgrounds need to be neutral, we can still add a splash of color. So what do we add?

Well, we know we want white, but let’s add yellow, giving us a tan or ivory color like old paper. It’s no longer cold and empty, and the feelings it conveys are within our emotions so why not?

Basic Color Theory

Now before we take our colors into the next section, let’s talk about color theory. What I am going to go over here is warm vs. cold, color systems, consistency, and common pitfalls thing's that will help you in the next section.

First, let’s go over warm vs. cold colors. There are many use cases in understanding warm and cold colors; for example, the separation of colors into cold and warm alone cuts your millions of choices in half. It can help you feel the difference between something like deep purple and light purple. It can also help with understanding contrast as well, as warm colors often stand out on top of colder colors and vice versa. So how can you tell what’s colder or warmer? Well, in most cases, you can just see how warm something is based on its blue vs. red. If a color has more red, it’s warmer; if it has more blue, it’s colder. This also, of course, affects some of the emotions a color gives off. You can infer that even an exciting color like yellow, which is a color close to red, can be “colder” than another yellow if it has more blue in it, and as such, that color would feel more prominent next to each other.

Any professional is extremely picky about design and coloring, and as a result, you will likely want to edit colors when you are choosing them. And no, you will never know every color or even remember a couple of color codes. But you will often pick a color you like, and it’s close but off. Maybe it’s a tad too cool or too warm. And understanding what HSL means can be extremely helpful in such a situation. Rather than just messing with a slider, you can safely edit a color using the HSL measuring system.

Now, in HSL, H stands for hue, and it is the color; S stands for saturation, and it’s the purity of the color; and L stands for lightness, and it’s rather self-explanatory. But the most important of these are saturation and lightness. If you need to change hue, it’s likely best to find another color. As for saturation, messing with and understanding this can help you cool or warm colors up without really changing them.

So let’s talk about saturation. You can think of it as purity - how intensely brought forward the hue is - and at zero, we are only dealing with lightness, so black or white. And lightness is how dark a color is; this is not accurate, but you can think of it like adding white or black drops of paint into a color.

Now lastly, something I struggled with when starting is color relationships like complementary, analogous, triadic, and mostly these are distractions. Choose accents based on feeling and contrast with the background. And furthermore, you are not merging the colors; they are usually separate. So choose based on how they feel, and that usually naturally makes them fit together. And as a result, usually everything matches well. But there are edge cases - if you’re going for a very colorful website or something generally esoteric, maybe with no neutrals or multiple accents (4 or more) for something like a portfolio - then understanding true color theory is 100% needed. But in 99% of cases, true color relationships can be ignored.

What a Design Needs

Now that we've picked some colors, let's make sure they actually work on a site. As such there are a few rules, systems, and guidelines we will use when finalizing our colors that I want to go over. Understanding these will also show you, somewhat, how to apply colors to a website.

Readability and Contrast

First, readability. This means your accent colors and text colors must be easily visible when placed over your background color or colors. Giving a quick example: say we choose a light scheme and the background color is white. First, our text colors would be two shades of black, naturally contrasting well. But accents are also often used as text colors for important headings, so your accents must be clearly visible above your background. There is even a scale for this called WCAG, but remember only your accents and text colors compared to your background must pass WCAG.

Color Hierarchy

If there is one word to encompass how to make a good design, it’s hierarchy. And of course, this encompasses colors as well and is something we should understand when picking colors and applying them. The most important things to understand are depth/elevation and balance.

Let’s discuss balance. Imagine you use too much of an accent or too little; your entire website can seem unbalanced - either in that it’s bland and not impactful, or too impactful because your impactful colors (accents) are being randomly applied without consistency or balance. This causes attention to not flow where you want it. Users ignore your headings or call to actions because they don’t pop out. Even if you choose great accents and background colors and shades, this can still happen. The best way to avoid it is to follow a rule or idea called the 60/30/10 rule. This is all about percentages of color: 60% of your website is your background, and the 30% and 10% are your two accents. Following something like this can make sure your colors, pages, buttons, and headings stay consistent, impactful, and balanced.

Furthermore something else to note on balance and the 60/30/10 rule: first, the 60/30/10 does not need to be mathematically followed; it’s just a framework for how often to use color. There are even different variations, like the 80/20 rule, or even flipping the rule in certain areas, such as making your 60% swap with your 10% to add some extra excitement, flexibility, and uniqueness to a design. It’s called a rule, but it’s really a guideline.

Now onto elevation. This is something in Material UI, where more important items should feel closer to the user. There are many ways to do this, but here it’s about making sure our colors increase in elevation visually as they get rarer. For example, if we have a white and dark green, and that dark green is on top of the white, it feels closer, it contrasts well, and is less common visually than the white, so it’s “higher” in the 2D design. This also ties into the 60/30/10 rule, where if your website is balanced, no matter what color the 10% is, its rarity alone increases its elevation, making it good for calls to action.

Creating a Palette

So we have picked our colors and defined what rules they need to follow, now let’s actually pick shades to create our palettes.

Background Shades

Backgrounds are a large portion of our website; since we are following the 60/30/10 rule, they are around 60%. But again, that 60% does not need to be a single color, so let’s make a few tan shades. But before getting into that, let’s go into the process of actually finding shades - we can’t just materialize a tan out of thousands of possibilities. So for most color picking and editing, I am again using Coolors to find promising options.

We want tan/ivory, so I found EADCAE on Coolors. It’s nice; it has an old paper look and follows our theme. But say we want a card to sit above this tan, and we don’t want to use our accents because perhaps it will violate the 60/30/10 rule, or maybe it just does not look right. And because of this, we will create multiple shades - at least three colors that are whiter than our current color but not too different that they seem like a completely different color, because that would violate the 60/30/10 rule. So we use HSL and decrease lightness by 5 percent twice to get two more colors, getting these three: F5EED6, EFE5C3, and EADCAE.

And now we have our background. It’s subtle and fits while being balanced and neutral. We can even flip this: currently, the darkest shade is the main background, then lighter shades can sit on top, but there is no problem doing the reverse either. It’s still balanced, follows our rules, and the shades subtly stand out.

Accents

Finally we now get to pick out accents, knowing that first they must contrast against our background and somewhat against each other. As for the “against each other” part, sometimes we might layer the accents themselves over each other, so it’s important that they are at least somewhat passable when layered. However, this part really depends on design choice.

But how do we pick our colors? We want brown and green. The best way is to simply browse palettes, find something you like (or somewhat like), then use that. If it’s not perfect, you can edit it with HSL or look at similar shades to the color you are considering. Just make sure they pass contrast. Something that can help here is keeping warm vs. cool tones and your background color in mind. This can stop you from going back and forth checking WCAG for a color that obviously won’t work. For me I found and edited to get these two color's 496B48 and 44362F a dark green and dark brown.

Testing your Palette

Now we have everything - backgrounds and accents that contrast well against them. That's it, right? We can move forward! Well, no. Just because theoretically everything seems well, there is still visual testing needed. Usually, that means making something to test all variations you might or will use, like so.

What we are doing here is testing all possible variations in a card-like format, seeing our color limitations, strengths, and general visual aesthetics (ps, it’s also a great place to test fonts!).

Now often, when starting to use your palette, even after doing all the mentioned tests, it can feel off or wrong when in actual use. And in that case, as long as it still contrasts well and is the same general colors as you originally (green, brown, and tan), then you can change on the fly or mid-design safely. People do it often, just as long as you still follow the original colors, rules, and thoughts so you don’t move away from your keywords without thinking it through.

Conclusion

Choosing colors is hard. Everyone says different things, and for me, nobody actually talked about the fundamentals like needing a neutral background, contrast, and balance. And those who did showed boring websites or a system with no flexibility, or just collapsed with common rules people use. I hope this article laid out the most important fundamentals so you don’t have to guess around like I did, and in a way that you can edit and grow what I showed here. Otherwise, have a good day! PS my portfolio has many other interesting things as well if your curious!