How to use Colors in Web Design

We're going to learn how to pick the right colors for your websites. How to combine them with other colors to create a great user experience, and explain to your clients why you chose that color. Today we're going to talk about colors. That is very elusive. And to be honest, something that I struggled with for a long time. Today I want to share all of how I think about this in practice, and the tips and the processes that I use when I pick my colors.

The meaning of colors

Let's get started with when you're getting a web design project, and two things can happen. One, you're already working with a brand that kind of has a visual branding. So it has its colors, and there's not much that you need to pick. You need to work with the colors of that brand. Sometimes, your life would be easy. Right, you'll have the right colors; you’ll have to use them correctly. But other times, you're just going to have to get started from scratch and think like what color. Should I use this on this website, and in that case. The first thing that you have to do is you have to understand what is the meaning of each color. There are many colors and primary wants that we all know, like green, blue and red. There are other kinds of secondary ones, you know, like purple, like brown. All these colors and each have meaning. 

Now you have to understand and know your knowledge base. What is the meaning of each one of these colors so that you can use them correctly? Now some of those meanings are primary associations that we had based on nature. So, for example, the grass is green, and the Leafs are green. And so obviously, the use of green refers to heart and gives us an association of nature. The skies are blue, and so where we have these associations of blue sky, and it provides us with the optimistic feeling of all nature, health, and that kind of stuff because the sky is blue. However, other colors are a little bit more cultural association. So red equals love this is not something that's in nature it's a cultural meaning that we all give to this specific color. Now in the Western culture, black. For example, it is the color of death and mourning. However, if you're in the Eastern culture over there, actually white is the color of death and mourning. You have to know the meaning of these colors in the cultural context that each of these colors has. 

Psychology of color resource

Now I'm going to give you a resource, and that's something that I use every time I have to communicate with my clients about why I made a specific color choice.

The Psychology of Color

The Psychology of Color

It has most of the primary colors here. For example, red gives you many explanations about many of the associations you know with this red color. So the warm positive associated with physical needs energizing. Now this gives you a lot of kind of reasoning to understand. Is this a good fit for what I need or not? Using this understanding and you see, for example, here they're talking about Eastern cultures in China, what does it mean over there positive associations. What is negative? So this will help you first understand if you want to use this color. And secondly, the words and vocabulary to communicate with the other people you're working on, whether it is your client, and why you've chosen to use this specific color may be the primary color or a scented color for your website. So that's the first step that understands the meaning of colors. And make a rational choice based on the website's needs, the content type, and the website's audience. 

Color combination

The second question is going to be okay; I need to combine it with something. How much should I use that color? The first thing is maybe we're going to need to create some palette to work.

A bunch of colors now my favorite too. I used Adobe Systems as the Adobe color, giving you an online tool to create palettes. And you can see here on the left there are different types of color combinations. And you can see how they look on the color wheel. There’s like the Triad, there's you know three colors, three primary colors on the wheel. Complementary, it's you know, the opposite side of the wheel. And you can play with this, and you know. These are these complimentary these called color harmonies. And they will make sure that there is the right combination. For example, if you chose to go with something red, you know because you've decided that red is the right color for your brand.

Then you can play here with the red and see what would be a good fit for this. So if you're going with complimentary, a good fit would be maybe some green. But perhaps you want to go with a kind of split complementary or Triad, and then you get some different combinations, and you can see what feels like something that might be good for you. So this is where I pick up the color palette. And there are tons of other websites with friendly and fancy color palettes. But the way that I work, I usually go with again rationally picking a color based on the meaning of colors—and then seeing what would be a good fit for that color based on the different color harmonies.

The next step is thinking about how to combine these colors. I usually go with a rule from actual interior design and fashion, the 60 30/10 rule? And what that means is it means that 60% of the design itself is going to be the primary color. Then we're going to have 30% as a secondary color. And then 10% of an accent color. 


I want to jump into a few examples and show you how that might look. These are just like an excellent website that I opened up from Lappa Ninja or an excellent design website design reference.


And let's see here, so we have this purplish background, and you can see that most of the screen that we see here is using that color. So I would say that's kind of like the 60. We have this reddish color that you can tell there is about like 30% of that reddish. The 10% I would say the white is 10 percent here and. Don't forget that white and black are actual colors and decide to use something black and white. It's not kind of default that you're going to have black and white in every design you make. I feel like maybe 10% here is the white color. Remember, this is not like a fixed rule like really 60, 30, and 10. We're talking about apparent hierarchies and contrast. We talked about knowing the layout and creating contrast. I feel like the main thing here is the purple, then we have a little less of the red and a little less of the white.

Most of the design is this kind of orange color. Then we have this red color, maybe like that's the 30. and then a little bit of black, which might be the right. When I scroll down, different things are going to happen. But if you look at this, if you think about .this maybe you know in every stage, or every kind of frame that you would look there is still going to be this stark contrast of most of the screen is just like one color, and then there's another color, and then there's less of another color. Very similar to how we talked about layout, something big, medium, it's something small. They relate to colors in that same way. And I can think about this website in the same way. 

Most of it is this kind of a greenish thing. There's also a little bit of color here and a little bit of color here and then a little white. So I hope that helps me think about how to create contrast within your color palette. Again the color is something that you have to get the sensibility of it. I struggle to come up with my creative color, you know, schemes and palettes. Often, I would still get started by thinking about the right color, like a logical standpoint. I would look for references for other people who used this kind of primary color and combined it nicely. A lot of time, it comes back to sensibility and aesthetics, and I just used to copy again not copy the design but copy the relative palette of that somebody else's. I found this helpful just to get started and develop my sensibilities.

One more thing that I wanted to show you with this Adobe tool here is that it'll also help you know to drop an image. Let's drop a picture; for example, this my Facebook profile; you drop that in and enable you to create a pallet out of it. And I think this is also helpful because if you're working with a specific industry or something that already has visuals that you need to do with like product images or know the location of the thing, you're designing. A lot of times, these kinds of extractions can be helpful. They can also work with ingredients that can be interesting to do. I find this useful. Again I'm using Adobe color. There are tons of other kinds of free resources like this. You can google free color extraction from an image. But I find this pretty helpful.


Leave a Comment

Your email address will not be published. Required fields are marked *