The Psychology of Web Design, Part 2: Color

A website is often dictated by the site’s brand identity as well as the target audience, but how colors are used plays a part in how the user feels when browsing the site. The types of colors used also play into the psychology of your design and go hand-in-hand in influencing people's behavior. Because of this, designers turn to the psychology of color to help them create websites that leave the user wanting to come back.

If a website’s color gives the wrong impression, it can suggest inexperience, unprofessionalism or even untrustworthiness. However, if it’s the right impression, it will give the opposite effect. Designers do not rely solely on the meaning, characteristics and emotional attitudes of colors. They have to take into consideration the company and its branding. That being said, it is good to understand how color affects us.

Color Associations

(The following material is referenced from "The Principles of Beautiful Web Design", by Jason Beaird and "The Psychology of Color in Web Design" by Neeru)

Red

Red is a stimulating, exciting color. It is associated with passion, power and sometimes anger. It can be used for warnings or to show danger, but it can also suggest strength, determination and boldness.

Too much red can make us feel over-stimulated and irritated. The darker shades of red such as burgundy and maroon have a rich, indulgent tone. These colors might be good for selling wine or living well. Brighter reds, like true red or tomato, are great for youthful websites that want to suggest energy and eagerness to leap before they look.

Pink

Pink tends to make people feel loved and protected, but also can cause feelings of lethargy. It’s also associated very strongly with youthful femininity. It is playful and brings to mind bubble gum and innocence. It is ideal for websites that hearken back to olden days, or that target a particularly feminine audience. 

Orange

Similar to red, orange is an active and energetic color. It is thought to promote happiness, and represents sunshine, enthusiasm and creativity. Orange is a more balanced and less overwhelming color, as well as being more informal and less corporate feeling than red. Because orange does not show up in nature often, it tends to jump out at us making it vibrant, energetic, friendly and inviting. It is ideal for designs that need movement and energy. Websites that want to showcase their creativity often choose orange because it is unique and exciting, but it still has the comfort of a warm color. Orange also stimulates metabolism and appetite, so it is a good color to use for cooking and food. Bright orange can reduce depression and sadness. 

Yellow

Yellow is often considered the most energizing color. It represents joy or optimism and can energize you and help you think more clearly. Some say that too much yellow can be overpowering and cause arguments.

From the earliest ages, people learn to associate yellow with the sun, so it becomes associated with warmth and happiness. That makes bright yellow perfect for sites designed for children, as it grabs their attention.

More subtle shades of yellow have more complex associations. Darker shades can suggest antiquity, suggesting yellowed parchment. Because of that, it can also be associated with wisdom and curiosity. It therefore is great for sites that want to demonstrate a sense of authority and intelligence.

Green

Most commonly used in association with nature, green is a soothing color that symbolizes growth, freshness and hope. It can also represent wealth, stability and education and can give users feelings of calm, rejuvenation, affluence and optimism.

Darker shades are more linked to money, so sites that want to suggest affluence, growth and stability often use those shades. Lighter shades are more associated with spring and growth, so websites that want to reflect relaxation, freshness and honesty often use lighter shades.

Green is also directly associated with the environmental movement, so sites that aim to broadcast ethical standards often use green.

Blue

Blue symbolizes openness, intelligence, and faith and has been found to have calming effects. It has an element of spirituality about it and conveys a sense of stability and clarity of purpose. It is also appealing because of it's association with the sky and sea. Blue calls to mind dependability, trustworthiness and security.

In China, blue is associated with immortality, while people in the Middle East view blue as a color of protection.

Blue and green are known to inspire peaceful feelings, and people are often able to concentrate better and work in rooms painted in soft blues and greens.

Most corporate and business websites use dark blues to call to mind their experience, success and reliability. Light blues are best for friendly, open websites, like social media sites.

Purple

Purple balances the stimulation of red and the calming effects of blue. It has long been associated with royalty, power and nobility, so it is no surprise that dark shades of purple imply wealth and luxury. Lighter shades suggest fields of lavender and are associated with spring and romance.

Websites that look mysterious, yet elegant, use dark purples. Those sites that opt for lighter shades will speak to people looking for romantic items or ideas.

Black, White & Grey

Black, white and grey are usually background colors, allowing brighter colors to make the real impact. Still, they call to mind their own associations.

Black suggests power, modernity and sophistication, while white suggests cleanliness, simplicity and innocence. These competing associations play off of each other as nicely as the colors themselves do, making black and white designs especially strong.

The color white is often overlooked in design, but white can help promote the idea of clean power. In the west, it is a symbol of perfection, light and purity. In China, white means death and mourning. With these cultural distinctions, it should remind you to research the colors association of your target audience because they may vary from your own perception.

Grey is a neutral color. When used well, it is associated with tradition, somberness and calmness. When used badly, however, it can cause a design to lack energy.

All of these colors are best for websites that want to call to mind tradition and seriousness, like news sites.

Browns

Browns, which include creams and tans, are often used for textured backgrounds. Backgrounds that mimic paper, fabric or stone are usually brown, and as such, browns give a site a sense of wholesomeness and coziness.

Creams are calm, elegant and pure, making them a great background color for a website that wants to imply a sense of tradition. Tans are conservative and bring to mind piety. They can be dull, but they can also be reassuring, which makes them ideal for a site that doesn’t want to be too bold or outrageous. Dark brown feels wholesome and reliable, like a loaf of bread. It is associated with warmth and comfort. Sites that want to demonstrate experience and reassurance often use brown.

Color Temperatures

Warm colors range from red to yellow, orange, pink, brown and burgundy. They represent heat and motion because of their link to the sun and fire. When in the vicinity of cool colors, the warm colors are dominant. 

Cool colors are colors from blue to green including some shades of violet. Cool colors are calming and can help reduce tension. Cool colors tend to recede, making them good for backgrounds and larger elements on a page that won't distract from the content.

Color Value

The lightness or darkness of a color is its chromatic value. Adding white to a color provides a tint of that color, and a shade of that color is made by adding black. This is important because a color palette works well if the individual colors are the same value.

Saturation

Saturation is the intensity of a color, the strength or purity of that color. When you de-saturate, you take out color. A vivid blue will call more attention to itself than a dull orange. Dull colors are softer and more gentle, creating a calm mood.

Color Schemes

Monochromatic: one color with different tints and shades.
Analogous: colors that are adjacent to each other on the color wheel.
Complementary: colors that are opposite to one another on the color wheel.
Split Complementary: use the two colors that are adjacent to your base color's complement.
Triadic: push the split complements out one notch. The colors are equally balanced on the color wheel.
Tetradic: made up of two complementary color pairs rotated around the color wheel; they form a rectangle on the color wheel or double complementary.

Tools for Color Palettes

Paletton
Adobe Color CC

Side note: In Photoshop we’ll use Hexadecimal Notation colors which is typically referred to as a “HEX color.”

How many colors do you need to design a website?

It depends on the complexity of the site. Some websites assign a different color for each page of the site to help users know their location and this can equal up to 5 or 6 colors. Other sites, even complex ones, use 1 to 3 colors.

As you can see, using color to help convey a positive user experience in your website is in your hands and color largely depends on the tint (lightness), hue (type) and shade (darkness) of the color, as well as how much of the color you choose to use.

In the next post, we'll learn about the importance of typography.



References:
http://www.vandelaydesign.com/the-psychology-of-color-in-web-design/