Promo University

Why Do Colors Look Different on Computer Monitors & Screens?

Alyssa Mertes

Published: February 23rd, 2021

Have you ever shopped for a new shirt online and noticed it looks one color on your phone, but a completely different color on your laptop? Now you're not sure whether or not you even want to buy the shirt!

This color variance happens all the time from screen to screen, so the question is why and what can you do about it? Here's what you need to know!

Why Do Monitors Display Colors Differently?

If you use two monitors at work, you may have noticed that one monitor shows color a bit differently than the other. Take for instance the coffee mug pictured below. On the left monitor, it may look teal blue, but on the right it's closer to sea green.

comparison of two cups at different shades.

So why does this happen? The answer comes down to four things:

1) Pixels – tiny dots in digital imaging that come together to form a picture

2) RGB color– red, green, and blue pixels that come together to produce a variety of new colors

3) Bit depth – the number of bits used to indicate the color of a single pixel; the higher the bit depth, the more RGB pixels on the screen and the more accurate the color

4) Display resolution – the number of distinct pixels in each dimension that can be displayed


The pixels are in some pattern of red, blue, or green depending on the bit depth, a.k.a. how many can fit on the screen. If one monitor has a higher bit depth than the other, it will affect the resolution, which in turn, affects how visual content, namely color, shows up on the screen.

Why is the Color of the Same Image Different When Displayed on a Laptop and Mobile Device?

Person on computer

The same image will look different on a laptop and mobile device because the resolution is different on both devices. The visual dimensions of the display vary depending on the size of the screen.

The pixel size for a Samsung Galaxy Note 9, for instance, is 1440 x 2960. On a 13-inch MacBook Pro, on the other hand, it's 2800 x 1800. The Samsung is way smaller than the MacBook, so the pixels can only take up so much space. That difference is naturally going to make an image look a different color on each screen.

Person on computer

How to Fix the Color on Your Laptop Screen

Now that you know why the colors will be different from screen to screen, how do you go about fixing it? You might not have a background in IT, but no worries! It’s not as difficult as you may think.

What is Calibration and How is it Done?

Person on computer

The best way to fix the color display on your screen is to calibrate your monitor, which is the process of matching the color output from your monitor to a specific RGB color space.

You can buy a calibration tool at places like Best Buy or online through Amazon. This bundle will come with software that you can install on your laptop or desktop, a device called a colorimeter, which plugs right into your USB port, and step-by-step instructions.

If you don't have the money for a calibration tool, you can try the following to fix the color on your screen:

Person on computer
sliders

Utilize the built-in tools – Windows and MacOS have free calibration tools. For Windows, type “Color Calibration” into the search bar to find the tool. On Mac, you can find the "Display Calibrator Assistant" under the Displays tab in the Color section.

Browser

Look for a free tool online – W4zt Screen Color Test and Calibrize 2.0 are just a couple free tools you can download to your computer. They'll allow you to run an easy gamma test, which defines how the light on the screen affects the RGB values. You can then use that information to help calibrate the color.

Brightness

Turn up your brightness – The brightness can affect how well you're seeing the color on screen. Move it accordingly, just be sure not to go too bright or the image might end up looking saturated.

Contrast

Adjust the contrast – The contrast also plays a role in how well you're seeing the color on screen. Play around with the settings, and if you're using two monitors, make sure you're at the same view on each screen.

Magnifying glass

Check if you have a TN or IPS display – A TN display isn't as high quality as an IPS display. If you really want the best color, it's a good idea to invest in an IPS monitor.

Thermometer

Anticipate a slight difference – Technology is advanced, but our screens just aren't as amazing as our brains. The RGB pixels are not able to produce the same number of distinct shades as the human eye, so there will always be a bit of a difference.

This might all sound complicated, but don’t freak out quite yet! The tools mentioned above will walk you through the process step-by-step, and you can always revert back to the brightness and contrast settings if needed. You don’t have to be a technology whiz to figure it out.

Why Do People See Colors Differently?

Eyeball

It isn't just the computer or phone screen that's causing a change in color perception. This is also something that naturally occurs in the human body.

People with healthy eyes can see over 1 million different color shades, but they won't look exactly the same to you as they will to your neighbor.

Here's an example:

Eyeball
Shoes and dress

Do you remember the blue and black vs. white or gold dress, or the pink and white vs. teal and gray shoes? Both of these images went viral and were debated all over social media.

The reason why some people saw one color, while some saw the other comes down to the science of our brains. Colors can appear different based on:

1) How you perceive light
Wavelengths affect the way you see light, and everybody interprets these differently.


2) The number of cones and rods in your eyes
Science shows that your genetic makeup will influence how many rods and cones are in your eyes. Females typically see more colors than males.


3) Nearby objects
The color of nearby objects could reflect off the object you're looking at and change its color.


4) Vision anomalies like cataracts or color blindness
Cataracts affect over 24.4 million Americans, while approximately 300 million people around the world are considered colorblind.


5) Your age
Eyes become more sensitive the older you get, which will naturally change the way you see color.


6) Your lifestyle or past experiences
If you live in Antarctica, you're going to see different shades of white in the snow than someone who only sees snow every once in a while.

So let's bring this back to the idea of color on your screens. You not only have pixels and resolution affecting what you see, but you also have your brain doing the interpreting. In the end, all of this will greatly affect the way a color looks.

Why is Accurate Color Important?

It may be surprising to learn that 1.92 billion people shopped online in 2019, either from their laptop or smartphone. This is why accurate color is so important. Can you imagine if you bought a jacket that looked indigo online, but is actually navy blue in real life? Color makes a difference in your overall satisfaction with a purchase!

Not only that, but you might work in a visual field like graphic design. You want to make sure the color of your designs are always on point. After all, could you imagine if the designer who creates the Coca-Cola logo accidentally printed the bottle labels in a different red? It just goes to show the importance of colors. An exact color is impossible, but accurate color is always achievable!

The Bottom Line

It's worth being aware of color variations, especially if you're doing online shopping or arguing with a friend over the color of a dress. Our brains and screen resolutions can ultimately affect how we perceive color on a monitor, laptop, or phone. The good news is with a little bit of calibration, you can narrow the gap between the color online and the color in real life.

Alyssa Mertes

Alyssa Mertes

Alyssa is the Lead Copywriter at Quality Logo Products. As a promo expert, she's uncovered the world's first custom tote bag, interviewed the guy behind rock band ACDC's logo, and had a piece published by the Advertising Specialty Institute, a leader in the promotional products industry.

References

Oberlo. How Many People Shop Online in 2020? Retrieved from, https://www.oberlo.com/statistics/how-many-people-shop-online

View Sonic. (2019, July 29). What is Monitor Resolution? Resolutions and Aspect Ratios Explained. Retrieved from, https://www.viewsonic.com/library/tech/monitor-resolution-aspect-ratio/

Hadhazy, A. (2015, July 27). What Are the Limits of Human Vision? Retrieved from, https://www.bbc.com/future/article/20150727-what-are-the-limits-of-human-vision

Techquickie. (2016, July 19). Why Do Monitors Display Colors Differently? Retrieved from, https://www.youtube.com/watch?v=MTn3Gr7m0cg

Taylor, J. (2014). How to Calibrate Your Monitor. Retrieved from, https://www.bhphotovideo.com/explora/photography/tips-and-solutions/how-calibrate-your-monitor

Andrews, B. (2020, February 3). How to Calibrate Your Monitor. Retrieved from, https://www.creativebloq.com/advice/how-to-calibrate-your-monitor

Martindale, J. (2020, September 2). How to Calibrate Your Monitor to Get the Most Out of It. Retrieved from, https://www.digitaltrends.com/computing/how-to-calibrate-your-monitor/

Lupkin, S. (2015, February 27). White and Gold or Black and Blue: Why People See the Dress Differently. Retrieved from, https://abcnews.go.com/Health/dress-people-viral-outfit-colors-differently/story?id=29268831

Brogaard, B. (2020, June 29). Why We Don’t See the Same Colors. Retrieved from, https://www.psychologytoday.com/us/blog/the-superhuman-mind/202006/why-we-dont-see-the-same-colors

Sci Tech Daily. (2012, October 2). Females Distinguish Colors Better While Men Excel at Tracking Fast Moving Objects. Retrieved from, https://scitechdaily.com/females-distinguish-colors-better-while-men-excel-at-tracking-fast-moving-objects/

Colour Blind Awareness. What is Colour Blindness? Retrieved from, https://www.colourblindawareness.org/colour-blindness/

Prevent Blindness America. Cataract. Retrieved from, http://visionproblemsus.org/cataract/cataract-definition.html