Imagine a world without colors; that world would be such a boring place, right? This applies to websites without colors. Yet, deciding colors for website is not an easy task. I personally have been asked quite often on how to choose the right colors. If you are also wondering the same thing, this post is probably for you.
In this post, we are going to look into some simple and practical ways to choose colors for your website especially. You might also want to look at Jake’s post about the basics behind Color Theory and how less (or fewer colors) is more for some websites.
1. Brands and Identity
This is I think the easiest way. If you are currently working on a website for an established company or a well-known organization, choosing the color scheme would take no time at all, you can simply extract it from their brand identity.
For example, for McDonald’s you can instantly identify McDonald’s from their golden “M” logo with solid red as the background fill.
(Logo Source: McDonald’s Newsroom Official)
This identity is recognized around the globe, so if you for some reason use Green or Blue instead, people would probably not recognize it as McDonald’s, instantly. Thus, it is more sensible to use these colors as the primary colors.
We can then expand these color variations by tuning the tone (like contrast and the lightness). And there you go, we now have decent variations to make up the website’s color themes.
In some cases, these colors are even dominantly applied, like in McDonald’s Australia.
Here are some other examples:
2. Country-Specific
A country is more or less similar to a company; they also have an identifier, their flag. So it is also practical to extract the color scheme from the flag itself. There is one good example of this, the page of the US President, BarackObama.com.
In the website (before it was redesigned) the colors used clearly corresponds with the US’s flag which were red, white and blue.
Culture, People and Environment
The problem with using color schemes based on country flags is you are bound to bump into the same color scheme, for instance France also uses red, white and blue. If this is the case, we can try exploring their culture, people and environment instead. Let’s take a look at the picture below.
(Image Source: jasmine8559)
This picture is a beautiful view of mount Fuji of Japan. This picture has provided sufficient color information and these are the colors extracted from it.
This approach is probably useful when you are working on a government or tourism website for specific countries. Here are a few good examples:
If you scroll down the page, you will see some of the colors applied in the design are from the country flag; like Green, Red, Black and Yellow.
3. Content and Context
Not working out for you? Time to explore. Generally, websites should have contents to display. There are two primary questions to ask to help identify the proper colors:
- What is the content about?
- And, who will most likely read the content?
For example, let’s say you are building a website that will cover everything about babies. So, the content is clearly about infants, but who is going to read it? It is most likely the mothers. After spinning around for a while we can extract some keywords that will guide us to choose the colors, which in this case are: Babies, Mothers, Female, and baby things (Food, Toys, Diapers etc).
At this point, we can then look for the sources and samples for these keywords to extract the colors, whether by looking around your surrounding or Googling sample images.
We have done the job from this example and I think these are the appropriate colors for our case.
The colors are babyish and feminine (pink), yet the combination could also be stronger with the addition of Green, Orange and Purple to complement.
And here are some examples in this case.
Balita Theme
Metariza
Conclusion
Practically, we can apply any of these approaches discussed here for any design cases. In addition, to do the job of color extraction quicker, you can use this tool Photocopa.
Lastly, do you have other useful approaches to add? Feel free to share your thoughts in the comment box below.
Practical Approach To Choosing Website Color Scheme
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.