As human being, we associate things with other things: that’s how we remember things. Therefore our associations can have a profound affect on our psychological being. In that way, when people think of colors, they often already have a perception of what that color represents, even if it’s just at a sub conscious level.
For instance, classically, red can make someone feel hungry. That’s why McDonalds and Coca Cola are red. So below is a color wheel of the primary and secondary colors (plus black and white) to show what each means. Please note though there might be some discrepancies in regards to a few countries because of their culture and background, and how this affects their perception of certain colors.
Color in Web Design
Above is a picture of a more elaborate color wheel showing tertiary colors as well. Colors on the color wheel that are beside each other are called analogous and colors opposite one another are complimentary. How you use colors in your website is very important, and it will affect your users perception of your site. Different types of color will produce different emotions for your readers, and you should consider this when designing a website. Do these colors reflect the values of the website? Are the demographic using it going to think these colors make sense?
Warm, Cold or Neutral?
Cold and warm colors are just what you would imagine: cold colors are things like blue and green, whereas warm colors are things like red and orange. Warm colors tend to stimulate the user, while cold colors allows them to relax. On top of that, it’s generally said that warm colors seem bigger while cold colors tend to recede and seem small. Therefore, it makes sense that if you’re running a news site, or perhaps a blog, colder colors work better, as they let your user relax. On websites where you’re trying to capture your user, more stimulating colors like red are better to use.
Neutral colors are the likes of black, white, brown, grey, beige, etc. Colors that really have no emotions connected to them. They can be used to bring attention to something else however. For instance, a bright color is going to stand out on a background of black. You could consider these colors to be warm or cold (i.e. black is warm, white is cold), but in comparison with the likes red and blue, they are pretty neutral.
Complimentary Colors
Complimentary colors are colors that are opposite each other on the color wheel, or in other words, colors that produce grey when mixed. For example, red and green are complimentary colors. Complimentary colors cause each other to appear brighter when put beside each other.
Analogous Colors
Analogous colors are neighboring colors on the color wheel. For instance, turquoise, blue and purple could be considered analogous. Analogous colors provide a nice gradient of sorts, as the colors generally go well together, since they’re similar.
Coloring in my Website
When it comes down to it, choosing a color scheme can be hard work. Sometimes you don’t know what to do because of lack of inspiration, and other times you just can’t make the colors work. Try not to go overboard with colors: it’s better to use less than more. If you use every color imaginable, your website’s going to look busy, and chances are the colors won’t even work together.
Take into consideration complimentary and analogous colors: are these what is going to work for you? Analogous colors are a safer option when it comes to color schemes, as they provide a nice even flow of colors, whereas complimentary might cause clashes or not look right.
Still having trouble? Why not try out some of these resources.
Resources
Brand
Certain brands have made color into a way of defining their brand. Google is known for its multicolored logo, and IBM is actually referred to as Big Blue sometimes. Choosing the right colors for your brand could help you to stand out more. Once people start to associate your brand with a color, they’ll often think of you when they think of that certain color. For example (using the example from earlier), if you think of red you might start thinking of McDonalds and Coca Cola.
Color and Usability
Basic User Concepts of Color
As we mentioned earlier, people already have a preconceived idea of what certain colors mean to them. This goes for your users too, and certain colors are ging to initiate feelings in them. If they see red, they are going to think that something has went wrong. Yellow is going to make them think that something minor has gone wrong, or they need to think about something. Green means everything worked fine. Just like street lights, eh? Blue can also signal the okay, but usually green is the color of choice.
Design Bump uses this concept when registering, showing errors in red, and things you have to think about in yellow.
Color Blindness
Color Blindness affects roughly 5% of the population. So when designing your website, you should probably consider taking this into account. That’s why when designing your website, you should not make color the only defining part of a section. Red and Green shouldn’t be used together since this is the most common form of color blindness (can’t differentiate red and green). Hit the Wikipedia page to find out more.
You could even do what Wikipedia does and have a color blind compliant versions.
Wrap Up
That about finishes us up, but you don’t have to stop here! Why not kick open Photoshop and start practicing with your new found color skills? Experiment with colors until you find something you’re happy with.
Remember, you don’t always have to get it right, as long as you’re getting experience in what you’re doing. Happy coloring, and thanks for reading!
twitter
subscribe to our rss feed
like us on facebook
Most Popular
