User Experience
8 common design myths
"Users don't scroll and white space is wasted space" We list 8 design myths you should know
UX and Design
Color psychology – the meaning and impact of colors on the web
Color is more than just a decorative element. Did you know, for example, that the color choices in a digital service can determine how visitors behave? With the right colors you can capture visitors' attention, guide them correctly and increase conversion. We guide you through the importance of colors and what to consider when choosing colors for the web.
Color psychology is a field of research that examines how color affects our behavior and decision-making. It's more than just "green is pleasant" and "yellow is ugly". There are innate components to how we perceive color. There are also personal preferences. When we design and create a strong brand we need to let go of our personal preferences and carefully think through our color choices.
Even if a company has an existing visual identity we may need to adjust or add complementary colors on the web to create the right balance. The right elements should capture visitors' attention. Color choices should help make content accessible and conversion-friendly. The web should also work to build the brand. At the same time we want to evoke the right kind of feelings and get users to absorb our information or purchase our products and services.
Positive and negative associations
Each color has a positive and a negative association depending on which tone or shade is used. Some colors are associated with certain types of feelings and, as we mentioned earlier, they can be very personal. Past experiences can make us like something especially much or a little less. One person sees yellow and thinks of their grandmother's floral tea towel and a delicious sponge cake while another person associates it with discomfort and hospital corridors. Often we have associations unconsciously.
There are also cultural meanings of colors that you may need to consider when designing for an international market. In some countries white is the color of mourning while in Sweden we associate mourning with black. In Hinduism yellow is linked to knowledge and learning while in the West we associate knowledge with purple. We have learned to associate red and green with "on" and "off" as well as red and blue for hot and cold water in taps.
Primary color and complementary color
When developing a visual identity for the web you often have a primary color and complementary colors to go with it. The primary color should make customers recognize the brand and the complementary color (or colors) should contrast and enhance the experience as well as draw the eye at the right moment. Complementary colors can, for example, be used on important call-to-action (CTA) elements but they can also be used subtly, thereby making the primary color stand out more
Brands and colors on the web
Colors are a powerful form of non-verbal communication and an important tool in marketing. Colors give us information. If a tomato is red we know it is ripe. If the sky is dark we know a storm is coming. The same goes for brands on the web. It's no coincidence that blue is the most common color on the internet, that red is a typical sale color, or that environmentally friendly products often have green in their profile. Established brands and colors are closely linked. If we say Coop most people probably think of the color green, and if we say Twitter people think of blue, and so on
So how should you think about colors on the web and your brand? We can take ICA as an example. Red is their primary color. Using too much red on the web can easily become intense and tiring to look at. ICA therefore uses red on important call-to-action elements where they want to capture the user's attention. They have since supplemented their color palette with a light gray and even lighter shades of the red primary color. On the web you may therefore need to complement and adjust the color palette so that it fits web interfaces and supports different user behaviors
If we take IKEA as another example. Their brand colors are yellow and blue. But their website is not only yellow and blue. They use a white base with black and gray as the main complementary colors. They then use blue and yellow on decorative elements such as text callouts and buy buttons. It is the products that should be highlighted and therefore the website’s design is relatively pared-down in its color choices. This creates a good dynamic and gives a clean yet lively feel while the brand still shines through in the details
Color psychology - the meaning of colors in relation to emotions
Warm colors
Warm colors such as yellow, orange, red and pink are often associated with passion, energy and joy. They are dominant and catch our attention. But they can also come across as garish, be perceived as urgent and create unease. On the web they work well as a call to action because they easily catch the eye, for example on a button or a sale price.
Cool colors
Cool colors such as green, blue and purple are often perceived as serious, reassuring and calming. But sometimes they can also seem dull and sad depending on how saturated and vivid they are. Cool colors are common on the web, perhaps because they are calming or because they can be perceived as easier to read. The effect of pleasant colors that make us feel secure and make information easier to take in can increase the likelihood that visitors stay longer on your website.
Green
Green conveys a sense of calm, health, strength and nature. It is associated with renewal, optimism, growth, organic and sustainable, but also with nausea, greed and inexperience. Green is very effective for highlighting and reinforcing environmental aspects. In our culture, green is associated with something positive - that something is "approved". That makes green a good color for elements where you want to show the visitor that a task has been completed successfully or that something is included in a purchase. However, green is a somewhat tricky color because it can occur in so many different shades and can therefore quickly shift from lovely to stale
Associations:
+ sustainability, calm, health, nature, growth
- nausea, greed, inexperienced
Blue
Blue is the favorite color of most consumers and the most common color on the internet. Perhaps not so surprising since blue conveys calm, safety, trust, responsibility and confidence. In sectors where it is important that consumers feel calm and safe, you often see a blue color profile. The banking, finance and technology sectors are some examples. But blue can also convey coldness, stiffness and insensitivity.
Associations:
+ calm, secure, trust, responsible, serious, stable
- ordinary, coldness, stiff, insensitive
Purple
Purple is the historically royal color. Because it is a combination of both red and blue, it has characteristics of both of these colors. Purple is associated with drama, luxury, premium, success and creativity. The purple color also stands for intelligence, knowledge, spirituality and respect, but in darker shades it can also be associated with sadness and sorrow.
Associations
+ drama, luxury, success, creativity, intelligence, spirituality, respect
- sadness, sorrow
Red
Red is a powerful and strong color that triggers strong emotions. It is intense and urgent and signals energy, power and passion. Red raises our pulse and gives us a sense that something is aggressive or urgent. Because of its intensity it is said to increase our appetite. Red is therefore an effective color for sales and call-to-actions to, for example, highlight a special offer that is about to expire or as a warning and validation on the web
Associations:
+ power, energy, passion
- danger, acute, aggression
Yellow
Yellow stands for joy, optimism, energy, youthfulness and curiosity. Yellow is said to enhance feelings of hunger and can give the impression that a product is cheap. Depending on the shade, too much yellow on a website can become intense, distracting and hard on the eye. In excessive amounts it can also come across as unserious and childish.
Associations:
+ joy, youth, lightness, optimism, energy
- unserious, childish
Pink
Pink is perceived as positive, cheerful, creative and passionate. A lighter shade of pink can be calming and childlike while a stronger pink can be shocking. Historically, pink has been associated with femininity and caring.
Associations:
+ passion, thoughtfulness, positivity, femininity
- impulsive, shocking, childish
Brown
Brown is associated with warmth, reliability, being down-to-earth or masculine. Like green, brown in the right shade can signal a sense of naturalness and organic. In the wrong shade, however, brown can convey a feeling of something dirty, unsophisticated or heavy.
Associations:
+ warmth, reliable, down-to-earth, masculine
- dirty, unsophisticated, heavy
Black
In Sweden, black has historically been associated with mourning, darkness, fear and evil, but today it is also linked to a sense of elegance, sophistication, exclusivity, luxury and minimalism. Black is also associated with power, strength and formality and is useful when you want to engage an audience and convey an important, powerful message
As black is a neutral colour, its combination with other colours influences what it conveys. Black, for example, makes other colours appear clearer. If we combine black with pastels we can give the website a playful feel; paired with white the feeling becomes more sophisticated. If we instead add silver or gold we can introduce a sense of exclusivity
Associations:
+ elegance, luxury, minimalism, strength
- sorrow, darkness, fear, seriousness
White
White conveys a sense of positivity, simplicity, neutrality and purity but also emptiness and sterility. White can contribute an airy feeling and is a good color to use as a background on websites, since other colors can easily make a strong impression.
White is also associated with peace and can therefore give us a sense of calm and even inspire us to change. We often speak of a blank page when we want to make a fresh start. But without other colors, white can be experienced as boring and impersonal.
Associations:
+ simplicity, purity, clarity, neutrality
- emptiness, isolation, sterile, impersonal
Gray
Gray is a neutral color and shades of gray can give an exclusive, minimalist and pleasant feeling. Often gray is good to use as a background color on the web, as the content instead receives more attention.
The meanings of the different shades on the grayscale vary greatly. Dark gray is perceived as more dramatic and mysterious while light gray is perceived as more positive. Light gray can often be used instead of white and dark gray instead of black, for example in typography. Gray with a metallic feel is associated with prestige and elegance and is commonly used in the technology industry to signal modernity, innovation and high quality.
Associations:
+ exclusive, minimalistic, stability, balance
- impersonal, boring, uncertainty, depression, melancholy
In conclusion
Color psychology is based on studies, but of course there are exceptions and we might not always take things literally. It’s not colors alone that determine how a digital experience feels. A digital experience is an interaction of colors together with images, typography, tone of voice and brand. Do your research and see how other companies in your industry use colors in their communication. Sometimes it’s good to go with the flow, but other times it can pay off to stand out from the crowd to be remembered. What is your brand’s color profile and does it evoke the emotions you want it to?
Read more about how emotions affect the customer experience.
Do you need help with a graphic profile or branding?
At Limetta we help our clients every day to optimize their websites and build strong digital brands. We handle all aspects of branding such as graphic profiles, brandbooks, style guides, design systems, templates, graphics, illustrations, accessible design and WCAG. Contact us and tell us about your challenges and we’ll help you take the next step.
