Computer Color Links


Links to More Technical Information

Gamma

Poynton on gamma:
Poynton's FAQ about Gamma

The lack of gamma correction on PC's and Suns.
Gamma correction explained:

Ad Berger's gamma demonstration image and gamma measurement image.
Scroll down to almost the end of the page.
Gamma test

Gamma - much more information, lots of links:

A technical explanation of gamma from PNG
Browser Gamma-Correction Test Page
 



Monitor Control Panels and Glare
 

Poynton: How to minimize glare and establish good physical viewing conditions. How to adjust the monitor's front-panel controls.
Reducing Eyestrain from Video and Computer Monitors

How to adjust BRIGHTNESS and CONTRAST controls on your monitor
Poynton

 



Color Standardization
 

The search for color standardization
The International Color Consortium

An explanation of RGB
Color Systems

JPEG 2000
JPEG 2000 - Going Mainstream? (2006)

Color Mutations
Gamma Correction and Color Space

PNG
Benefits of PNG
 



Computer Systems
 

More information on how computer components work together
Computer Color Tips
 


 

Advertisement
Website - User Interface - iPhone App Design -Colorcom


Web Site Design Tools

The best chart - RGB and HEX values
The 216 web-safe colors

 

Web safe color palettes, posters, mouse pads and more
HTML - Color-Codes

For Web site designers: This palette will ensure that colors used in a gif or jpeg image are the same as those handled by Netscape and Explorer. It includes the 216 colors common to both PC's and Macs. The colors will still be viewed differently on different computers. But at least you'll have a basic color vocabulary.
Victor Engle's No Dither Netscape Color Palette
.


The symbolism of over 100 web-safe colors. Large color swatches - RGB and hex codes included.
"A Guide to Color Symbolism "

 

Master the basics of color theory with this straightforward guide to creating with color. It's used as a text at many universities and yet it's simple enough for everyone interested in color! Download immediately.
"Color Logic for Web Site Design"

 

An encyclopedia of four e-books
"Color Voodoo for Web Site Design"

 


 

Color Logic for Web Design

Computer Colors


Links to articles in this section are on the menu at the left.
Links are also provided below.

The world of computer color is extremely significant for every one on the web today. Explore these web pages to find out more about how computers create color and why these colors are perceived quite differently.
 


computer monitor
 

sunflowers.
 

Technology

Computer Color Matters

Is Your Computer Color Blind?

The Power of Gamma
 

Color on the Web

The Future of Color on the Web

Color, the Chameleon of the Web

Computer Color Tips
 

Color Logic for Web Site Design

Color, the Chameleon of the Web


One hundred and ten years ago, Vincent van Gogh applied a thick impasto of yellow paint to his canvas and captured the spirit of the sun-drenched Mediterranean countryside. Today, the glowing yellows, rich ochres and earthy browns of his "Sunflower" series can be viewed in museums from Amsterdam to Tokyo. These same paintings, when viewed on the web, will most likely appear radically different. The golden yellows may shift into subtle chartreuses, the earthy siennas may dissolve into lifeless beiges, and the sparkling warm highlights may appear cool white. To make matters worse, the bouquet of flowers may also appear to be inside a dimly lit closet instead of a bright sunlit room. In fact it's safe to say that some degree of these color mutations will occur in a majority of graphics on the web.

sunflowers.

The instability of color on the web is due to a number of factors. In the case of van Gogh's sunflowers, even if the original scan were "color correct" - and even if a computer with full color correction and synchronization were used for the creation of the final web image, these sunflowers would reside on a web site, which would be viewed through the filter of the web browser's inadequate color capabilities. Furthermore, the differences in color vision of the viewer's operating system and monitor would most likely destroy any possibility of color accuracy. The most basic explanation for color instability stems from differences in "gamma" and the actual color space created by the operating system and monitor. First of all, gamma is responsible for the lightness and darkness of images. Since different operating systems are based on different standards of gamma, many of which don't have sufficient gamma correction, color mutations occur. The most common effect can be compared to viewing an image through dark sunglasses. In addition to this, each computer will be operating within its own color space.

The first step in cross platform color stabilization occurs when information about the color space and gamma are embedded in the graphic image. A promising solution can be found in  "PNG" (pronounced "ping") graphic file format. The PNG graphic image stores extra chunks of information about the colors.  At the present time, the PNG file format is supported by most web browsers. However, PNG graphic images can not compensate for flawed gamma correction and other color limitations in a person's computer.  More information can be found at the following url's:  PNG - Wikipedia  and PNG (Portable Network Graphics) Specification, Version 1.2
 



Beyond the technical aspects of color on the web, color exists as a powerful communicator. To van Gogh, it was the color, not the actual image of the sunflowers, that delivered the expressive content of his paintings. Although a web site is not a static two-dimensional image, the colors will either work for or against the content. There is no gray area. Sunflower yellow may reinforce the warmth and cheerfulness of a tropical resort's site or it may destroy a law firm's site with its connotations of cowardice.

Designers must subject their web color selections to stringent cross-examination. If the color lacks solid symbolism aligned with the content of the site, the color may communicate in surprising ways. Consider the color purple. It may work as a symbol of creativity for software packaging, but it's a polarizing color. People either love it or hate it. Furthermore, it's potentially hazardous on a global level. Although it is associated with spirituality, mystery, aristocracy and passion, it may also symbolize mourning, death, nausea, conceit and pomposity. A significant example of purple failure is the initial design of EuroDisney's signs. The color palette was intended to rival Coca Cola's red, but the final selection of vast amounts of purple was a tragic mistake. Purple symbolizes death and the crucifixion in Catholic Europe. It's not surprising that visitors thought the signs were morbid. How did this happen? The CEO liked purple.[1] Personal preference and "avant-garde" tactics frequently cause color disasters. When the wrong color is used on a web site, the damage extends to a global audience.

Web site designers should treat the symbolism of color as seriously as the design of graphics and layout. At the very least, the timeless associations of color should be considered. For example, red is the color of fire and blood. Not by any stretch of the imagination could it be associated with serenity or dependability.

When color and form are combined, the symbolic power increases. White carnations signify death in Japan; green hats signal that a man's wife is cheating on him in China. If a specific global market is targeted, web site designers must investigate all aspects of regional color symbolism. All things considered, American designers must question their self-contained experiences and expand their global sensitivities.

Color's capacity to mutate both technically and symbolically on the web can happen at the same time. Since colors may wind up much darker on different computers, a dignified navy blue background used for an airline's web site may turn out black. Not only is this hue associated with death, it is a heavy color, one which is not associated with the lightness required to keep the aircraft in the air. Designers should preview their site designs on several operating systems and different web browsers to ensure the best possible results.

[1] Euroclash, ID Magazine, January 1992, p.61

This article was published at Creative Planet's Design in Motion.
Copyright Jill Morton 1998, All rights reserved
 


 You might also be interested in:

Color and Trademarks

Who Owns Hues?
Cadbury received trademark protection for purple.
Find out more about the laws for color trademarks.


Color Logic for Web Site Design

Web-safe Color Palette

 

Although computers have a capacity for at least 256 colors, only 216 colors are common to all older computers. Newer computers are equipped with 64 thousand colors (16-bit) and the highest quality systems deliver 16.7 million colors (24-bit). However, approximately 10% of all computers are limited to 256 colors (8-bit).

In the early days of the world wide web, the web-safe 216 color palette emerged. The image below is the most accurate representation of the palette. Even though it's small, you can magnify it after you download the graphic. It's a nice surprise ... so it's worth the time to download the graphic and open it in any graphic application such as Photoshop.


216 color web safe palette
 

(You can save the graphic of this palette by following the sequence for your computer's saving and downloading of a graphic. In some cases, you can just drag the graphic to your desktop, or alt click.)

 

These are web-safe greens from the 216 color palette.

web-safe greens

You are limited to a certain range of greens (including these) if you address the web-safe range of hues.

 

If you use a green that is not one of the web-safe colors - and if someone's computer is limited to 256 colors - the green will consist of a series of green dots (from the web-safe greens) that approximate the color. For example, the green below is not a web-safe green.

dithered greens

You can see an exaggeration of the "dithering" - the patching together of web-safe greens. This is how this color might look on computers that have 8-bit color.

Many say that the web-safe palette is a thing of the past. Toss it or keep it? Some say that the colors are sacred reminders of the early days of the web.

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


You might also be interested in:

Color Symbolism

Explore "The Meanings of Color"

 


 Advertisement

Encyclo squares-400
Color Logic for Website Design


 

Computer Color Tips

by Bryan Villados

How the components of your computer work together

When you list the components that work together, its wording gives the impression that the motherboard itself is a contributor to creating color. Technically, the motherboard is kind of like the foundation of a house. It doesn't provide sewage or electricity even though the pipes and cables are installed. But, when you attach components to the foundation, such as the toilet or you electrical outlets, it's these components that make the sewage and electricity usable.

In other words, the video card is useless unless you attach it to the motherboard. So, technically, the only thing the motherboard contributes to in terms of color is that it allows the video card to attach itself to other components on the computer, such as your RAM, ROM, keyboard, etc. Other than than, the motherboard contributes no logic when computing color. The color signals is computed by the video card.

On the PC, there are so many types of video cards. Here's some history for ya... The first color option we had for PCs was CGA, which worked on a 4-bit color palette. And, it operated digitally. EGA came along later on, which was still digital. EGA provided an 8-bit color palette. You're right on the button when you described how color is created digitally. However, future advancements in video technology switched the video signals from digital to analog. With analog signals, you can adjust the strength of the color (contrast, brightness, etc.) just by lowering or increasing the "pressure" of the signal, rather than fiddling with 1's and 0's.

Why is analog better than digital? A pixel running on a 24-bit palette can take a humungous amount of video RAM if you were to represent it digitally. But, with analog technology, that same pixel can be represented as voltages rather than bits, and it uses less RAM when storing it. Also, analog signals can be processed quicker by a display than digital.

Going back to the original point... The monitor is useless unless it's attached to the video card. And the operating system is useless unless you've loaded a device driver to tell the OS how to talk to the video card. And so on...

Not only does each of the components play a role in the overall process of creating a colored pixel on the screen, but if you were to take away any one component, the entire process would fail.

Consumer tip

You should run to a computer store that has many of the monitors on display, and operating. But when you choose a particular monitor you like, ask the store if you could bring your computer in to test the display. It goes hand-in-hand with that comment you made, which by the way I love, that you don't shop "...for the best components, but components that work together...". In addition, don't ask the store or the monitor manufacturer for their opinion because they're biased as heckl!!!!!! Have then ask their friends or professionals in the industry.
 

Television and computer monitors

When you made a comparison between a TV and a monitor, much of the technology between the two are the same. BUT, the pixel alignments are different.


On a TV, the pixels are aligned like this:

o o o o o o o o o
.o o o o o o o o.
o o o o o o o o o

On a monitor, the pixels are aligned like this:

o o o o o o o o o
o o o o o o o o o
o o o o o o o o o

That's why TVs can get away with providing a better rounded image than a computer monitor. It's also the reason why TVs seem to have more colors displayed than monitors. You can trick the pixels on the TV to "mix" together because, if you think and look carefully, you can scatter the pixels a lot easier. On a monitor, the pixels are aligned in a straight line, therefore we must produce different colors through software algorithms. If you don't see this, then try this experiment. Take a piece of graph paper, and draw a perfect circle with a glass or protractor. Color in all of the boxes that the line touches. The result will be the same thing as if you drew that same circle on a computer. Unfortunately, there's no graph paper that looks like a TV, but if there were, you would see that the same size circle would touch more pixels.

Here's another one, but it doesn't have anything to do with color... It has more to do with visibility. When you watch a 60-inch display, you notice that the video looks like the pixels are bleading into one another. That because the conversion process between the two types of pixel alignments is not a perfect science. Same thing on the oposite direction. When you sample video from a VCR into a computer, the ending result looks really messy. Again, it's because of the conversion process. It's that very idea that will make web pages look like crap on those Phillip WebTV devices. It's also the reason why we can't pack a 640x480 computer display on a TV; we have to shrink the resolution of our desktop to get the whole thing onto the tube. TVs generally are slower than monitors, therefore the adjustments are rather dramatic.

Bryan Villados
This email address is being protected from spambots. You need JavaScript enabled to view it.
 


Explanation of the Darkness of Images on Window PCs

The following description of input voltages came from a post on a newsgroup. Wes gave us permission to quote him.

The question: "I wonder why the Windows PC's are darker in the first place? Is there a technical reason for this ?"

Yes, there is. It is due to the non-linear nature of the CRTs response to input voltages in general. If you consider that applying a zero voltage to one of the color guns will produce black and that applying full voltate to the same color gun will produce full intensity, then applying 50% voltage should produce half intensity. Right? Wrong. When 50% voltage (or anything between zero and full) is applied to the color guns of a monitor, the resulting perceived intensity is less than 50% (or correspondingly less than what was applied to the input). That is how monitors work. An RGB value of "128,128,128" unfortunately does not produce a 50% gray. What gamma correction does is to compensate for this non-linearity. It straightens out the response of the monitor to its input.

On Macs, one can calibrate the monitor so that it produces a near linear response. I don't know how to do this on a Windows machine or even if it is possible. I am gathering that it is not, unless the video drivers happen to provide that function.

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


You might also be interested in:
Happy yellow and sad blue
Why does yellow mean happy? How can blue mean sad?
Explore "The Meanings of Colors"