Nothing Spooky About Screen Color Variation
Your phone rings. It’s a colleague. She’s got your website open on her home computer and the colors have changed. Your mind races – has the website been hacked? Is the code haunted? What is this dark alchemy? Never fear. There is a perfectly scientific explanation for why website colors appear differently on different computers.
Monitors
You may have noticed in an electronics store that even though all of the TVs are showing the same movie, the colors look different. The same phenomenon occurs across computer monitors. Monitor hardware, quality, definition, age and color settings can all contribute to color variation. There is hardware and software available to calibrate monitors to show color as true-to-life as possible, but this is mostly a consideration for print designers who need to color-match their monitor with expected print colors.
The Viewing Environment
Is the room dark or well-lit? Is the screen tilted or being viewed from an angle? Where visitors are when they see your website matters.
Graphics Drivers and Graphics Cards
All computers have software called graphics drivers that control how images and colors are rendered on the screen. Graphics cards are pieces of hardware that can be added to computers to enhance color rendering. The quality of graphics drivers and cards vary, which can effect color.
Operating Systems
Mac and Windows computers sometimes show colors slightly differently. This goes for smartphone operating systems as well. Even different versions of the same operating systems may produce slight variations.
Image File Types
Image file types have different ways of storing color information. The same color can appear differently in gifs, jpgs and pngs. And the way colors look in a Photoshop file (psd) may change when you save them as a flat image file type (like a jpg). Add that to all of the factors above, and you’ll certainly see some change!
Print vs Screen
Many companies have specific brand colors to identify their particular shade so that the brand is consistent across all media. But color is created differently on screen and print. Different printers, printing processes, and papers can all produce different colors. That variation only increases with the differences in how screens display colors! The solution? When choosing your brand colors, choose closely matching hexademical colors as well. It won’t be perfect, but at least it will be consistent.
Accept A Little Chaos
With so many factors contributing to how colors show up on screen and print, it can feel like something eerie is going on. The best practice is to test on many devices so you know what kind of variation to expect, but ultimately you'll need to get comfortable with a touch of chaos!
