Computer Color Matters

(Revised, 2016)

Four versions of a surfer on a wave

These images represent a range of what any given image may look like to someone viewing this web page today. Although it's exaggerated, it does show how an image that looks good on one computer might look completely different on another. The image at the far left is true to the real colors, the second one from the left represents a very limited color palette (due to the computer's color capabilities or the wrong file format), the third from the left is a much lighter version of the first one, and the last image on the right represents a very bad color distortion caused by a very old monitor.


Does true color matter?

Consider this: If you visit a clothing store on the Web and see a blue shirt, you are out of luck if you think that the shirt is really that shade of blue. Also, if you're visiting a museum on the Web to view Matisse's paintings, or researching skin diseases, or analyzing a satellite weather photo, you may not be seeing the correct colors and you may be getting incorrect information.


How Computers See Color 

The following components work together to create color on your computer:

1. The computer hardware on the motherboard
In the simplest terms, deep inside your computer is a "brain." It may or may not be able to see and recreate accurate colors.

2. Graphic cards or video cards/boards
You may have a graphic card or video card/board installed. If so, this helps your computer to see better colors and more colors. (Note: This is built into all Macintosh computers.)

3. Your monitor
There are several factors that may cause color distortions:

Old monitors can be burning out. For example, the mechanics that generate the color green may be weakening.

Cheap monitors deliver terrible color. You get what you pay for.  A monitor that costs less than $100 (US), may have poor color accuracy.

Anti-glare screens lower the radiant emissions and this affects the colors generated on your monitor. Colors will appear darker than the actual color and you may see a grey haze over the whole monitor screen (similar to how colors appear when wearing sunglasses). A better solution is placing your monitor away from glare sources. This will give you better color and optimum visual conditions. Regarding electromagnetic field emissions, it is represented that good monitors are properly shielded and that emissions are restrained to the sides and back. The validity of these reports is subject to further questioning.

Therefore, the monitor can be the major cause of good or bad color ... or the monitor can be part of the combination of several components that creates good or bad color. In other words, if you have a good video card, good operating system software, and good application software, a bad monitor can still create inaccurate colors. And even if you have a fantastic monitor, the other components can still create bad colors. So you're looking at a case-by-case kind of situation.


4. The web browser (Safari, Chrome, Firefox, Explorer, Opera, etc.)
Consider the browser to be the messenger who delivers the colored graphics to your computer.

At the present time, most web browsers support graphic file formats that contain essential information about color (such as PNG).  The past standard (which is still valid for full accessibility) is the 216 web-safe color palette that is based on the colors that are known to exist in the color vocabulary of all computers (from 8 bit and up). See the 216 color palette below. You may also download the graphic and enlarge it to see each separate color square.

216 color web safe palette

*** For detailed information on these 4 components, see Computer Color Tips and The Future of Color on the Web

Color Logic for Website DesignE-Book

About the Colors in Images

The images you see on the Web are either GIF, JPEG, or PNG images images. In simple terms, these file formats refer to the computer language that is at work within graphic images. It can be compared to how some people speak Mandarin, some speak French and some speak English. Some graphic images speak GIF, some speak JPEG, some speak PNG, some speak TIFF, etc.

These GIF, JPEG, and PNG images can be viewed by all "brands" of computers, PCs, Macintosh, and Unix. They also contains color information and this information is based on RGB, on how much (R) red (G) green and (B) blue is in the image.

Here's some background on RGB color theory: Computers create colors based on a special set of 3 primary colors: red, green, and blue. So does your television. If you go up close to your TV, (put your eye right on top of the screen) you will see little dots of red green and blue. In computers and television, light transmissions are creating the color. Red and green mix to create yellow. See the illustrations below.

RGB Primaries and Secondaries

This is called "Additive Color" and is completely different from how colors are mixed in the tangible world of paints and pigments. When we mix red and green paint, we get muddy browns. This is "Subtractive Color" and is based on the primaries, red, yellow, and blue (or red-based/magenta, yellow-based/yellow, blue-based/cyan). We have a special page at Color Matters which explains more about this. Link to Color Systems.

Let's take a look at the color below and analyze the processes it passed through before it reached your eyes.

a warm color

First, the color was created in Adobe Photoshop. The recipe for the color you see is: red=204, green=102, blue=102. The true color could be called a muted coral or dull salmon.

Here's the path that the graphic took to get to you:

1. The image was placed in an html script (web page) that can be read by all Web browsers. This script was sent to the Color Matters' web server.

2. Your Web browser software connected your computer to our server and brought the image into your computer. The colors in this gif image passed through the browser and brought this information into your computer operating system.

3. The colors in the image also passed through your operating system hardware. If you have a graphic card or video card it also interpreted the color.

4. Your monitor took all the information and sent it to your eyes.

In conclusion, remember that different computers do different things, many "systems" have different configurations of all of the above things, and browsers used to view the World Wide Web are part of the overall picture.

Links to more articles about computer color are on the menu at the top of left side of this page.

 


Web UI Design

Subscribe to the free Color Matters Newsletter

Color Matters is a registered trademark of J.L. Morton.
Graphics and Text: Copyright (c) 1995-2024, J.L.Morton, All rights reserved

copyscape seal blue 120x100