💾 Archived View for mirrors.apple2.org.za › archive › apple.cabi.net › Graphics › colors.txt captured on 2023-01-29 at 04:43:15.
-=-=-=-=-=-=-
--------------------------------------------------------------------------
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
---------------------------------------------------------------------------