Why Is This Not My Color?

Different systems can’t be counted on to display a color all in the same way. The combination of a particular system’s operating system (Mac or Windows), browser, monitor, and video card all have an effect on the color output. It’s much like viewing a row of different models of TVs in an appliance store; each one renders color a bit differently.

Because of this, the color that ends up displaying on a visitor’s system may vary greatly from the color that displays on your system, even if the two colors use the same RGB color code. For example, #999966 looks barn red on some systems and raspberry on others, a variance that most designers would consider to be, well, significant.

In particular, LCD (flat Liquid Crystal Display) screens typically have a much brighter and more saturated palette than CRT monitors. Additionally, the viewing angle of an LCD screen alters the way the colors appear. If you are designing on an LCD screen, it’s absolutely critical that you check the colors on a CRT monitor early in the design process.

Another factor that affects colors on the screen is the system’s gamma, the measure of the lightness or darkness of a system’s display. The lower the gamma measurement, the lighter and brighter the colors look. Macintosh computers have a default gamma of 1.8, while Windows systems have gammas around 2.2 (assuming that the visitor hasn’t tweaked any settings on the display, something we regrettably can’t control). The upshot is that if you design on a Mac, the colors will look darker and murkier when displayed on a Windows machine. Of course, the reverse is also true; a page created on a Windows PC looks much lighter and brighter on a Mac.

Although there are utilities to tune the gamma of your system, they are of limited help, because you cannot tune your visitor’s gamma to match your own. For now, the best you can do is to be aware of gamma differences and test your pages to make sure they are acceptable at different gamma settings. In fact, many image editing packages allow you to check your images at a gamma different from that of the native gamma of your development computer. Alternately, you can simply make sure your page looks good on a Windows PC, because it’s usually a safe assumption.

And, one of different factor that affects colors on the screen is color depth. Color depth or bit depth, is a computer graphics term describing the number of bits used to represent the color of a single pixel in a bit-mapped image or video frame buffer. This concept is also known as bits per pixel (bpp), particularly when specified along with the number of bits used. Higher color depth gives a broader range of distinct colors.

4-bit-color-depth

A 4-bit number can hold 16 unique digit combination.

A bit is a binary (base two) digit that can hold only two unique numbers: either a zero or a one. Since a 4-bit color system can hold only 16 numbers, it can keep track of only 16 colors. An 8-bit number can hold 256 unique combination, so it can keep track of 256 different colors. Finally, a 24-bit —True color— number holds an astounding 16.8 million unique combination, so it has the potential to recognize 16.8 million colors. We refer to the number of colors a system recognizes as its color depth.

These days, only the few users with very old computers have 4-bit systems, so we have pretty much stopped worrying about those systems. Therefore, our goal is to make sure that our pages look stunning on the 24-bit true color systems and at least presentable on 8-bit (256 color) systems.

Colin

I see no mention of monitor colour profiles.

Differing colour profiles can also have a huge affect. For example to calibrate my monitor when designing for print I have one of these: http://spyder.datacolor.com/index_us.php

I tend to recalibrate quarterly and I’ve calibrated monitors for friends and family after showing them the difference it makes on my own monitor.

1

Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.