Don’t underestimate the use of color as a marketing tool. The color of your website can be used to entice your viewers to linger and make a connection. Make sure you set the mood that is right for your target market. Remember that your visitors will form an impression within the fist few seconds. Part of that impression comes from visual cues like color. So choose your colors carefully.
Colors can be categorized as warm, cool and neutral.
Warm Colors
Red
Creates a mood of: Passion, love, violence, aggression, energy, excitement, warmth, sensuality
Uses: Motivate a viewer to take action, show caution or stop
Red can: Make the viewer hungry and project objects as closer and larger
When using red in website design be very careful. The way it looks on your monitor may be very different on another monitor. Bright red can also be very irritating to viewer’s eyes.
Pink
Creates a mood of: Romance, calm, affection, gentleness
Uses: When you want to evoke caring and romantic feelings
Pink can: Appeal to a feminine or romantic side of the viewer
Orange
Creates a mood of: vibrant warmth, a bit less passionate than red, tropical, youthfulness, fire, activity
Uses: Could be used for food or nature websites
Orange can: Convey warmth, make the viewer hungry and stimulate the mind. The eye focuses on it.
Use of the color orange is best used in moderation.
Yellow
Creates a mood of: Sunshine, caution, happiness, hope, light, energy, weakness, purity, understanding
Uses: Makes your website seem lighter and brighter, more spring like
Yellow can: Uplift the viewer to a state of calmness
Yellow can be irritating to the viewer’s eye. Use a pale shade of yellow to create light energy
Cool Colors
Green
Creates a mood of: Renewal, spring, growth, fertility, wealth, calm, envy
Uses: Websites where nature is part of your product. Project a feeling of money
Green can: Relax your viewer and create a feeling of freshness. Make objects seem farther away.
Blue
Creates a mood of: Open sky, vast oceans, intelligence, travel, freedom, trust, sadness
Uses: Mirror the tranquility of sitting under a beach umbrella. Ahhh
Blue can: Make a website more formal
Purple
Creates a mood of: Creativity, spirituality, mystery, dignity
Uses: Subdue your viewers with a pale lavender
Purple can: Be associated with royalty and wealth
Neutral Colors
Black
Creates a mood of: Power, elegance, death, evil, anger, night, mystery
Uses: Borders or barriers can be created visually. Use black sparingly.
Black can: Make the text on your website very readable when a background color is pale or white.
White
Creates a mood of: Purity, cleanliness, peace, perfection
Uses: Create a feeling of airiness or lightness with open white space
White can: Make other colors seem more vivid or pop
Grey
Creates a mood of: Gloom, sadness, conservativeness, security
Uses: Create a feeling of emptiness or void
Grey can: Make the viewer uninterested
Brown
Creates a mood of: Earthiness, stability, hearth and home, tradition
Uses: Give the viewer a safe place to relate other colors
Brown can: Ground the viewer
These websites set the intended mood with color.
 |
Hello KittyPink is the dominant color. This site is all about girls. Other colors used are pastels, cool and calming. This site is playful and kid targeted. |
Massachuse tts Hospital Association
The blues and greens featured in this site set a mood of calm, renewal, intelligence and trust. This site is serious but also friendly. Target viewer may be an adult looking for information. |
|
 |
Cedar Point Theme ParkLots of color creates movement. Blues give it a cool watery feel. Red flags grab your attention. This site creates the mood of family, action and excitement. |
 |
St. Louis Art MuseumBlue, gray and neutral colors make this site very subdued. Tradition and stability can be felt. Quiet. |
| These websites don’t set the intended mood with color. | |
 |
Fiber Optic ProductsNeon text on a black background is very hard to read and annoying to look at. Black creates a feeling of doom or void. This site could have used dark blues and purples to give it a more regal feel. |
 |
Gamequarium.comI’m not sure what this site is offering. The yellow text is so overwhelming that I want to leave as soon as I arrive. It screams caution. |
 |
I think this is an artist’s website but there’s nothing here.Wahhhh! What is it? This site has nothing to offer me. No color. Just blah. |
Computers are capable of displaying millions of colors. Website design it limited to 216 colors. Mac and PC’s both use different color pallets. Only 216 colors are common to both. These 216 colors are “web safe”. Different web browsers will display colors differently also.Is there is a website you have viewed that set a mood with color?
This tool will grab colors used in websites already on the web.
Collect colors rearrange and combine to make your own mood/color scheme for your own site.
I read an article similar to this a while back and I wanted the information about a month ago and I could not find it. This article is perfect. Although not the same, it is exactly what I was looking for back in March. Thanks!
I’m also had read some similar article before but not as thorough as this. Really appreciate what you had done. For me blue color balanced the formal and informal looks for any sites. Thumbs up for you.
Color does effects the outlook of the site.It depends what kind of info you would like to share as well because not all color suit your business type.
A lot of people don’t understand that colors play a big role in a user’s perception of a particular website. I’ve done lots of studies on this in a controlled environment and you pretty much got everything right! Here’s a pro-tip from our study: Blue and White increased ecommerce conversion rates.
This list is awesome. I use a lot of brown, and some creme colors on my main website. I wanted to portray the feeling of “music”, so I tried to imitate the colors of a violin, or concert hall (made out of wood, thus the brown color). It’s good to know that brown can make the users feel at home. That is exactly what I was trying to portray.