Design, UI, UX, Insights

Psychology of Color – Improve Your Web Design Pt.1

Learn how the use of neutral and warm colors on your website can affect the behaviour of your audience. Get ideas for suitable color combinations for your market.

Color is all around us. Even gray has 50 shades, apparently. It evokes different emotions, responses and even physical reactions. Famous companies are easily recognized by their brand color and stick in our minds thanks to it. It is a no-brainer then that understanding 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?

Use this powerful tool to boost your conversions and get the right visitors for your website!

Psychology of color:

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, 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

  • Black with red – sensual
  • Black with gold / Black with silver – elegance and sophistication, attracts wealthier customers
  • Black with pink – softens the message, attracts the female market
  • Black with magenta – striking, bold, attractive to more creative consumers
  • As general rule – the brighter colors you add to the design, the less serious it becomes

Website examples

Mohammoot

Garden Eight

MØM

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 unobstructive and unpretentious, so it is well received by a broad audience.

In combination with other colors

  • Gray with red – more energy and excitement
  • Gray with dark blue – more professional
  • Gray with black – sophisticated look
  • Gray with gold – luxurious
  • Gray with lighter colors ( blue, turquoise, yellow) – hi-tech look

Website examples

Change Gout

Nirvanico

Filema Rodion

CA.True Perfection

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

  • Brown with copper – very trendy, quirky look
  • Brown with white – good contrast, traditional and depending on the shades – can create some “drama” element
  • Brown with blue – peaceful, warm, relaxing
  • Brown with fuchsia – brings personality and vividness
  • Brown with mint – organic and natural feel
  • Brown with orange – hipster-inspired look

Website examples

Ensemble Correspondances

Museo Del Gioiello Vicenza

Lundhags Boots

The Edmon

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 the some of the crisp and coolness of white.

Takes on the characteristics of colors around it.

In combination with other colors

  • Beige with purple/pink – feminine, conservative look
  • Beige with greens, browns, orange – earthy pallet
  • Beige with black – formality and strength
  • Beige with navy – sophistication
  • Beige with other blues – warming up, without overpowering them

Website examples

Tinkering Monkey

Web Is Love

Infin Vision

Hull Digital Live 09

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

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

Website examples

Tinkering Monkey

Web Is Love

Infin Vision

Hull Digital Live 09

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

  • White with red – draws the attention to the product
  • White with yellow – light-hearted, fun and happy
  • White with black – sophistication
  • White with more colors – less serious

Website examples

Super Duper

280 St Marks

86 1/2 years

Gather Content

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 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 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 use as an accent color, to prevent overwhelming the viewer. Used in small amounts, it can indicate your passion.

In combination with other colors

  • Red with gold/ Red with silver – increases the perceived value
  • Red with 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)
  • Red with turquoise – one of the most balanced combinations

Website examples

Main Emblem

Fuu Ringo

AllenDjal Inc

BIGSOUND Buzz

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

  • Orange with deep blue – reliability and trustworthiness
  • Orange with black – increases the perceived value
  • Orange with aubergine/purple – contemporary and classy

Website examples

La Lunetterie Du Coin

eTecc

Fpc Agency

Send Thanks To

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

  • Yellow with orange – healthy, citrus, summer theme
  • Yellow with gray/black – high-tech look
  • Yellow with blue – high-contrast, eye-popping combination

Website examples

Orbit Delivery

Brussels Museums

Coderweb

Booreiland

Do you think you can improve your website design with psychology of color?

We are done with part 1 of psychology of color and are curious to hear what you think about it! Did you read something new and interesting?

Which are your favorite websites and why? Do you think the use of color is one of the reasons you like them so much?

You are more than welcome to share your favorite websites and colors in our comment section below. We are excited to see what you like and why.

Yes, we’ve focused exclusively on the psychology of color and how it can be used in website design, but we are cooking up more articles on color, tools for selecting effective color schemes and more. Just stay tuned!

Cheers,

htmlBurger team

Leave a Comment

Share