Whole document tree

12 

Color Models

Color models

Color models are used to classify and standardize color. In this chapter we're going to discuss a few of them:

RGB

RGB stands for the three colors used in this system - Red, Green and Blue. Perhaps an "L" for Light should be included as well, because this color model is very much based on light. Imagine three different spotlights, red, blue and green, directed at the same spot on a white screen. Because each spotlight adds more light, the resulting color of two spots will be brighter than just one.

Where all three spots meet, the color is at maximum brightness - white. As you may have guessed, the RGB model is used in a television or computer monitor. The colored spots of a TV screen emit three colors, and the sum of these colors determines the impression to the eye. If the color spots shine with equal strength, the visual impression is white or gray.

This is called an Additive color model, because light is added to light, which results in brighter colors. Each color in the RGB system has a value for Red, Green and Blue. This value goes from 0 to 255, where 0 for all three colors equals black, and 255 for all equals white. Thinking of the spotlights this is quite logical - no light, or weak light means black or dark color, and full light from all three must result in a strong white light. This means that you can get more than 16 million colors (TrueColor) because 256*256*256 = 16.777.216, but you can only get 256 shades of gray. If you only have an 8-bit output to your color monitor, this is of course academic, because you'll never be able to see more than 256 colors anyway.

CMYK

The other important color model you need to understand is called CMYK. CMYK stands for Cyan, Magenta, Yellow and Black (K for Key color). These colors are sometimes called process colors, because you use them in four-color process printing. If you have a color printer, you know that the toner in the machine consists of these primary colors.

Primary colors mean that all other colors can be created by mixing these colors together. Cyan, magenta and yellow are theoretically all you need, but to make a print look sharp and crisp you also use a black plate in the printing press. This is called a Subtractive color model, because the process ink pigments "subtract" light when mixed, or absorb certain colors and reflect others (for your eye to see). Naturally, red, green and blue are the primary colors in the RGB color space.

INDEXED

Indexed, or mapped color doesn't have RGB channels. It works with a fixed color value for each pixel. Each color is put in a specific color table or color map (containing 256 or less colors if the image is in GIF format) which comes with the indexed file, and this color table is then used to map color to pixels in the host application. Indexed files contain less data and therefore use less disk space. If you are designing for the web, you'll have to consider that many computers can't display 24-bit color. There are a lot of people out there who are limited to 256 colors on their monitor. This means that your full-color image will be indexed on their screen to a measly 256 colors to represent your wonderful "millions of colors" image. It may well come out looking bad, and it still takes as long to download.

There are two kinds of image file formats you can use on the web - JPEG and GIF. There are advantages and disadvantages to both formats, and I'm not going to get into the big discussion about GIF vs. JPEG here. The important thing to know is that GIF is indexed and JPEG isn't. There are many reasons to use GIF:s, the most important being the small file size of indexed images. Also remember that if you assign a WWW-indexed palette to a GIF you know that "what you see is what you'll get". Your website will always look the same in Netscape, whether you have an 8, 16 or 24-bit output. Word of warning: Never ever index your image before you're finished with it. Always keep an RGB copy of your original before converting to Indexed color. The reason should be obvious - most of the image information is lost forever as soon as you convert it, and you can't get it back by changing to RGB again. You also can't work with (most) filters on an indexed image.

HSV

HSV color stands for Hue, Saturation and Value. This color model is best understood if you open the Color Selection dialog and look at the three top slide bars marked H, S and V.

The HSV color model is used in the Image Dialog for Colors and Channel Ops. It is also used in certain filters and Modes.

Hue

Hue describes where the color lies along the spectrum - i.e. what "rainbow color" it is; red, orange, indigo or green. As in the rainbow, the starting and ending color is red. Hue can be described as a color circle with red at 0 degrees, yellow at 60 degrees clockwise, continuing with green, cyan, blue, magenta and red again at 360 degrees.

S aturation

Saturation is about how pure or "loud" the color is. The saturation value goes from 0 (grayscale) to 100 (max loudness), where a low value indicates a neutral, dull color, and a high value means a strong, pure color.

Va lue

Value is all about brightness. Zero for Value means totally black, and 100 is the brightest Value a color can have. Max value doesn't mean white though, (unless saturation is zero)- it is simply the brightest value a color can have with a certain saturation.

N CS

NCS, or the Natural Color System, is the system used by architects and interior decorators. This is also the system they use at the chemist's when you buy paint for your house etc. (if you live in the U.S you'll probably use the Munsell-system instead). The NCS color model is based on the six elementary colors; Yellow, Red, Blue, Green, Black and White.

All colors can be described by their likeness to the elementary colors. The elementary colors and the color scale between them form a 3-dimensional body. From this color body you can derive a color circle and color triangles. In the color circle (horizontal section of the color body), the colors are arranged according to their position in the spectrum, evenly distributed between the four basic colors Yellow, Red, Blue and Green.

For every color in the circle there is a vertical section, showing the different shades of a color, meaning Whiteness, Blackness and Colorfulness (saturation). In this way you can name a color: Y70R s70c20, meaning a dark brown orange color with 70% red in it, s=70 means it has 70% blackness and c=20 that it has 20% colorfulness.

Even if you don't deal with this system on your computer, it is important that you understand it, because it is the single most used color system for professional designers and architects (At least in many European countries). If you get an assignment where the client want you to suggest different colors to a pattern, an object or a building (by using a program like Gimp or Photoshop) you must normally be prepared to relate to NCS values to the client, not RGB or HSV.

Spot color

Spot color or Custom color means a color in a commercial custom color system used for printing in color when you don't want 4-color process printing. You may want a non-rasterized smooth silver gray for text on a poster; and then you have to specify a predefined spot color. PANTONE and TRUEMATCH are the most common custom color systems used by professional printers. Read more about spot color in chapter 18.

Grayscale and Line Art

It is pretty obvious what a grayscale image is. It is an image consisting solely of shades of gray (max 256). This means that grayscales have a small file size compared to RGB files, and that they can convey more detail than indexed color images. Line Art is the most simple, and smallest bitmap file there is. A Line Art image consists of white or black pixels alone. They are extremely simple, but can be quite expressive. You can either scan in Line Art or use the Threshold or Posterize command in the Image/Colors dialog.

Complementary or Inverted colors

The definition of complementary colors are two colors which produce a neutral gray when mixed together. Complimentary colors in real life are not the same as on your monitor. Most people are taught as children that mixing yellow and blue results in green. This is perfectly true if you're talking about inks, oil paint and pigments, but it doesn't apply to the RGB color model. Try painting yellow in a layer on a blue background and watch it in 50% opacity - no green appears, just a neutral gray. Do the same with watercolor or oil paint and you'll definitely get a greenish color! The best way to understand this is to look at the RGB color circle. In the circle model the complimentary colors are found opposite each other. In the RGB color system the opposite of red is cyan, the opposite of yellow is blue and so forth. Look at it this way; the inverted or complimentary value equals 255 minus the original value in the RGB model.

This doesn't work with pigments in real paint. Here you must use another color circle. In the Natural color circle you can see that the complimentary color of yellow isn't blue but violet, while the complimentary color of blue is orange. Water color artists often work by adding a complimentary color to neutralize an overstrong background without dulling it, and why do you think some old ladies have "blue" hair? They are just trying to neutralize unwanted red/yellow shades in their gray hair by using a dye with the complimentary color - which is blue or violet.