Do you notice the way colors on websites look different on your computer compared to other people?
No matter what is done or the efforts a website developer makes get colors to look exactly the same on every single computer and device, we have to accept that it’s one of the few times I have to say:
It isn’t possible to guaranty color consistency on every monitor and device.
Why is it important to understand how website color works?
I know. It sounds complicated and some people won’t care. It does matter. Consistent website color is a topic that comes up more often than you’d think. I’ve had this conversation with clients and colleagues for a long time and it always ends the same way. It is sometimes confusing and complicated but the core principles are the same.
I believe business owners benefit by understanding why their assets look the way they do; in this case, their Website compared to print collateral.
Print Color-matching Example.
To help visually explain what variations can look like, I included this image which shows the same red ink printed on several different papers.
The color you see printed on all these papers is the exact same on every single paper, but they look very different, right?
There are more variations of paper types and different coatings and other finishes than monitor variations. The most common include:
- Bond, Linen, Cotton Fiber, Recycled & Watermarked – These types are generally stronger, more durable, and more commonly used for high-end letterhead or stationery. All of these are great comparisons to a brand new monitor.
- Coated – Gloss, Matt, Silk, Aqueous: these can be compared to a retina display device. The coating on paper means ink sits on top of the paper and doesn’t penetrate the fibers like in an uncoated or natural fiber paper. The latter type will provide results that almost look faded or even visibly show the fibers of the paper; similar to when a color looks faded or “off” on a monitor.
- Newsprint – If you have handled a newspaper in your life, you know what happens to the ink: it just sits there and never seems to dry winding up on your hands. This IS strange considering you’d think that a thinner and uncoated paper would absorb the ink, but special ink is used on newspapers for
The weight of paper is another element to be considered. As you can see, based on the paper the ink has been applied, the hues vary significantly.
What does print ink have to do with monitor color?
Nothing. But the variations shown and explained above are the closest equivalent to compare how the concept applies to computer, tablet and phone monitors. Each monitor has its own personal user settings and resolution just like papers have their own unique properties.
Is there anything I can do to override or control the color display?
Unfortunately, no. If you think about it, there are literally millions or more different desktop computers, laptops, mobile devices and tablets, and of course there are operating system differences.
To override the color settings to ensure what is seen by a user is exactly what you want, you’d have to go and adjust every single one of those computers and devices. This is obviously not practical or even possible.
Why isn’t color consistency possible if I coded unique web-safe colors on my site?
I know. It doesn’t seem to makes sense, especially if you consistently used specific colors in your website design and code. I promise you: In just about every instance, monitor color representation WILL vary.
There are several valid reasons for color inconsistencies including but not limited to:
Individual personal settings which have infinite possibilities affecting website display. Device brightness may be higher or lower for each user. Adjusting color (especially on Macs) allows users to choose one of a variety of color settings
The age and type of monitor significantly impact color display.
That’s right. Some folks are still hanging on to those “big ass 10-ton CRT monitors”. I can personally guaranty CRTs will not display anything consistent to newer mentors and won’t be accurate.CRT monitors work off of Red, Green, and Blue light bulbs (RGB). Really. The technology is old and if there’s a CRT in use it’s an ace in the hole that all of the colors are faded and dull.
CRT monitor owners already know and experience this. If they’re really old school, they may not even know there’s a difference if they don’t own modern devices and don’t have any other monitors.
Flat-screen monitors come in all sizes and flavors. You will find plasma, LCD and more recently LED monitors. LED is definitely the most energy-efficient and they last longer but, as the saying goes: “Nothing lasts forever”.
Potential issues for flat-screens, affordable as they are, are mostly fading and potentially burned-in ghosted images if one is paused for too long. That doesn’t seem to happen much anymore, but even one of my flat screens that’s only a few years old has a weird background partner or image in the background.
I ignore it but guess what? YEP! It’s affecting the color of what I see on my tv. If I used it as an extra monitor, I’d see things differently. Anything brand new always display colors more vivid than older versions. But the amount of use will matter.
Two people can both buy brand new iMacs at the same time. One person will use theirs all day every day for work. The other person travels and may not even turn the computer on more than twice a week. Obviously, over time, the one that’s used more gets worn more. Like those great comfortable shoes that no longer have a cushioned insole.
Different device types are also significant.
My older non-retina iMac doesn’t show anything like my 9-month-old MacBookPro laptop and iPhone. As referenced above though, my iPad mini is pretty good because I don’t use it that often BUT: it’s older. There have been improvements to iPads since I got mine so something will likely be a little different. Why? Retina displays automatically provide better quality graphics.
Remember, even Retina displays are adjustable.
Calibrated monitors, which are typically found in printing design industries, will significantly affect what is shown. In general and out of the box, monitors are set to a much too bright default color setting. Even Macs which are considered standard designer machines may show slightly skewed colors compared to a calibrated machine.
The calibration process corrects monitor display for ultimate preciseness so colors match exactly what will be sent to printers and is considered paramount in “color-critical print projects”. This matters because monitors are showing you color using light (RGB) and printing uses ink (CMYK). Imagine getting colored light bulbs and trying to match those colors using paint for your walls. You can try and it will take a while but they aren’t based on the same source materials.
What about large companies? Surely their websites look the same everywhere, don’t they?
You might be wondering about huge companies like Apple, Nike, Microsoft, and any other international company. They all have style guides and it’s crucial things look a certain way. Despite these guidelines, I assure you, none of them have any more control over how YOU view colors on their website than a small start-up or a mom-and-pop shop. When items are printed, absolutely. But for websites: Nope.
The best way to look at it, no pun intended, is to accept that a user will likely not have any idea that what they are seeing isn’t the exact color you want them to see, or they are aware their monitor or device is a little wonky and doesn’t display web colors as everyone else sees them. This is okay. It might not be what you want, but people don’t know what they don’t know.
After all, the quality of your content, website ease of use, and speed are far more important factors to consider. Blue will still show as blue, yellow as yellow, and so on.
If the colors you choose based on website color theory is the only thing on your mind:
Don’t worry about it.
Yes. Color matters. I am a designer so of course, I believe the colors you choose make a difference for your brand, and ultimately it does matter. However, it is important to keep in mind the preciseness of color each visitors sees is not important enough to break a sweat.