Understanding the Colors of Light

an Image Magick Tute by Florence W Deems
Unless you understand that the primary and secondary colors of Llght are different from the primary and secondary colors of Pigments which we all learned in grade school, you may find using colors for imaging confusing. In the following chart are the Light Primaries and their opposites (Secondaries).

Primary Colors of Light: "Any three colors (or frequencies) of light which produce white light when combined with the correct intensity are called primary colors of light."
red cyan
green magenta
blue yellow
The Colors of Light Wheel

There are TWO COLOR SYSTEMS for dealing with Light that our technologies use: RGB (Light Primaries) and CYMK (Light Secondaries).

  • RGB (Light Primaries):

    Although Yellow is one of Pigment's Primary colors, to get Yellow Light, in this system you have to combine the Light Primararies - red and green. This is the color system used by TV, computer monitors, and Image Magick - it's called the RGB, or Red, Green, Blue system. So TV and IM combine the Primary colors of Light instead of the Secondaries. Combining two Primaries produces one Secondary, as below:

    #00FFFF = cyan
    #FFFF00 = yellow
    #FF00FF = magenta

  • CYMK (Light Secondaries):

    The system used by many digital cameras, Photoshop, printers and color copiers is the CYMK - Cyan, Yellow, Magenta, Black. These use the Secondaries of Light. Black is not a Primary or a Secondary - it is the absence of Light.

So when you see a color image on TV or on a computer monitor, you're looking at the RGB system. BUT, when you must print out a color image from the TV or the monitor, the dye-sublimation printers (what some photo labs use), the lazer printers, or the ink jet printers (which is what we use) have to translate the RGB codes into the CYMK codes to print. Fortunately for us, we don't have to figure this out ourselves!

We have three ways to tell browsers what colors or hues to present to viewers:

  1. Color Names. Such as red, blue, gray20, gray85, midnightblue, antiquewhite, and so on. Some names have 4 tones: example - coral1, coral2, coral3, coral4. There are more than 500 color names that all browsers accept. Image Magick accepts Color Names and Hex Codes (see #3 below).

  2. RGB Values. Each hue is expressed as a series of three sets of three numbers each. Numbers range from 0 (black) to 255 (white). The first set represents how much of the Red channel is wanted, the second set represents the Green channel, and the third set the Blue channel.

    Black = 000, 000, 000
    White = 255, 255, 255

    At Image Magick, the RGB codes have been added recently (Dec, 2006). Some other imaging tools may use them, so it's well to be aware of this system, too.

  3. Hexidecimal Codes. There are 16 levels of hue brightness and saturation in this system. The levels are represented by numbers for the lesser levels and by letters for the brighter, more intense levels. Two numbers or a number-letter combination, or two letters are used for each channel of Red, Green and Blue, written in that order:

    Red = #ff0000; Green = #00ff00; Blue = #0000ff.

    When using the Hex codes at Image Magick, you must remember to use the # or pound sign (capital 3 on keyboard) before the code itself.

A few examples:

Color Name RGB System Hex Codes
Antiquewhite250, 235, 215#faebd7
Midnightbue25, 25, 112#191970
Since there are so many hues to choose from, many people have prepared Color Charts. The Professor has an interactive Color Chart that lists the Color Names alphabetically along with their Hex Codes. At the top of the page is a link to Hex-to-RGB and RGB-to-Hex conversion tools. This is a great chart to print and save. I consult mine daily.

Color Charts

Color Charts and Wheels by Flo
A collection of annotated links to many color charts. Most of the wheels, however, are for pigment colors, rather than light colors. Some interactive charts, too.

Bunches of Browns by Flo
Brownies by Flo
Specializing in some of the many browns we can make. Browns are hard to make without using a chart.

Hexidecimal-Decimal (RGB)

Flo's Explanation
For those who want to learn more about the use of color codes in imaging and building webpages.

Having Fun with Colors

Flo's Color Playground
Suggestions for playing with colors to further your understanding.

Color Channels for Imagers by Flo
This is the start of a new tutorial. More will be added later.
* Many thanks to Gerren for reminding me
of these two Color Management Systems.

For new ways to write color to web pages that allow us more color control, please see Colors on Web Pages.

Thursday 19th of October 2017 11:09:51 PM

Flo's Image Magick Tutes
Flo's Other Tutes

by Tone By Tone Dot Net

Tandem Tooters
~ Arbor Hosting ~