Psychology of Color to Improve Your Web Designs: Part 1

Color is all around us. It evokes different emotions, responses, and even physical reactions. Successful companies are easily recognizable by their brand color and stick in our minds thanks to it. It is a no-brainer then that understanding the psychology of color can help a great deal in improving your web design and making the right impression on your target audience. By the way, did you know that 84.7% of consumers cite color as the primary reason to buy a particular product?

I talk more in-depth about the power of color psychology and you could use this powerful tool to influence mood and psychological reactions, in another article. It is dedicated to how the use of colors in marketing can increase conversion rates.

In this article, however, I will talk about specific colors and their general psychology, meaning, and usage for websites and products. So, let’s start with the following colors.

● Black      ● Gray     ● Brown      ● Beige      ● Ivory      ○ White      ● Red      ● Orange      ● Yellow

Psychology of color: Black

Keywords

Power, authority, control, mystery, intimidation, elegance, class, the unknown

Good for

Creative and elegant websites; often used in content-heavy websites (with a lot of visuals); movies, music, car industry, jewelry

Bad for

Decreasing readability, it is not good for blogs or where there is lots of text. To offset that, use more “white space” in your design, adjust paragraph size, the kerning, and leading.

Market

Suitable for most markets, except for kids; especially suitable for luxurious products and brands.

Some details…

Web designs with black color look heavier and have higher perceived value.

In combination with other colors

• Red – sensual
• Gold / Silver – elegance, and sophistication, this combination attracts wealthier customers
• Pink – softens the message, attracts the female demographics
• Magenta – striking, bold, attractive to more creative consumers
• As a general rule – the brighter colors you add to the design, the less serious it becomes

Website examples

Psychology of color: Gray

Keywords

Neutrality, indifference, reservedness, seriousness, compromise

Good for

Light grays are perfect for neutral backgrounds. Gray is often used in industrial, metal, wedding, and fashion sites. Good choice for navigation and geometry (different shapes in your design).

Bad for

Gray is bad for usability when used with low-contrast text. Dark grays symbolize depression, grief, mourning – strong, negative emotions. Avoid using only one shade of gray, otherwise, you risk becoming boring.

Market

Suitable for various target markets, when combined with different colors. Speaks business and corporate uniformity.

Some details…

The human eye is able to distinguish around 500 shades of gray (now that could be a film!!) which gives you a lot to work with. Sometimes it is perceived as boring and formal because it’s primarily used in business and corporate, but you can always combine it with more colors to create the desired effect. On the other hand, it’s unobstructed and unpretentious, so it is well received by a broad audience.

In combination with other colors

• Red – more energy and excitement
• Dark blue – more professional
• Black – sophisticated look
• Gold – luxurious
• With lighter colors ( blue, turquoise, yellow) – hi-tech look

Website examples

Psychology of color: Brown

Keywords

Strength, solidarity, comfort, earthiness, maturity, reliability; basic, practical, boring, structure, support, hardworking

Good for

Organic products, agriculture, farming, safety, homely

Bad for

Innovation, tech, sport projects

Market

Not preferred by females, as it sometimes looks “muddy” and too boring.

Medium brown relates well to nature, wholesome food, and agricultural products.

Dark brown relates well to sophisticated and professional men’s products when combined with gold or cream.

Some details…

The color brown relates to quality in everything – a comfortable home, the best food, and drink and loyal companionship. It is a color of physical comfort, simplicity, and quality. From a negative perspective, it can also give the impression of cheapness and stinginess.

Brown is the predominant color on the planet, along with green. It’s comforting and stabilizing, while green is balancing and rejuvenating. The two colors are often used together in designs.

In combination with other colors

• Copper – very trendy, quirky look
• White – good contrast, traditional and depending on the shades – can create some “drama” element
• Blue – peaceful, warm, relaxing
• Fuchsia – brings personality and vividness
• Mint – organic and natural feel
• Orange – hipster-inspired look

Website examples

Psychology of color: Beige

Keywords

Dependable, conservative, flexible, neutral, calm, relaxing

Good for

Backgrounds, since a beige color can take on cool or warm tones surrounding it. Good for paper textures, grungy sites.

Bad for

Has little effect in itself on the final impression a design gives, avoid using it for important elements in your design, such as headings and buttons. Some of the darker shades of type work better than the light ones.

Market

Museums, cultural websites. Overall, it is a nice background color for many markets. Probably not the best choice for men’s products speaking passion, power, drive, and energy!

Some details…

The color beige offers some of the warmth of brown and some of the crisp and coolness of white.

Takes on the characteristics of colors around it.

In combination with other colors

• Purple/pink – feminine, conservative look
• Greens, browns, orange – earthy pallet
• Black – formality and strength
• Navy – sophistication
• Blues – warming up, without overpowering them

Website examples

Psychology of color: Ivory

Keywords

Elegance, calm, softness, cleanliness

Good for

Backgrounds

Bad for

Call to action

Market

Wedding and fashion, home design

Some details…

A similar color to beige is ivory, a neutral, relaxing, and calming color, which has some of the same pureness and softness of white, but with a warmer tone. Ivory represents quiet and pleasantness. Ivory sets a relaxed tone of understated elegance. Generally quiet, it can often evoke a sense of history.

Milk white, pearl, off-white, and opaline are synonymous with ivory or represent various shades of the color ivory.

In combination with other colors

• Peach or brown – earthy quality
• With darker colors – lighten, without the high-contrast of white
• Black – when black is used as a background, and ivory as an accent color – the result is modern, edgy look

Website examples

Psychology of color: White

Keywords

Perfection, purity, innocence, wholeness, completion, cleanliness, virtue, newness

Good for

Background for vibrant elements, minimalistic designs.

Bad for

Too much white can cause feelings of isolation and emptiness, so you have to use it in combination with strong accent colors.

Market

Every market; health clinics, cleaning businesses, cosmetics

Some details…

White contains an equal balance of all the colors of the spectrum, representing both the positive and negative aspects of all colors. Its basic feature is equality, implying fairness and impartiality, neutrality, and independence.

Notice, that in some cultures the color white is related to mourning and death.

In combination with other colors

• Red – draws the attention to the product
• Yellow – light-hearted, fun and happy
• Black – sophistication
• With more colors – less serious

Website examples

Psychology of color: Red

Keywords

Energy, action, passion, excitement, strength, passion, desire, driven, spontaneousness, confidence.

Good for

Restaurants, take-away businesses, sport, activists, call to action.

Bad for

Too much red – if it’s used as a background, has to be done carefully with light contrast and clearly legible text. Avoid using bright red with white text – try a darker red instead to ease the eye.

Market

Any market

Some details…

Draws attention, excites the customer, and stimulates the senses. It stimulates the circulation of blood, the appetite, raises blood pressure, and the heart rate. When overused, can cause anxiety and tiredness. It can be negatively related to blood and war, so choose shades for your designs with caution. Mainly used as an accent color, to prevent overwhelming the viewer. Used in small amounts, it can indicate your passion.

In combination with other colors

• Gold/ silver – increases the perceived value
• Black – adding more sensual notes to the design
• Blue-reds – attractive to upper class market
• Orange-reds – attractive to the working class (lower perceived price)
• With turquoise – one of the most balanced combinations

Website examples

Psychology of color: Orange

Keywords

Adventure, optimism, self-confidence, sociability, enthusiasm, extroversion, risk-taker, creativity

Good for

Restaurants, other food outlets, resorts, travel websites, toys for children, sport; call to action.

Bad for

Use orange sparingly, because of its energy and brightness it can quickly become overwhelming.

Market

Affordable, fun, and adventure projects/products; mostly young people.

Some details…

Psychologically orange vitalizes, inspires, and creates enthusiasm. It stimulates appetite and social conversation.

In combination with other colors

• Deep blue – reliability and trustworthiness
• Black – increases the perceived value
• Aubergine/purple – contemporary and classy

Website examples

Psychology of color: Yellow

Keywords

Cheerful, optimistic, uplifting, creativity, originality, happy, positive, attention

Good for

Catching attention quickly

Bad for

Imparting a message of stability

Market

Children’s and leisure products, entertainment

Some details…

Yellow stimulates the logical side of the brain and mental activity. It promotes wisdom and academic proficiency. Too much yellow can cause anxiety, nervousness, and confrontation. On the negative side can be perceived as non-emotional, spiteful, and deceitful, also impatient.

In combination with other colors

• Orange – healthy, citrus, summer theme
• Gray/black – high-tech look
• Blue – high-contrast, eye-popping combination

Website examples

There are more colors related to this topic, so you could check them in the second part of this article.

In Conclusion

When it comes to the psychology of color in marketing, colors are something much more complex than a few words of explanation and the meaning of each shade. The featured explanations are mostly general and could vary depending on how, in terms of hue and combinations, and in what case you actually use the color.

On the topic, you could also check out our newest article dedicated to exactly how color psychology can influence your target audience to take action.