Skip to Content
Skip to Table of Contents

← Previous Article Next Article →

ATPM 4.02
February 1998



How To


Download ATPM 4.02

Choose a format:

Art Department

by Jamal Ghandour,

Color Composition

While passing through Undernet's IRC server last week, I came upon a #photoshop channel. Hoping to find some useful information, I entered the channel. Surprisingly, it was empty except for one person nicknamed Nikon. Evaluating the situation, I decided to ask if he had any new tips for Photoshop. He answered,

"Always use the RGB mode. I don't really advise using CMYK because it projects dull color tones."

Although his statement holds some truth, I realized that many people are completely clueless about color composition. I hope the following information makes the subject a bit clearer.

Note: A detailed coverage of color is impossible in the allotted space. If you would like some information that is not covered here, drop me an e-mail. I will be more than happy to answer. Also, I suggest you read my column in ATPM 3.07. It contains some related information.

RGB versus CMYK


The most significant difference between the two is that RGB is used mainly for images or presentations that are displayed on monitors, while CMYK is the only way to go for color separation (traditional printing). For simplicity's sake, I will not discuss Color Modes in relation to printing (no ink pigments, dot pattern or moirees ...Rejoice!). Rather, I'll relate more about how the computer handles colors.

Bit-depth, Calibration, Hexadecimal...Chaos...
Okay I choose a green color from the color picker and use the bucket tool. Boom! The page is filled with green. What more is there to know? Well, many things. Here are a few factors that affect color:

Bit-depth: Most of you have come across this term, but may not know its meaning. Do not concern yourself with the math, just think of it as:

32 bit = billions of colors
24 bit = millions of colors
16 bit = thousands of colors
8 bit = 256 colors
4 bit = 16 colors
2 bit = monochrome

Percentages are the numerical counterpart for defining a color. You can do this by setting the C,M,Y,K--R,G,B--Hex percentages for print media--screen--Web, respectively.

Color Picker

Calibration is the process of maintaining a true WYSIWYG experience. I'll try to explain with an example. Let's say I make a graphic and post it on the Web. Tom and Belinda both look at it, each using a different screen gamma setting. Both will see the same visual but not with exactly the same color tones. Although these discrepancies can be resolved through periodical calibration, the cost involved usually prohibits everyone except professionals from doing it.

Miscellaneous: These include ways that the computer's operating system or web browser can potentially alter the way an image is displayed, unless some precautions are taken.
I'll bet you never thought there was so much to color, eh? Next issue, I'll show you how to potentially reduce your image file sizes up to 40% by using color schemes properly. Moreover, I will discuss how to achieve the best Web-safe colors!

Copyright © 1998 Jamal Ghandour,<>. Jamal Ghandour
Blue Appleis currently the Executive Manager at SwiftAd international. His motivation
for completing his masters degree in computer science was to research a
device to clone many Guy Kawasakis! The research continues...

Also in This Series

Reader Comments (16)

Farshad Irfani · December 8, 2001 - 15:17 EST #1
I would like to have some literature on the differences between RGB vs. CMYK. Looking forward or your response. Thanks. Farshad Irfani
Lee Bennett (ATPM Staff) · December 8, 2001 - 17:25 EST #2
Farshad - the differences should be fairly well visualized in the graphic above on this page. It has to do with the base colors used to create all colors on a particular medium. When you look at a picture on a monitor or on a paper from a press, the colors you see aren't technically real. A television or computer monitor can really only display varying shades of 3 colors: red, green, and blue. These colors are put on the screen in very tiny dots which, from a normal viewing distance, are too small to be noticed--thus the eye blends them together. By varying the brightness (from totally dark to totally full) of the three colors, your eye perceives a different color. If all three colors are dark, you get black. If all three colors are bright, you get white. If all three colors are somewhere in between, but still the same level of intensity, you get a shade of grey, and so on. CMYK is a similar thing, but sort of the opposite. These are the colors used by press to print color images on paper. The reason it's sort of the opposite of RGB is that RGB colors get lighter when you add more to the screen, but when you add more CMYK color to a piece of paper, it gets darker.
Kent Chang · December 16, 2001 - 14:53 EST #3
Hi. I printed an image to a yellow-colored paper, but the color didn't come out right. I wonder why. Thanks.
Lee Bennett (ATPM Staff) · December 16, 2001 - 15:06 EST #4
Well, Kent, this is going way out on a limb here :-) but wouldn't you think that the yellow paper has something to do with it?
Gabe Kuck · May 13, 2002 - 09:56 EST #5
Is there a formula to translate RGB to hexadecimal (colors)?

Lee Bennett (ATPM Staff) · May 14, 2002 - 01:20 EST #6
Gabe - perhaps I'm not fully understanding what you're asking for. What you're asking for is like asking if there's a translation between Spanish and a novel. They're not directly related. Inasmuch as a novel can be written in Spanish (or English, or whatever), RGB values can be represented in hexadecimal, decimal, binary, etc.

If you meant to say "...translate decimal RGB values to hexadecimal RGB values..." then the answer is, it really isn't a formula--just a direct conversion. Decimal values for each of the red, green, and blue colors are 0 (darkest) to 255 (lightest). Hexadecimal values are from 0 to FF. Remember that hexadecimal is base 16 instead of base 10 as most of us are accustomed to. The extra 6 digits are represented with the letters A through F since there are no Arabic numerals to represent them. Therefore, a decimal value of 9 equals a hex value of 9, but a decimal value of 12 equals a hex value of C. In decimal, you gain an extra digit when rolling over from 9 to 10. In hexadecimal, the second digit comes when you go from F (which is 15 in decimal--remember, '0' is a number, too) to 10. The number 10 in hex equals 16 in decimal, and so on until you reach FF which is 255 in decimal.

Yeah, it's complicated. If doing the math in your head is too much, there are alternatives. Most scientific calculators have built-in conversion. You can key un a number, such as 150 in decimal mode, hit the hexadecimal button, and you get the converted value (96). Another possiblity is to download any of a zillion free utilities to do conversion. The one I use makes an excellent calculator replacement for the pathetic-looking calculator that comes with OS 9 and lower. It's called Calc II. To convert decimal to hex, type in a decimal number, then hit the HX button. To go the other way, type in a hex value (such as FA), hit the 2F (second function) button, then the HX button (which is now the DEC button because you hit the 2F button).

And on a completely different tangent of what you're asking, but I'll mention anyway, if you want to define a web-safe color, simply make sure to only use either 00, 33, 66, 99, CC, or FF for any of the three RGB values, such as 6633CC.
Marco Meertens · May 27, 2002 - 03:09 EST #7
In Photoshop, there is a gamut check. It indicates when the displayed (RGB) colors are too saturated to be printed in CMYK. As CMYK is just the inverse of RGB, I would think that there should be no difference. How come my CMYK is less saturated than RGB?

I run into this problem because I photograph with dia's, scan them in and print them out, hoping to get all my wonderful color on paper.

Also, is it true that laser printers have a higher saturation than inkjet printers?

Lee Bennett (ATPM Staff) · May 27, 2002 - 23:41 EST #8
Marco - you aren't exactly correct with your facts about RGB and CMYK. Saying that RGB colors are too saturated for CMYK isn't entirely accurate, and you have to be careful about generalizing the difference between RGB and CMYK as just being the inverse of each other. That's highly ambiguous. First of all, we should be speaking about additive and subtractive color instead of RGB or CMYK. Monitors use RGB in a subtractive manner, which means the more you add of each color, the whiter the shade becomes. Printing presses use CMYK in an additive manner, which means the more of each color you add, the darker it becomes. The CMYK inks, when laid on paper, get you as close as you can to representing the original color, but it's not 100% accurate. RGB colors on a monitor are better at it or, in other words, RGB has a bigger gamut. When you perform the gamut check, Photoshop is simply showing you the colors in your RGB document that will dull a bit (or, sometimes, a lot) when you convert it to CMYK. It's not that the CMYK mode desaturates the image, it's simply that CMYK cannot represent those colors. This is a very simplistic representation, but think of it this way:
   /  \
 / \  / \
/   \/   \
Think of this bigger (outside) triangle as a space that contains all the colors that can be represented with RGB on a monitor. The smaller triangle inside the bigger one is, for the most part, the amount of color that CMYK printing can represent. Fortunately, most of the colors you'd want to reproduce still fall within the smaller triangle, but when you start to have some really vibrant purples or greens, for example, you'll observe some color shifting.
Amine aboussaid · March 10, 2003 - 07:05 EST #9
I would like to know if there is any software that can calculate the percentage of red, green, and blue in a picture. Waiting for your answer, and thank you in advance.
Lee Bennett (ATPM Staff) · March 11, 2003 - 18:20 EST #10
Amine - most graphic applications, including GraphicConverter and Photoshop, include a palette where you can hover the mouse over a pixel in your photo and you'll see the RGB values. Some of them also let you see it in CMYK or LAB values.

If you don't have these apps, look for DigitalColor Meter which may be already installed on your computer. In OS X, it's probably located in your /Applications/Utilities/ folder. In OS 9, it should be in /Applications (Mac OS 9)/Apple Extras/Monitors Extras Folder/
Jaime · March 18, 2003 - 19:08 EST #11
I am supposed to make a color composition based on a primary blue square fixed near the top right corner of a square grid. Any ideas? Thanks for the info.
Nis · December 10, 2003 - 07:39 EST #12
I would like to know if there any formula to calculate red, green, and blue color composition in an image. Thanks.
Negar Shiukhi · August 8, 2005 - 10:55 EST #13
Im wondered if anyone can help me find some trustful documents about the role of color in advertising at the past 10 years and about new researches related with color in advertising.
Looking forward
Negar Shiukhi
Biao Deng · November 27, 2005 - 02:21 EST #14
I would like to know when the magnitide of R, G and B are not in the same order, or when some values of them are negative, what would occur. Are there any distortion in the resultant composites. Looking forward to your reply.
Lee Bennett (ATPM Staff) · November 27, 2005 - 21:26 EST #15
Biao - perhaps you can elaborate on what you mean by the magnitude of RGB not being in the same order. I'm not following you.

But as for negative values—that's not a possibility to even be considered. The values range from the color in question being fully nonexistent to being fully present. Nonexistent is typically represented as 0 and fully present is represented either as 100% or as the maximum bit value of 255 (or FF in hexadecimal). If all three colors are 100%, then you have white. If all three are 0%, you have black. How can there be negative values?
Mohammad · October 18, 2006 - 16:29 EST #16
Hi , i've read this text and really enjoyed.i did a complete reasearch abt color mode specially in computer graphic.for more info and plz contac me i'll be glade to share it.

Add A Comment

 E-mail me new comments on this article