Before I came to work in design I worked for a “Konica](http://konicaminolta.com/ dealer and a lot of my job involved consulting in the area of color, specifically color printing. I realized one day in explaining color to a client when they complained that their site looked different on different monitors, that my experience working with copiers and printers really came to the rescue in this area. I’d like to share with you some of the basics about color that have helped me in designing for the web, for print, and in dealing with some of the confusion surrounding color.

What makes color

Color has three major components:

Source of light

Object receiving the light

Viewer or receptor of color

If one of these components changes, the entire appearance of color will change.

Light

Light, or what we perceive as light, is actually electromagnetic radiation. Radiation is naturally generated by the sun which gives us our primary light source, and light is generated by man as well. Each light source varies in the amount of radiation and can vastly alter a color depending upon the level of radiation.

Objects that receive light

Ever wonder what makes a rainbow? A raindrop is a natural prism, and as the renowned “Sir Isaac Newton](http://en.wikipedia.org/wiki/Isaac_Newton discovered, white sunlight can be split into the colors of a rainbow by a prism. The light we see as “white” becomes many different colors when it hits a prism in just the right way. The raindrop is the object receiving the light, and that leads to the receptor.

p(align_center). !

Receptors

If light is refracted and dispersed by a raindrop and no one is there to see it, was there ever really a rainbow? The eye is the receptor. The human eye is the most common and most often is the cause of differences in opinions about color, but an “eye” could be a camera lens, computer monitor, or any other receptor of light which displays color. The way a person’s eye is designed will determine what color they perceive, no matter what color is actually projected. Color can become even more inaccurate when viewed with the human eye and through another eye such as a computer monitor, because in that sense you are getting the color second hand. Now think of a scanned photograph. The light and color has passed through the camera’s eye, the scanner’s eye, the computer monitor, and now to your eye. How can you be sure the color in that photograph is accurate? How do you know if what you are seeing is the same as what the rest of the world would see through their collective “eyes”?

RGB(Red Green Blue) Colors & Light

RGB stands for Red, Green, Blue, and CMYK stands for Cyan, Magenta, Yellow, and Black, which I will get into in a moment. RGB are the colors created with light, calledadditive colors because when mixed together equally they make white. RGB is the color scope used by computer monitors and other electronic devices, as well as the human eye.

A quick note about color-blindness

Color blindness enters in when a person can not perceive red, green or blue. When I was a kid I thought color-blindness meant one could not see any color and saw the world in black and white. Though there may be some rare cases of complete color-blindness, in most cases it is just one color of the spectrum that is missing or deficient. Many men are affected by this because of specific male chromosomes which cause deficiencies in viewing one of the three colors, but this is a recessive trait. For you men who have those arguments with your wives over those black socks she swears are navy blue, take them outside into natural light. The sunlight helps to see color more clearly. The light man produces can never compare to the natural sunlight God created.

CMY Colors & Black (CMYK)

If the presence and level of light produced can so significantly change the appearance of color, then you can imagine what happens when black in introduced into the mix. This is what happens when color is reproduced onto paper. CMY colors are calledsubtractive colors because when mixed together, they make black. Unfortunately, they don’t have a perfect black. If you have ever printed black text with a color inkjet printer you have seen the color ring in the letters. It still appears to be black, but because it is not, black was introduced into the mix in order to save money (printing one ink instead of three) and to accelerate the drying process.

Together they are complementary colors

CMY and RGB colors are also calledcomplementary colors. Remember that RGB colors are light colors while CMY colors are surface colors. They are opposites and yet complementary at the same time. When two complementary colors are mixed in combination with light they produce white.

p(align_center). !

Complementary Colors:

• Green & Magenta
• Cyan & Red
• Blue & Yellow

Monitor Colors

A computer monitor uses the RGB color model. Each of the three RGB color values is made up of 8 bits in a value between 0 and 255 (256 shades of that color). Multiply those by 3 and there are over 16.7 million colors your monitor can see. Monitors are also made up of three kinds of phosphorus which is accessed by electron guns that produce a color image. CRT monitors and TFT (flat screen) monitors vary in the levels of phosphorus and other elements to the production of color, making each monitor output color differently. In English, you can line up 10 different monitors all with the same settings and the screens may not be exactly the same.

How Printer Colors Differ

CMYK(Cyan Magenta Yellow & Black) colors are the biggest difference

In the same way as monitors, printers also output color differently, but the factors that affect color are different. First and foremost is the CMYK color space which is so different from RGB. It takes a very different combination of completely different colors to try to achieve the same effect produced on screen. It’s like crushing apples to get orange juice.

Paper type makes a tremendous difference

Another major factor in printing is the paper. Paper acts as the “white” of your image, which is why bright white papers yield the best results. Even a slightly off white or less bright white paper can turn a beautiful bright yellow into a rusty light orange. I have personally seen this happen on multiple occasions where the paper was not bright enough, or even a matte instead of glossy. Matte paper often provides better quality for handling a document and ink dries faster, but glossy will make your colors more vibrant, and often more accurate. Because what you see on your screen is reflected with light, light will reflect off of the glossy paper in a similar way.

The printer itself can change your color

Within a printer, many things can alter the way color is produced, from the heat of the drum to the dispersion of toner. Many of the digital machines today are wonderful because they allow more control over color digitally from the control panel, and the print controller. Today it is a lot easier to go into the computer and improve the matching of screen color to print color by changing the settings on the monitor, the software, and the print controller.

Summary

Unfortunately, because of all that I have mentioned above, the color will rarely match perfectly. And, because each person’s eye sees color differently, there may never be complete agreement when it comes to color. There is also a lot more information about color than I can talk about in one article, so please, do some research on your own and find out for yourself how beautiful, and challenging, the world of color is.

More information not covered

• “How Stuff Works: Rainbows](http://science.howstuffworks.com/rainbow1.htm
• “How Stuff Works: Light](http://science.howstuffworks.com/light.htm
• “About.com: Learn About Color](http://graphicssoft.about.com/od/color/
• “Teacher’s Lab: Light in Color](http://www.learner.org/teacherslab/science/light/color/index.html
• “RGB World: Color](http://www.rgbworld.com/color.html

Color tools and resources

• “Color Schemer](http://www.colorschemer.com/
• “Color Resources for Web Designers](http://www.visibone.com/
• “Book: The Science of Color](http://www.amazon.com/gp/product/0262522314/104-1672622-3890358?v=glance&n=283155
• “Book: Color Index](http://www.amazon.com/gp/product/1581802366/qid=1146768546/sr=1-9/ref=sr_1_9/104-1672622-3890358?s=books&v=glance&n=283155
• “Snook’s Colour Contrast Checker](http://www.snook.ca/technical/colour_contrast/colour.html

Originally published at “Godbit](http://godbit.com

Tweet me (but don't mistweet me)

Copyright © 2006 – 2009 Natalie Jost