Psychology of Website Color Combination to Attract Viewers.

Mon, 12/24/2018 - 11:56 -- admin
psychology of website color

Color greatly affects how viewers perceive not only your web page but your brand overall. When it comes to communicating, few things affect your audience and attract attention. This is why the color is such an important part of not only establishing a mood but also the first thing people respond to in their overall judgment of whether a design is considered good or bad.

That direct connection with color is so immediate and that is why it is important to be aware of the psychology and symbolism of color. Not everyone thinks about or experiences color the same way, but there are some common meanings and emotions associated with basic colors in our culture that can convey your brand’s attitude and appeal to the viewer.

Studies have shown that our emotions, both positive and negative, are influenced by colors. Is your website’s color scheme optimized to bring in new traffic? Does your website design complement those colors? Check out our simple guide to see if your website’s design is costing you, viewers.

What is Color Psychology?

Color psychology is the science of how color affects human behavior. Color psychology actually is a branch of the broader field of behavioral psychology. Suffice it to say that it’s a pretty complicated field. Some skeptics are even dismissive of the whole field of color psychology, due to the difficulty of testing theories. My own research on the topic, as this article conveys, lacks scientific evidence to back up every claim. But that alone is no reason to dismiss the profound and unarguable effect that color has on people.

Where Should You Use Color?

Let’s get oriented to our context. Since color is ubiquitous, we need to understand where you should use these color tips. This article discusses the use of color in website design. Specifically, we’re talking about the color scheme of a website, which includes the tint of hero graphics, headline type, borders, backgrounds, buttons, and popups.

Color and Gender

Often times people subscribe to an old notion that pink is for girls and blue is for boys. The thought is that the same color of clothing that was purchased for you as an infant affects your color choices later in life. This becomes an even more prevalent notion when children or teens.

My experience and multiple studies suggest otherwise. This notion becomes hard to dispel when blue is chosen as one of the major colors for a project. While working on a project many years ago, it was suggested that we let users state their gender and that would change the color from blue to pink. I suggested that we let users state their color choice instead. Overwhelmingly during focus testing, most people chose blue, regardless of gender.

Color and Class

One’s economic class also has a pronounced effect on color perception. Those of the American working class tend to respond positively toward primary colors that are familiar and universally recognizable (i.e. blue, red, or yellow). By contrast, upper-class members of society respond well to hybrid colors that are more complex such as mahogany or magenta.

Color and Design

The colors you use for your website should go hand-in-hand with your design. Always make sure that the colors you select complement, and do not conflict with, the structure and layout of the website. For instance, a black background should never feature blue text. This makes for hard-to-read text and an overbearingly dark aesthetic. Instead, match colors strategically and be sure to provide ample space between your use of different colors on the screen.

Color Tips that Will Improve Your Conversions

Red: Warm & Energetic

The color red is the single most popular color to use for branding and in most publications whether online or offline. That is mostly due to its ability to attract the eye. When used in a mostly black & white design, the color red catches the viewer’s eye the fastest. As you can imagine, here at Red 5 Interactive, we LOVE the color red. (We also love the number 5.)

Because the color red is associated with fire, it can represent both warmth and danger. It should be used with sensitivity though, as it is also associated with the color of blood and violence. So by showing anything that looks like wet dripping paint, it would be best if that paint weren’t red.

When used in marketing or branding, red often project confidence or boldness, strength, and importance.

Orange: Youthful & Fun

Also a fiery color, the color orange communicates warmth but adds a cheerfulness that is less associated with danger. It is a hue that communicates activity and energy.

Orange is a laid-back non-serious color that often creates a creative, youthful, and casual style.

Yellow: Bright & Cheerful

Primarily thought of like the color of the sun, yellow often communicates warmth, happiness, friendliness, and freshness. Yellow is also the universal color for a warning as opposed to red’s role as a sign of danger.

Pure/Bright yellow attracts attention without the sense of danger. Like red’s ability to attract the eye to areas that need emphasizing, it creates a more casual and friendly feeling.

Green: Fresh & Natural

Green is the color of nature, plants, growth, and life itself. It communicates health, freshness, or natural quality. Darker shades of green can also communicate money or wealth.

Nature inspired colors like green and brown are often chosen for projects that are associated with saving the environment or being focused on sustainability.

Blue: Soothing & Trustworthy

Blue is the color of the sea and sky and as such, it communicates peaceful and clean qualities. For financial institutions, this is the go-to color to communicate trustworthiness. When combined with the wealth symbolism of green, it becomes the dominant color scheme of all things financial.

Dark or navy blue is a particularly popular choice for corporate contexts since it is perceived as professional and understated.

Purple: Luxurious & Opulence

The color purple is traditionally associated with royalty, and as such communicates a sense of the luxuriousness that royalty would enjoy. Deeper shades of purple symbolize luxury or opulence, while lighter shades can communicate a childish playfulness.


The Internet is a colorful place, and there is a lot that can be accomplished by using color in the right way, at the right time, with the right audience, and for the right purpose.

  • Never use too many colors, this makes your branding less memorable and recognizable
  • Test several colors. Despite what some may say, there is no right color for a conversion text or button. Try a green, purple, or yellow button. Explore the advantages of a black background scheme vs. a white background
  • Don’t just leave the color choice up to your designer
  • Some colors send similar emotional signals, while others send opposite signals; choose color schemes that invoke complementary emotions
  • Children respond well to primary colors, while elderly folks are more attentive to secondary colors such as pink and green
  • Do research on the culture of your demographic, as certain colors might be off-putting to segments of their population
  • Colors invoke different emotional responses according to gender and class, so always exercise due diligence by researching what your target market does and doesn’t like