Color Basics

14 comments | Posted: 4 May 06 in Tutorials, by Natalie Jost

Before I came to work in design I worked for a Konica 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:

  1. Source of light
  2. Object receiving the light
  3. 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 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.

Rainbow

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 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, called additive 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 called subtractive 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 called complementary 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.

Complementary Colors

Complementary Colors:

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 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

Color tools and resources

Update: I’ve added a discussion post in the forum for this topic in case you would like to join in more detailed discussion about color.

Discuss This Topic

  1. 1 Mark

    Sorry to be a bother, but I noticed that you used “effect” improperly. It is at the beginning of your “How Printer Colors Differ” section… ”...but the factors that effect color are different.” This should be “affect”.

    Once again, sorry for the grammatical correction. I really enjoy this website—it’s good stuff.

     
  2. 2 Natalie

    You’re absolutely right, Mark… good catch! Corrected.

     
  3. 3 Avinash

    Insightful and informative. Nice read. I learned a lot about CMYK that I did not know.

     
  4. 4 Bill

    Thanks! I have been looking for color info.

     
  5. 5 Yannick

    Color 101 with Natalie. :) Thanks Natalie, this was a very informative article.

    I’m still wondering though why they called it CMYK if the K doesn’t mean anything. Since black is created, shouldn’t it be called CMYB? Or simply just CMY?

     
  6. 6 Natalie

    Yannick, that’s a good question. I think it has to do with the confusion over blue and black. Too many people might mistake b for blue, so k made sense at the time (instead of the first letter they used the last letter in black). It’s kind if like in retail when we’d write out the days of the week with single letters Thursday was sometimes referred to with an R because a T made it difficult to know if it was Tuesday or Thursday. Go figure. I guess as long as people know what it means, it doesn’t matter what you call it. As for CMY, I think the K has to be in there because printers include black. If you said CMY someone could think there was no black used.

     
  7. 7 Yannick

    Oh okay cool yeah that would make sense. :-) Thanks.

     
  8. 8 Eric

    “K” in CMYK stands for Key. If you’re mixing CM and Y practically you get “a dark murky color”. More at wikipedia: http://en.wikipedia.org/wiki/CMYK_color_model#Why_black_ink_is_used

     
  9. 9 femmebot

    Actually, you mean complementary colors, not complimentary.

     
  10. 10 Natalie

    Thanks, “Femmbot” I fixed the mispelling. I hope you found something about the article more interesting than one boring word! :)

     
  11. 11 Kevin Potts

    Great article, Natalie. It was a nice refresher course. And Eric, thanks for the heads up on the “K” in CMYK. Always wondered about that one.

     
  12. 12 Daniel Fluck

    Very nice article. As being colorblind (and writing about it on my blog) I can tell you that loosing the argument about the socks everytime against my wife. And being colorblind means also, that even with great light conditions you sometimes just can’t see the colors. That’s why I am guessing colors – it is almost like lottery.

     
  13. 13 Mark Priestap

    Thanks for the great tips Natalie! As one who is almost completely designing for the web, this stuff is always very mysterious for me. Thanks for the handy resource…much appreciated.

    I caught your interview on the Web2.0 podcast. Nice plug for Godbit!

     
  14. 14 Natalie

    Thanks, Mark I was off about a few things, but I’m glad to have the info out of my system anyway. As for the Web 2.0 plug, it was all a ploy to get invited to Godbit and it worked! :D No, really, I’ve had godbit as a home tab in my browser since I found the site last year and I’m thrilled to be a part!

     

Comments closed after 2 weeks.