GrafX-Design.com
Home Tutorials Reviews Email Us
GrafX-Design.com
 tutorials | resources | inspiration 

General Graphics Tutorials -- Color

This is kind of an ambitious undertaking for me. Normally I try to keep the size of tutorials down to a few pages at most (this one was over 20 pages in Word!). Unfortunately, color is a difficult and rather lengthy topic even where web graphics are concerned. I hope you won't find this tutorial too long-winded and that you'll find it a welcome reference.
--tmc

Color


Color Models (Part I)

  • CMYK
  • RGB
  • HSL/HSB
  • Indexed
  • How the Models Work
  • Color and Your Computer Screen


Color Depth (Part II)

  • 8-Bit
  • 16-Bit
  • 24-Bit


Color Palettes (Part III)

  • Problems with Limited Palettes
  • How to Build or Select a Palette
  • Types of Palettes
    • Exact Palette
    • Adaptive Palette
    • Web Palette


Previewing Your Images (Part IV)


Hexadecimal Notation (Part V)

  • Counting in Hexadecimal
  • Converting Hexadecimal to Decimal
  • Converting From Decimal to Hexadecimal
  • A Necessary Evil


Color

When taken all together, color is one of the hardest web graphics topics to understand. There are a lot of new buzzwords and some really geeky computer stuff involved. As with the rest of my tutorials, though, I'll try to make this experience as painless as possible. Once you've finished this tutorial, you'll be able to move on to other tutorials with real confidence.

Even some graphic artists have problems with color and how it relates to web graphics. Some of the things they, and you, must get used to are how computers display colors. The displaying of colors involves both hardware and software. Some of the buzzwords involved are: bit depth, palettes, browser-safe and platform dependence. All of these topics will be covered in this tutorial. Don't worry if it doesn't all make sense the first time around. I suggest you read through this tutorial to get a feeling for what it's all about and then refer back to it as necessary.



Color Models

For our discussion of color, there are a few models that you need to know about. Some of these, such as CMYK, are intended more for printing and, as such, are not applicable to web graphics. These various models are really just different ways of looking at the same thing, similar to the way a word in a foreign language has a counterpart in English. The words sound different and look different but they mean the same thing.

The different models we'll look at are CMYK (cyan, magenta, yellow and black--yes, K=Black; that's not a typo), RGB (red, green and blue), HSL/HSB (hue, saturation and luminance or brightness) and Indexed (a subset of RGB).

Q&A: What's the difference between CMYK and RGB?

The main difference is that CMYK is used to describe colors when discussing printing and RGB is for describing colors for screen-based display such as your computer monitor or television set.

C,M,Y & K are the four colors of ink that, when mixed together, can produce all of the colors needed for printing. C is for Cyan, M for Magenta, Y for Yellow and K for percent blacK.

R,G and B are the three colors that, when mixed together can produce all of the colors needed for onscreen images. R is for Red, G is for Green and B is for Blue.

The CMYK color model is what is known as subtractive. This means that when you mix, or add, multiple colors you'll eventually end up with black and when you subtract colors you'll eventually end up with white.

The RGB model is additive. This means that when you mix, or add, multiple colors you'll eventually end up with white and when you subtract colors you'll eventually end up with black.


To see what I'm talking about, look at the CMYK and RGB values in figure 3.1 and you'll see that, for the color white, all of the CMYK values are 0 (subtractive) and all of the RGB values are 255(additive). i.e. subtracting, or moving the separate color values towards 0, in CMYK results in white and adding, or moving the separate color values towards 255 in RGB results in white.

figure 3.1
figure 3.1
Color Picker dialog box



CMYK

As mentioned earlier, CMYK is the color model associated with color printing and, therefore, is not of immediate interest where web graphics are concerned. If, on the other hand, you sometimes import graphics from predominantly print type graphics programs such as Corel DRAW! or Adobe's Illustrator into a program like Adobe's Photoshop, you may have a problem with the default mode being reset from RGB to CMYK. The first clue that this has happened may come when you go to apply a plugin filter only to find the entire menu grayed out. If this happens, don't panic. Check to see if the mode has been reset and, if it has, set it back to RGB.

NOTE: You can determine which mode an image is using in Photoshop by choosing Image, Mode. The current color mode will have a check mark next to it. To change the mode simply select the one you wish to use. Once you've set an image to RGB you should then be able to use all of the available filters.


RGB

RGB, which stands for red, green and blue, is the most common computer graphics color model. There are 256 possible values for each of the three colors. Without getting into the higher math, what this means is that you have a possible 256*256*256 colors--256 values for red, 256 values for green, and 256 values for blue. A quick glance at a calculator will show that there are 16,777,216--or approximately 16.7 million--colors available with this model. You may or may not have access to all of these colors depending on a number of software and hardware related factors.

NOTE: To determine how many colors your hardware is capable of displaying:

Windows 95: right-click anywhere on the desktop. A pulldown menu will appear. Choose Properties this will bring up the Display Properties dialog box. Choose Settings to see how many colors are being used.

Windows 3.1: Select the Windows Setup icon (found in the Main program group). In the Display pull-down menu you'll see the current settings.

Mac: open the control panel (named Monitors, or Monitors and Sound depending on which version of the system software you're running) from the system folder. The current setting for your monitor will be displayed there and can be changed from there, as well.


Once you've bumped up the color resolution most of your software should take advantage of the extra colors.

HSL/HSB

HSL or HSB for hue, saturation, and luminance or brightness is just another way of looking at the RGB model. Hue means the same as color, saturation is the amount of color and luminance, or brightness, is self-evident. Usually, in cases where you can adjust the color within your software program, both the HSL and RGB models will share a common dialog box. This is true in both Paint Shop Pro and Photoshop, for example.

Although different programs will use either L, for luminance, or B, for brightness, these two are exactly the same. When you adjust the brightness by adding to it you'll get a brighter version of the color you're working with.

Saturation is the amount of color being used. Bringing this value up will increase the color and decreasing this value will eventually give you a shade of gray.

Changing the value for hue will take you through the different color values i.e. red, green, blue and all of the various colors in between.

NOTE: If you become more familiar with one color model (RGB or HSL) over the other, use whichever you please. During the course of this tutorial I'll use mostly the RGB model.


Indexed

Indexed color is similar to RGB and might be considered a subset of it. With indexed color you are limited to 256 colors. These 256 colors, though, can be any 256 colors from the 16.7 possible colors. Software such as Jasc Software Inc.'s Paint Shop Pro don't discuss colors in terms of indexes but choose to refer to them in terms of color depth.

NOTE: Indexed color is important with GIF images. GIF is one of the two possible image types available for web graphics. We'll look at GIF and JPG, the other image type, in more depth in a future tutorial "Creating a Successful Image".


How the Models Work

Because computers start counting at zero rather than 1, the possible values for red, green and blue go from 0 to 255. When all three values are 0, the resulting color will be black (in RGB and Indexed); when all three values are 255 the resulting color will be white. As expected, then, a value of R:0, G:0, B:255 (no red, no green, and all blue) will yield a vivid blue. A value of R:0, G:255, B:0 will give you a bright green. And a value of R:255, G:0, B:0 will be bright red. Mixing the values for R, G, and B will produce one of 16.7 million colors.

Your color television uses the same method of displaying colors as your computer monitor. When all three of the colors are fired at full strength the result is bright white. If you could get close enough to your television, although I don't recommend this, you might be able to see that what appears to be a white dot is actually a collection of very small red, green and blue dots.

On the computer these dots are called pixels. Pixel stands for picture elements. Your computer screen displays a rectangular array of these dots in a fixed set of numbers like 640x480, 800x600 and 1024x768. The more dots or pixels displayed, the better or higher the resolution. This higher resolution, though, requires more video memory.

To put it simply: Resolution is the number of pixels your monitor can "resolve" or display. The higher the resolution is the better the picture quality. I'll also use the word resolution when talking about color. Again a higher color resolution will result in more colors being displayed.

You may wonder how these numbers 640x480 and 800x600 work, since your screen doesn't actually change its size. What happens is that at a higher resolution, say 800x600 versus 640x480, the computer displays more pixels over the same surface. This will mean that the icons and windows on your system will get a little smaller. At the same time, though, you'll be able to see more on your screen. If you have a problem with higher resolutions on your screen you may want to consider getting a larger screen. The prices on 15 and 17 inch monitors have really come down in the recent past. A 15 inch monitor running at 800x600 with millions of colors will give you a really nice picture, especially if you spend a lot of time in front of your computer.

The 15 inch screen that I have hooked to my Internet machine runs at 800x600 with 64,000 colors and gives me a really nice view of the web. If you've only seen the web with 256 colors you'll be really surprised the first time you see a web site with a higher color resolution. You won't see any dithering or muddy looking graphics--instead, most all colors will appear exactly as they're supposed to. It'll be like a whole new web.

Color and Your Computer Screen

How many colors does your screen display? Chances are good that, if you bought your computer recently, it was sold to you as a multimedia machine capable of great wonders. When you bought the machine was it set up correctly, though? How do you know how many colors it's displaying?

If you're running Window 95 it's fairly easy to find out. Right click anywhere on the desktop and you'll a the pop-up menu like the one shown in figure 3.2

Q&A: What if I'm not using Windows 95?

Checking your color resolution on Windows 3.x and Macs was discussed in the section RGB, earlier in this chapter. The dialog boxes will be similar to the one seen in figure 3.2. (If you're nervous about playing with the system settings you might want to refer to the documentation that came with your machine.)


figure 3.2
figure 3.2
Windows 95 Desktop options pop-up menu



At the bottom of this menu is the "Properties" selection. Clicking on this choice will bring up the "Display Properties" dialog box as seen in figure 3.3.

figure 3.3
figure 3.1
Display Properties dialog box



Your dialog box may appear a little differently than this one. The software that came with my video card enhances this one. In any event you should have a tab labeled "Settings". Clicking on this tab will allow you to view the current color depth and resolution of your computer's monitor. You can see that mine is currently set to 1,152x864 at 32 bit color depth. You should be able to change the resolution and color depth to something higher than the standard 640x480 with 256 colors. Experimenting with the settings shouldn't prove troublesome as the drivers normally won't allow you to select higher resolutions or color depth than your machine can handle. Even on today's 14 inch monitors and with a 1MB video card you should be capable of seeing 640x480 with 64,000 colors or even 800x600 with 64,000 colors. Some people find that text on an 800x600 setting is to small to read. However, you should also be able to choose large fonts from the same dialog box. In any event, you should play around until you find a setting that gives you an acceptable picture with the highest resolution and color depth that your system can give you.

NOTE: Some people believe that a higher color setting will slow down the rate at which you can view web pages. This is untrue, however. Even the quicker 28.8 modems are much slower than your video card.



Be sure to check out some of our other general graphics tutorials.


High Quality video-based tutorials

...with over 300 different titles, all taught by professionals. Learn any application in a fraction of the time right from your own desktop. This unique method offers accelerated learning and a high retention rate. Here are a couple of topics that you might find interesting. View free demos of the courses using one of the links listed below.
Photoshop CS2 Tutorials Photoshop Special FX
Photoshop for the Web Photoshop for Photographers
Photoshop CS Tutorials Photoshop Image Artistry
Photoshop Image Restoration Photoshop 7 Tutorials

CorelDRAW Graphics Suite X3 Tutorials CorelDRAW Graphics Suite 11 Tutorials
CorelDRAW 10 Tutorials CorelDRAW 9 Tutorials



Previous Web Graphics Tutorial General Web Graphics Tutorials Next Web Graphics Tutorial
[Previous Tutorial]  [Web Graphics Tutorials]  [Next Tutorial]

We'd like to hear from you... If there are any web graphics techniques you'd like to see covered, send us an e-mail.

 

Current Favorites

Here's of list of our most popular graphics tutorials:

Adobe Photoshop Tutorials

Quick Mask Have you ever wanted to do a little cutting and pasting and make it look as if your head was on someone else's body? Read more....

Corel (JASC)
Paint Shop Pro Tutorials

Transparent GIFs This technique demonstrates how to create transparent GIFs in Paint Shop Pro Read more....


Xara Xtreme Pro Tutorials

Illustrating a Guitar - Part 1 It may seem to be quite an undertaking to create a realistic illustration of something like an electric guitar, but I wanted to challenge the ease-of-use of this software. Read more....


Corel DRAW! Tutorials

Creating Complex Shapes Drawing circles, squares, triangles , etc. is easy with a vector program. How do you combine these shapes to create something more complex, though? Follow this tutorial and you'll see how easy it can be to create just about any shape you need. Read more....

Software Deals

Download and try out the free demos and then save 10%, 20% and more when you decide to buy!

GrafX-Design.com
has partnered with some of the best graphics software companies in the World to offer you terrific savings on your favorite programs.

AlienSkin


Photoshop Plugins
AlienSkin Software - They will never wear suits! We've been using AlienSkin's Photoshop Plug-ins for over a decade and they are still our favorites.

AutoFX


Photoshop Plugins

Xara 3D


Create amazing, high-quality 3D graphics easily!

Read our review of Xara 3D 6 or click the graphic below to download a free trial version.


GrafX-Design.com



Comments/Questions   ||   Copyright © 1996-2009 GrafX-Design.com -- All rights reserved   ||   Privacy