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 computer or device – and the monitor or screen.


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 or device (phone, tablet) hardware 
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. 

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

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

Cheap monitors or screens may deliver terrible color. You get what you pay for. 

Anti-glare screens or blue-light settings lower the radiant emissions and this affects the colors generated on your screen. 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 or screen away from glare sources. This will give you better color and optimum visual conditions. Regarding electromagnetic field emissions, it is reported 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 or screen can be the major cause of good or bad color ... or it can be part of the combination of several components that creates good or bad color. So, you're looking at a case-by-case kind of situation.

216 color web safe palette

 

 

Color Logic for Website DesignE-Book

About the Colors in Images

The images you see on the Web are either GIF, JPEG, or PNG files. 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 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.

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 script for the web page. 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 device (operating system) hardware. If you have a graphic card or video card it also interpreted the color.

4. Your monitor / screen 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.

 

Web UI Design