-------------------------------------------------------------------------- Art Guild Tutorial "How to Mix Colors" by Dave Seah (7/16/92) Apple II Art & Graphics Forum (keyword:AGR) --------------------------------------------------------------------------- 4096 Colors? But I just want one! This tutorial is an introduction to some basic color theory. Perhaps you've felt daunted by the sheer number of choices you appear to have. Maybe you can never quite get the color you want without spending a lot of time fooling around with those Paint Programs. Well, it's your lucky day! I will be telling you a bit about how some "color systems" work. Armed with this little bit of information, you'll be mixing colors like an old master. If not, then at least you'll be doing it just like me! :-) The focus of this tutorial is not dependent on a specific paint program, though I will refer at times to DeluxePaint II. If you understand this tutorial, you should be able to take advantage of any paint program on the GS (and on the Amiga and IBM-PC with VGA as well) 640-Mode Desktop Colors 640-mode desktop (also known as 640 16-color dithered mode) is a special consideration that must be dealt with separately. This tutorial deals with "pure" colors, while 640-mode desktop colors are "dithered" colors. "Dithering" is a method of producing "false color" or "pseudo-color" when you don't have a lot of colors to choose from. In 640 mode, you only have 4 pure colors available. Hence, to get 16 "colors", you have to play some tricks on the human eye by putting different pure colors right next to each other so they "blend together". It's a different game altogether, so I will not deal with it in this tutorial. Red, Green, and Blue...The Primary Colors of Light [At this point, you may want to examine the file Colors.1. This picture shows the primary, secondary, and tertiary colors described in the following paragraphs] As you probably have heard, the Apple IIGS color monitor is called an "RGB monitor". RGB stands for Red Green Blue...these three colors are the PRIMARY COLORS. It so happens that a combination of these three colors can be used to create any color visible to the human eye. Your RGB monitor mixes varying intensities of these colors to produce a wide range of hues and intensities. If you look very closely at your monitor, you may be able to discern individual dots of red, green and blue, grouped into tiny triangular formations. If you have a Sony Trinitron monitor (or TV set, for that matter), you will see vertical stripes of color. With Red, Green and Blue, you can mix a few more colors. If you mix RED and BLUE, you get a purplish color called MAGENTA. Mixing GREEN and BLUE makes CYAN, a kind of (duh) blue-green. Mixing RED and GREEN will give you (somewhat surprisingly) YELLOW. If you mix all three colors together, you get WHITE. In summary: BLUE + GREEN equals CYAN RED + GREEN equals YELLOW RED + BLUE equals MAGENTA RED + GREEN + BLUE equals WHITE The first three synthesized colors, CYAN, YELLOW and BLUE, are called the Secondary Colors. By mixing one Secondary color with a Primary color, you create a Tertiary color. Hey...That's Not What Mrs. Bublitz Said In Art Class! There are a couple of things that may be bothering you up to this point. One is the choice of our primary colors. You may recall that in Art class, the primaries are often red, blue, and YELLOW instead of GREEN. Take my word for it...in the world of computer graphics, the primaries are red, green, and blue. In the world of paints, the properties of particular paints make the choice of different "primary colors" more desirable. Mixing pigments works different from mixing light. When you are mixing colors with light, this is called ADDITIVE COLOR MIXING. This is because you are actually adding different colors. When you look at RED mixed with BLUE, you are seeing BOTH red and blue. Hence, "additive". With paint, you are looking at reflected light. In a vastly oversimplified sense, red paint reflects "red light" only. Probably some "blue" and "green" light is reflected as well, but the predominant light reflected is red. When you mix two hues together, only the "common" color gets reflected back to the eye. For example, consider two different kinds of paint. PaintA reflects both green and red light (yellow), while PaintB reflects green and blue light (cyan). These two paints together pass "green", so if I mixed PaintA and PaintB together, I would get a "green" paint. The other colors, BLUE and RED, are absorbed by PaintA and PaintB respectively and never get reflected back. This way of mixing colors is called SUBTRACTIVE COLOR MIXING, because colors get "subtracted" by the paint before any light is reflected. If you mixed RED GREEN and BLUE together, you get BLACK because everything gets subtracted out (no light = black). The Primary Colors in a Subtractive Color System are CYAN, YELLOW and MAGENTA, and the Secondary Colors are RED, GREEN and BLUE. This is just the opposite of the Additive Color Mixing scheme. Note this description of subtractive color mixing is really oversimplified, so you didn't hear any of this from me. :-) Shades of Color The above discussion of Additive Color Mixing doesn't make mention of different SHADES of color. You can have a really bright red, or a dark red. You can have a very pale red. The way you control brightness and darkness is by varying the AMOUNT of colored light. The more "red light" is concentrated on a pixel, the "brighter" and more "vibrant" a color will appear. Using just a little bit of red light will result in a dark red color. In general, you can say that the MORE light you see, the BRIGHTER things are. The LESS light you see, the DARKER things are. If you don't believe me, try turning off the lights. Dark, isn't it? With the RGB Color System, we can play with different amounts of Red, Green and Blue for each individual color. Try running your favorite color paint program, and enter the Color Editor function (It's called Palette in DeluxePaint II, and "Edit Colors" in PaintWorks). Typically, you will see a set of three bars labeled RED, GREEN, and BLUE. You may have to click on a button to choose RGB color mixing. EXERCISE #1: Make a BRIGHT RED color Choose a color to modify, and make RED the highest. Make BLUE and GREEN zero or the lowest the scrollbars will go. Congratulations! You have made bright red! EXERCISE #2: Make it a DARK RED Without changing the RGB settings from EXERCISE #1, start reducing the value of the RED scrollbar. Notice how the color gets darker and darker. When you turn it all the way down, it goes BLACK. Playing with Pale Colors Now that you can make bright reds and dark reds, you will want to know how to make PALE reds. You can think of a pale red as just having a lot of white light in it. Before we make that pale red, we will discuss WHITE, BLACK and GRAY....this leads right into making pale colors. EXERCISE #3: Make WHITE This is easy! You know that RED + GREEN + BLUE is supposed to make white, right? Turn up all the RGB values as high as they will go. You should get white. EXERCISE #4: Make GRAY What happens if you use equal parts if RED, GREEN and BLUE? You should get white, but if you are using less that the "full" values you will get GRAY. Set all the three RGB scrollbars to the same value or setting. With less light, you get darker colors. Gray is just a "dark white". EXERCISE #5: Make Pale Red Now that you have a gray color, try raising just the RED scrollbar to its full or highest setting. You should have a paler red that is neither bright or dark. When mixing RGB, you may find it handy to think in terms of "dominant colors". When all three colors are present in equal amounts, no one color dominates, and you will get a "neutral" gray or white. There is no color. You could also say that ALL colors are present, but since they are all equal, they neutralize each other. If you increase the amount of BLUE in the color mix, naturally the color will start turning blue. Add some green, and the color will start going green. If you had WHITE, and dropped the amount of GREEN to zero, you would have RED and BLUE = MAGENTA left. Confused? Here's a simple chart that might make more sense: ---------------------------------------------------------------------- A Guide to the RGB Color System ---------------------------------------------------------------------- To get... Mix these... Brighter Darker Paler ---------------------------------------------------------------------- red RED +R -R +B+G purple RED + GREEN +R+G -R-G +B green GREEN +G -G +R+B blue-green GREEN + BLUE +G+B -G-B +R blue BLUE +B -B +R+G yellow BLUE + RED +B+R -B-R +G red RED +R -R +B+G ---------------------------------------------------------------------- To make a color brighter overall, add equal parts of RGB if possible To make a color darker overall, remove equal parts of RGB if possible ---------------------------------------------------------------------- A "+" sign means to ADD more of Red, Green or Blue. "+B+G" means to add EQUAL parts of Blue and Green. A "-" means to SUBTRACT Red, Green or Blue. Similarly, "-B-G" would mean to subtract EQUAL parts of Blue and Green. You can tweak the colors by adding a little more of one color component than another. The Hue-Saturation-Value (HSV) Color System [Before starting this section, you may want to view the picture Colors.2. This picture shows the difference between saturated, unsaturated, dark, and light valued colors. This file must be viewed with a program like DreamWorld Systems's DreamGrafix program, or a SuperHires picture viewer that is capable of displaying multiple palette pictures. The ShowPic NDA, FinderView, and SHR.View are all capable of displaying this picture] Now that you've mastered the RGB color system, you may get tired of manipulating three separate color components to get JUST the right color. Suppose you want a pale red. You use the mouse to increase the RED component all the way up, and drag the BLUE and GREEN component scrollbars all the way down. Now you want to make it paler, so you add equal parts of BLUE and GREEN slowly. Make it a little more yellow by adding GREEN. Now you decide that pale pink you have is a little too bright, so you reduce all components by equal values. The BLUE value bottoms-out first, so you continue reducing the other components by equal parts. Maybe it should be a little redder, so you add a more red...and so on. It can get pretty tedious. Enter the HSV system. This is supported under DeluxePaint II and Platinum Paint (in Platinum Paint, click on the R G B labels under the scrollbars to change to HSV). HUE is the "spectrum color", and is organized in this order: RED YELLOW GREEN CYAN BLUE MAGENTA. Between RED and YELLOW is ORANGE, of course. By changing the position of the HUE scrollbar, you fall somewhere along the spectrum. Note that the hue "wraps around" as it does in the Color Circle of picture Colors.1. SATURATION is a measure of how "pure" a color is, which can be construed as the amount of "white" that is in a color. Recall that the amount of white depends on the presence of other colors. The purer a color, the less white exists. The highest saturation value will yield the purest color, while a low saturation value will make a "washed-out" color. Pink is a "desaturated color", because it is "whiter" or "less pure". Fire Engine Red is a highly saturated color...it is very "pure", with almost "no white" in it. The picture Colortut.2 shows the highly saturated colors on top, with the desaturated, pastel-like colors on the bottom. VALUE is a measure of high BRIGHT or INTENSE a color is. This relates to the total amount of light that is gathered by the human eye. A high VALUE means there is lots of light, while a low VALUE indicates less light. Hence, a low VALUE'd color is "blacker", while a high VALUE'd color if "less black". To make a color darker, you reduce the VALUE. To make it brighter, increase the VALUE. Fire Engine Red has a high VALUE (it's bright!), while Rust has a low VALUE. It's dark...has lots of black in it. The picture Colors.2 shows the low value colors at the bottom of the screen, with the more intense colors towards the top. GRAYSCALES in the HSV system are easy. The brightest gray is WHITE, which is a completely washed-out color. No color at all, in fact. To make the varyious intensities of a grayscale, you adjust the VALUE. A VALUE of 0 would be black. Note that the HUE doesn't matter at all...since the SATURATION is fixed at 0 (no color), changing the HUE doesn't do anything. EXERCISE #6: Mix Forest Green Set SATURATION and VALUE to the highest settings, and vary the HUE setting to cycle through the colors of the rainbow. Hence, you will be seeing pure colors (no white mixed in, brightest possible colors) as you sweep through the different HUE settings. Fiddle with the HUE scrollbar until you see a green you like. This will be a bright green, of course, since it is 1) Highly Saturated and 2) Has a high Value. To get a darker green, reduce the VALUE. The brightness drops, and you get the darker forest green. You can make this color a little bluer or greener by fiddling some more with the HUE setting. As you play with the VALUE bar, you may want to observe how the RGB settings change. Notice how two or three RGB values change as you adjust the VALUE. Convenient! EXERCISE #7: Mix Pale Sky Blue As in Exercise #6, set the SATURATION and VALUE to their highest settings. Adjust the HUE setting until you see a nice bright BLUE color. For Sky, you probably want to choose something closer to CYAN. Since you want a PALE blue, you start desaturated the color by dropping the value of the SATURATION scrollbar. This makes the blue "less pure" by introducing more white into the color. Lighten the color to your liking. Notice how the RGB settings change...you should see the RED value increase and decrease while BLUE and GREEN values stay pretty much the same. When you get that perfect pale blue sky color, go on to Exercise #8. EXERCISE #8: Make Slate Blue Gray With the color you mixed in Exercise #7, start to darken the blue color by decreasing the VALUE setting. That's All Folks! That is essentially how I mix colors. I hope you have gleaned an understanding of how colors interact on the GS. You will find that an IBM-PC with VGA adapter will work exactly the same. So will an Amiga or Atari ST. In general, any computer that requires an Analog RGB Monitor will generate colors using the RGB color system. The HSV (and other systems like CYMK, HSB, HLB and others) are a convenience depending on what you are doing with computer graphics. I find the HSV system as implemented in DeluxePaint II to be the most useful for quick selection of colors, while RGB is good for "tweaking". EQUIPMENT USED IN PREPARING THIS TUTORIAL I used the following programs for preparing the examples in this tutorial: DeluxePaint II, by Electronic Arts Excellent implementation of RGB and HSV color editing Platinum Paint, from Beagle Brothers Full-featured paint program that you should have on your shelf. An excellent (and cheap!) book you may find interesting is "COLOR and How to Use It", by William F. Powell. While this slim book is aimed toward painting, it has plenty of color theory presented in an informal and colorful arrangement. It cost me less than 7 bucks. It's available from Walter Foster Publishing as part of their Artist's Library Series. Check it out. --------------------------------------------------------------------------- GLOSSARY Color System A way of parameterizing or systematically defining color. It does no good to just say, "sorta orangey with some red" in today's number-crazy world. There are a number of different color systems in use today, but the common ones we see in the Apple II GS world are the RGB and HSB systems. HUE The "spectral color". Another way to think of it is by "color names", arranged by order of the colors in the rainbow (which is what a spectral order is). The hue does not tell how bright or dark or pale a color is. SATURATION The purity or intensity of a color. Fire-engine red is a very saturated color, while tea-rose pink is a pale, washed-out version. VALUE The extent to which a color radiates light. The higher the value, the more light you see so it looks brighter. A low value indicates a rather dark color. PRIMARY COLORS The three colors in a given color system (additive, subtractive) that can be used to generate ALL other colors. SECONDARY COLORS Colors that are generated from a mix of two of the primary colors. RGB Red-Green-Blue. The primary colors for an additive, light-based color system. Mixing equal parts of red green and blue will produce white light. Mixing different amounts of red, green, and blue light will produce just about any color that we can perceive. CYMK Cyan-Yellow-Magenta-Black. Cyan, Yellow, and Magenta are the primary colors of a subtractive, pigment-based color system. Mixing equal parts of cyan, yellow and magenta will produce a black color. In printing processes, an extra black pigment is often added to produce "real black", since variations in the purity of pigments may produce a slightly tinted color. HSB A color mixing system based on Hue, Saturation, and Brightness. HLB A color mixing system based on Hue, Lightness, and Brightness HSV A color mixing system based on Hue, Saturation, and Value. COLOR COMPONENT One of the parameters used to define a color in a given color system. In the RGB color system, for example, the "red" is a color component of that system. --------------------------------------------------------------------------- About me, the Author: I have just received my Masters in Electrical Engineering, with a serious bent towards software systems and computer graphics. I've been playing with graphics and programming since I was in Taiwan, hacking away on my counterfeit Apple II. Now blessed with a GS and back in the States, I spend my time on America Online as a consultant for the Apple II Art & Graphics Forum. Come and visit the Art Guild! US Mail (after 8/8/92) Email: 272 Congress Ave Internet: AFCDaveS@aol.com Rochester, NY 14611 America Online: AFC DaveS --------------------------------------------------------------------------- This Tutorial may be distributed other BBSs and Computer Services provided that it is uploaded in whole, unedited form. Copyright (C) 1992 by Dave Seah & Three Legged Cat Productions All Rights Reserved --------------------------------------------------------------------------- America Online Winner of the 1990 Apple II Achievement Award for Best Apple II Online Service Call 1-800-227-6364 for Signup Information ---------------------------------------------------------------------------