Colors on websites: Beyond Aesthetics (Part I) Finding out why colors are probably way more important than you think.

Last Updated on July 10, 2024

Colors are around us everywhere, even in the virtual world. Many people may think that their importance is only linked to aesthetics, after all: “If your website needs to be pretty, just add the most eye-catching colors to attract users’ attention!”

Could any combination of eye-catching colors be the best for your website?

Navigation
Why does it matter to you, as a developer?
Wait, so colors really mean something?
Wait, so colors can really change my emotions?
Colors on websites
Now, what?
References

Read part two here.

You probably already recognize some brands just by their color, right? These striking tones on websites and logos have a direct connection with the products these companies offer. And nowadays, there are several studies linked to colors and the impressions they give to humans.

So…

Why does it matter to you as a developer?

You can use that knowledge in many areas. But particularly, as a dev, it’s useful to understand color theory’s importance! If you think the benefits of using harmonious colors are just a “pretty website”, you may be limiting your app’s potential.

"90% feel color can assist in attracting new customers."
"76% believe that the use of color makes their business appear larger to clients."
colorcom.com – Xerox Corporation and International Communications Research

In addition to these studies, you see examples every day: there is certainly a website that you like more because its contrast doesn’t strain your eyes. So, what other reasons do we programmers have to care about colors?

Clients — While you’re working for a client, being able to make suggestions that collaborate with the idea of the product and its colors is essential. In addition to being able to analyze whether the colors already used work well and try to keep the project in the same direction as its target audience.
Personal projects — In some cases, you’ll need to create your own websites, such as your portfolio and side projects. So, not having a brand that already has a color palette can prove to be a challenge. If you don’t know how to create a harmonious and meaningful palette, your users will have a low dwell time on your websites.
SEO(Search Engine Optimization) — Keeping your website high in search rankings is an ambition for any programmer or team, and colors help you with that! The use of harmonious colors and a good color contrast level increase readability, accessibility, and users’ dwell time in your application. And those aspects are linked to SEO, but of course, they alone are not a guarantee. To find out a little more about SEO in other aspects besides color, read this really cool article written by João Victor Vogler.
Personal knowledge — Color theory can be applied in many other areas, such as promotional image creation, digital marketing, and UX/UI Design. Knowing about it can open new doors and opportunities for you, as a programmer or any other role in the technology field.

We’ll talk about how various colors can bring different effects to your user’s experience in your application. And, in part two, I’ll explain more about color theory and how to build palettes.

However, it’s important to mention this alone won’t increase the number of visits. For your software product to be well-regarded and popular, good code practices, testing, and other accessibility aspects not directly linked to color must be considered.

With that in mind, let’s investigate how to get the most out of colors in our apps!

Wait, so colors really mean something?

Yeah! And way more than some people think. As you’ve seen so far, colors are analyzed by various design professionals when creating a web page, for example.

To be able to use the correct contrast level and maintain color harmony in your application, you’ll want to understand the effect they have on humans.

Wait, so colors can really change my emotions?

Well, you may have heard about people mentioning how red means love or hate, or how yellow is related to happiness, right? But is there a real study behind these statements?

Color psychology aims to analyze how colors impact our lives and what emotions they can evoke.

An example of that applied to websites would be using lighter colors in applications or websites targeted at children, as, according to studies, these would be some of the colors that are part of their preference. Applications targeted at teenagers can benefit from the correct use of shades of purple, red and blue, according to these sources: references 01, 02, and 03.

And there’s also the impact of colors in different countries. Their meanings may be completely different in other parts of the world. An example of this is red, seen as related to urgency, danger, and love in Western countries. While, in India, it means purity, as well as being used in wedding dresses. Studying your target audience is paramount.

One of the colors that is extremely used in the tech world is blue. It is also considered the most popular in the world. You may have noticed how many technology apps and websites use shades of blue on their websites, as in the examples below, as well as other websites like Dropbox and IBM.

See website

This color is known to mean security and logic, it also expresses loyalty and trust. That’s precisely linked to how common this color is in our daily lives, being present in the sky and the sea, both landscapes much appreciated by people in general.

By choosing the correct palettes, these websites can align their users’ emotions with the company’s objective, in addition to providing visual comfort and increasing the public’s dwell time in their applications.

But what about the other colors?

Colors on websites

Red — Intense and eye-catching, this color is often used in applications across the Internet, as well as being my favorite. It’s very present in buttons in Call To Action areas to create a feeling of urgency, in addition to highlighted areas of many applications, as you may have already seen.

Red has the longest wavelength, making it reach human eyes first when compared to other colors. Furthermore, red increases the speed of our reactions and has greater saturation, making it one of the brightest. Because of this, its meaning includes impulsiveness and emotion, while at the same time exuding power and strength when used in the correct tones.

However, websites that overuse red will have a low level of accessibility due to its high level of brightness and strength. It’s important to be careful with the contrast on your website so that your background differs from the main content of the page so as not to affect the eye health of your users. If your page uses red excessively, the dwell time will be low. Check out a little more about this in this article about how dwell rate works and affects your website. I will also touch on points regarding accessibility and tools that can be used to analyze your website in the final topics.

Example: Netflix on its website manages to apply the principles mentioned above in a well-balanced way. Note how the background color is dark, preventing red from causing eye strain, and creating a more immersive experience during user navigation. Furthermore, red reminds us of the bag of popcorn in the cinema contrasting with the light color of the popcorn, this quickly directs the user’s thoughts to the type of product offered.

It’s also interesting to mention that red is used in one of the lenses of the famous 3D glasses in advertisements, classic symbols of a movie night. Also, note that the dark background tries to imitate the darkness of a movie session at the cinema. In contrast, the main items that remain red are the buttons and the logo. Just what the website wants to highlight to its users.

Yellow and orange — These two colors are closely related to positive emotions and are very present in applications linked to younger audiences. Yellow has already been shown to increase people’s metabolism and even self-esteem.

But we should be careful when using yellow, as it is one of the most difficult colors for human vision to process. Because of this, it can cause great eye strain and even nausea for prolonged periods.

Yellow has a relatively long wavelength and is the most visible color, which is why it catches our attention so much. It is constantly used in areas related to ads and alerts in an application.

Orange has effects linked to creativity and immaturity. Also, it is normally related to feelings of comfort since sunsets have several shades of this color too. Additionally, in some studies, 29% of people place orange as their least favorite color. So, it would be wise not to exaggerate either.

However, the orange color is present in pumpkins and other food and is usually related to meal times. So, applications linked to Halloween or food usually can make good use of it.

Example: I don’t want to make you feel hungry, but let’s analyze the following image from the website Popeyes which uses orange wisely. Notice how the menu and buttons maintain harmony with the images linked to the food being sold. Orange quickly causes feelings of comfort and even hunger in users, encouraging them to buy the product more frequently. Note that the CTA card has a balanced contrast level with the orange tones of the main screen background.

There’s also the Snapchat website, which uses yellow. In this case, it symbolizes joy and attracts the attention of its target audience: young people and groups of friends looking to take funny photos with comical filters. But, don’t worry, as you can see, I spared your sight by not showing the website image with its high contrast of yellow, I couldn’t bear it, it was too much.

Snapchat website may have a low user retention rate on the website due to the color quickly tiring the eyes. It’s important to note that although the color may match your product, using it excessively can harm the user experience and the website’s accessibility.

Purple — This color is linked to elegance and superiority. It is one of the rarest colors in nature and, because of this, it can give the impression of being artificial and/or special. Also, according to this reference, purple dye was costly and very difficult to make in Rome during the first century, further justifying its specialty.

Purple is also the color with the shortest wavelength and is the last to be seen. Thus, it can be associated with distant and expansive space, suggesting themes about spirituality and creativity. Typically, applications that seek to sell products focusing on quality or high value also use purple.

Example: Hallmark has a website that uses purple in a balanced way. It has tones that are not too bright but also not too opaque, bringing balance and, in turn, seriousness and confidence in its design. Even though it is considered an elegant color, it was not used exaggeratedly, only on links and buttons and in tones that are less intrusive to the eyes, also creating a feeling of delicacy.

Green — It can be found very easily in nature and is also known for giving a feeling of calm and tranquility. A fun fact that I found quite interesting is the use of the color green in night vision precisely because our eyes can discern most of its tones easily, cool, right?

Furthermore, green is less intrusive to the eyes, as it does not require adjustments when it reaches the retina. Because of this, it’s seen as a color that calms the nerves. So, websites that deal with nature oftentimes use it. But not only ecology-related websites can use green, applications that deal with health, financial transactions, and great causes use varying shades of it.

Example: as difficult as it is to believe, Starbucks uses a palette of green shades in it — it was a surprise to me, thought it was brown or something like that! But this is completely related to the calming effect the color has.

After a long stressful day, a cup of coffee can calm your nerves or at least distract you from your worries. This is the idea behind the various uses of the color green in information cards on the website’s home page. Also note that to maintain the harmony of the pages, green with different levels of brightness was used to create a harmonious feeling.

Brown — It consists of yellow, red, and a large portion of black. You’ll probably see it on websites that want to convey a sense of seriousness. Since it’s abundant in nature, it can mean strength and stability, like the stems of trees and plants.

But brown is also extremely well-known for being the color of most types of chocolate worldwide. For this reason, you can also find this shade in many apps that deal with sweets and related products. As you can see, it’s a very flexible color and can be used in different contexts.

Example: It was a little difficult to find a website that makes good use of brown, but we can analyze Dreyer’s, once again, sorry for making you even hungrier now. Note that, since it’s a strong color, a lighter shade was used as the background for this page section. This quickly directs users’ attention to bold text using a stronger tone. Therefore, the website isn’t too dark and still manages to bring contrast between the images, background, and text in focus.

It’s important to note that the greater the use of a dark shade of brown, the greater the seriousness. And, in this case, the product doesn’t need to give that kind of impression. Even though it’s a strong color, brown can be used lightly and bring positive sensations linked to the amount of yellow that the color has, as we can see in this case in the background. Also note that the color of the page complements the chosen images, so always remember to keep all items on it harmonious using the same palette.

I hope that by now you understand a little better the relationship between UX and color psychology. Of course, I only mentioned a few colors here, the most common ones seen on the Internet. So it’s only a start, I encourage you to search more about others whenever you have a chance.

Now, what?

Now you need to put it into practice! Colors are everywhere, but creating a comfortable user experience will make you better understand the importance of colors as we browse the Internet.

Next time, we will look at how to create complete color palettes for your website in a meaningful way. We’ll apply all we’ve learned here and investigate more about color theory.