Does Color Luminance Affect Website Conversion? | Color Psychology

Does Color Luminance Affect Website Conversion?

What is luminance?

We all know that there are three qualities colors have: hue, saturation, and lightness. The term luminance originates from the Latin word lumen, which stands for light, and it is a state or quality of radiating or reflecting light.

In other words, it is used to measure the brightness of a color.

How do we measure luminance?

It’s important to know that each color has an innate luminance value, which is measured in percentages. A color can have a high or low luminance value, depending on if it’s closer to white or black, respectively.

For example, the color that has the highest luminance value is yellow with 94%, while blue has the lowest of 44%. Of course, their luminance would change if we were to darken or lighten them. This means that luminance can be affected by changing any of the three aforementioned qualities.

color with a highest luminance value
The color with the highest luminance value – yellow!

How does low and high luminance affect us?

Color is used in every aspect of life and for a good reason. It is a form of communication and helps us differentiate among elements (think of maps), it attracts our attention when it comes to marketing (neon lights and flashy billboards), it helps put the emphasis on something that needs to stand out, it can be used for symbolism and to establish brand identity.

neon lights
Neon lights

When it comes to marketing, colors are especially important. We might not realize it, but every button that we press and every website layout is made to look the way they do with a purpose. The purpose? To direct and attract our attention.

Color psychology

This is part of color psychology, which is the study of hues as a determinant of human behavior (Wikipedia). People interested in color psychology study how different hues affect different people and marketers find this study especially useful because, through it, they learn how to influence people into buying their products and services.

We’ve already mentioned neon lights and flashy billboards, but just think of CTA or call to action buttons. They’re usually surrounded by whitespace and are a certain flashy color, most often red. Multiple case studies found that red CTA buttons are more popular than green ones: conversion rates increased by 20% to even more than 30% when a red button was used.

This is why color is such an important thing when it comes to branding. When paired up with the right color, a logo can become memorable and make you stand out in a sea of competitors. It’s the same with websites.  

Do people hate certain colors?

If you’ve ever opened a website and got blinded by a flashy color, I feel your pain. And so do thousands of other people.

The website’s appearance is no joke. 42% of shoppers form an opinion of a site based on its design, which includes the color scheme. Additionally, 52% of customers don’t visit a website again if they don’t like its aesthetics.

Throughout the years, numerous surveys were conducted to try to find out which colors people like the most and the least.

In a survey that over 5.700+ people took, the results showed that blue was the favorite color of 27% of people, followed by green (18%), and both purple and red with 13%. Brown took the crown as the least favorite one (27%), followed by yellow (19%), orange (14%) and grey (11%).

blue - color of facebook
Blue – The color of Facebook

In another survey that was taken by almost 2.000 people, 42% of men stated that blue was their favorite color. 25% of men said that green was their favorite one, followed by purple (12%). 29% of women said that blue was their favorite color as well (29%), with purple as the close second and the favorite of 27% of women. Green took third place with 19%.

The results are clear: people love blue.

Which colors to avoid?

When making your website, avoid abundantly using neon colors, since they’re not made to be stared at and are only used to attract attention. Also, avoid using more than one saturated color, since this can create the so-called vibrating effect and distract from the text.

Designers have also said that bright blue and pale yellow are the worst choices for background color, as bright blue is too strong and is hard to match with another color, while pale yellow is very unappealing to look at and shows poor taste.

Luminance and website conversion – what are the best color choices?

We’ve already mentioned that your website design affects whether people will buy your product again, so let’s see how you can make sure that your customers come back.

Remember how blue was the favorite color of people in both those surveys? It’s no wonder Facebook, Twitter and LinkedIn all have blue as their main color. It is the color of safety and trust, but while you cannot go wrong with blue, it is undeniable that almost everyone uses it. Ignore really bright versions of blue for your background, and go for darker options to get the best results.

Green is the color of nature and as such, it has a balancing effect. While saturated greens are a good choice for CTA buttons, you should definitely avoid making them the background for your website. Green accents do, however, work really well with grey and white.

Black and white

Despite black not being on either favorite color lists, it can be a good choice when it comes to certain websites. It is the color of elegance and sophistication, and it’s no wonder that most fashion, makeup, and car websites have black as their main color. Also, black accents can look good paired up with any other color.

black and white
Black and white

When it comes to white, it’s a good base for any other color. It looks great with black, purple, green, magenta, and blue accents. It’s probably not the best choice for your logo, but you could use it as the base for the accents that have your logo’s color.


It’s pretty simple: avoid using bright colors for your website background, don’t use a bunch of neon colors and multiple saturated hues, make sure that your CTA button is in a bright color so it can stand out from the rest of the page. A dark version of blue is the safest choice for a background, and you can always pair it up with other interesting and unique hues as the accent colors.

Color psychology is an important part of marketing and building a brand identity. While colors with high luminance can attract attention, they are pretty bad when it comes to being used as website backgrounds. It is important to avoid using them that way since they can create eye strain and drive visitors and customers away from your website. Instead, use warmer and darker versions of those colors or simply use them as accent colors.

Color psychology is a pretty interesting topic (at least for me), so I hope that you learned something new and useful from this post today.

Marija Milosavljević
Marija Milosavljević

Graduated as first in her class. Incredibly quiet and shy until the lag in Warframe turns her into a raging death-bunny.

Leave a Reply

Your email address will not be published. Required fields are marked *