Color Development: Digital Color Basics

I intended to just write about how to create colors and suggest some cool tools I've found, but this got out of control. Check out the next article:

Color Development: Tools and Methods

There are various ways of building colors for a project or symbol. For general, rapid selection, users are often offered a basic color palette to select a color:

Default color palette from ArcMap

Color palette from Word

Even MS Paint offers a few basic colors

Notice that each of these provide an option to edit the color further.

Color Values

Colors commonly have names: like Black, White, Red, Orange, Yellow, Green, Blue, Purple, Cyan, Magenta, Olive Drab, etc.

! Specifics aside, Black, White, and shades of grays are referred to as colors here

Various environments like CSS, and HTML accept some reserved names to act as color values, however those names correspond to very specific numeric values (discussed below), and can be easily referenced on lists like this one. A color isn't "like red" to a computer. It's Red, or it's not.

In the world of coding, there's a need to describe color in a more articulate way than just names. Due to the diverse nature of how light acts (See Further Reading, at the end of this article), there are also a number of different methods that programmers and graphic artists use to build and digitally represent color. Although the various methods may describe a color value differently, they are basically just providing a group of three or more numerical values that act as measurements of various criteria that go into building a representation of color. There are four types of units you may expect to see in these groupings:

• Percentage - values from 0 to 100%
• 8-bit - Values from 0 to 255
• Hex - Values from 00 to FF
• As in 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 11, 12, etc.
• Degrees - Values from 0 to 360º

Zero will always equal zero in any of the first three modes, but the "full" value values will be either 100%, 255, or FF. Those three are all equal values, written in different base units; in the same way that a measurement of 10 centimeters  is 100% of 3.93701 inches.

I'll get to degrees later in HSV/HSL.

Color Models

RGB

RGB Selector in ArcMap

The RGB triad stands for Red, Green, and Blue. Colors in this model are altered by adding or subtracting values in for any of the three primary color channels. As an "additive model," greater values result in brighter color instances, and lower values result in darker colors. This is based on a model of emitted light, where mixing red, green, and blue light produce the color white.

Users can adjust the sliders in this interface to control values of each of these channels between values of 0 and 255; where 0 = no value, and 255 = the full value of a given channel.

Alternatively, users can type a number they have in mind - this is particularly helpful when one wants to jump between increments of a values when searching for a color to use (e.g. changing the red value from 10, to 20, to 30, using the keyboard's number pad).

Color values are read as (#, #, #) or 

(Red value, Green value, Blue value). Since the RGB model is 24-bit (16.7 million possible color combinations), the values in each of the three channels will be some combination between 0 and 255.

As the example above illustrates, to build the color Red, tune the Red channel all the way up to 255, and leave Green and Blue channels at 0 since there should be no other color in Red but red. Done. Aside from various settings on your personal monitor, this is the standard, globally accepted, fullest possible value of Red.

Mixing two of the primary colors, Red, Green, or Blue produces
the "additive secondary" colors, Cyan, Magenta, and Yellow.
Mixing all three primary colors produces White.

The value (0, 0, 0) produces Black (the absence of light), and (255, 255, 255) produces White. Shades of gray are produced by matching all three values from (1, 1, 1) (darkest gray but not Black) to (254, 254. 254) (lightest gray but not White).

Back to our example of building the color Red, adding some value to the Green or Blue channels will yield some other color that may look reddish, but it isn't Red.

Additonally, the ArcMap interface gives you hints as to what other colors can be created from the current settings. With Red at 255, adjusting the Green channel will produces shades of red, through orange, and finally arriving at Yellow. Alternatively, adjusting the Blue channel will move through shades of reds and pinks and finally arrive at Magenta.

This is a good model to use to begin learning how to mix colors, but it's not my preferred model to use because it's tricky to imagine how to add a little red or remove a little green to target your preferred color.

CMYK

CMYK is a subtractive color model, used most often when printing is involved as an output medium. Pigments and inks absorb light (as opposed to how RGB works to emulate emitted light), so this model helps printers create the correct color with their ink print heads, as opposed to a computer monitor's LED pixels.

CMYK stands for Cyan-Magenta-Yellow-Key, where Key represents a black ink head. Black is used in printers as an efficient and controlled way to provide shadows, dark values, and black text to the printed material.

Just like mixing color with paint (where light is absorbed and the remaining wavelengths provide the observer perceived color), the CMYK model begins with the color white. Value is added to the channels, and lightness is removed. So zero values are White, and full values in all channels produce Black. Additionally, a full value in the Key channel also produces Black, regardless of the settings in the CMY channels.

Notice that the secondary colors in the RGB model produce Cyan, Magenta, and Yellow. Conversely, mixing two primary colors in the CMYK model will produce Red, Green, and Blue.

This is also not my favorite model to use to produce color, and it's generally just a pain in my ass when I'm printing large format maps.

HSV / HSL / HSVa / HSLa

HSV dialog in ArcMap

HSV selectors in Gimp, adjacent to RGB selectors
with the Hex code value, below

HSLa Selectors in Inkscape

These triads stand for Hue-Saturation-Value, and  Hue-Saturation-Lightness. The following "a" stands for Alpha, which is a metric of transparency. Sometimes this is included as a channel, sometimes it isn't. It's very important to recognize whether or not it's included. If you don't want to bother, make sure it is set to 100%, or 255, or FF.

This model is a bit tricky, so let's break it down.

Hue can be though of as the root color you're looking for on the color wheel: either a reddish, or a blueish, or a yellowish color, etc. The wheel starts at 0º, and continues through oranges, yellows, greens, blues etc, and eventually ends back at red at 360º; which also = 0º, but that's okay because both values are the same red.

A color wheel with 0° and 360° at the 12:00 position

Next, Saturation describes how muted gray (lack of color) or vibrant (fully colored) a color should be. This is usually a percentage, where 0 means no color is present and 100% represents the full colored potential of a color.

Examples of saturation gradients for several hues,
which correspond to the color wheel, above

! Note that the units can change between software packages. Inkscape uses 8-bit values (numbers 0-255) for each, HSLa channel. So a Hue value of 255 will correlate to 360° on the color wheel, and a 255 in the Saturation channel is equivalent to 100% saturation.

If you are building colors that are way off, you may need to check your units and convert when necessary.

Finally, Value and Lightness and are.. Also a bit tricky. Go ahead and read about the differences over on Wikipedia. Essentially, this component controls how light or dark a color will be.

Zero values in both HSV and HSL produce the color Black, regardless of Hue or Saturation settings.

The main difference between Value and Lightness is that the highest Value setting produces a fully saturated color (see the Saturation illustration above, and the ArcMap HSV selector below), and

the highest Lightness setting will produce a pure White color (see the Inkscape HSL selector below). A fully saturated color using HSL will have a Lightness value of 50% - or 128 (as Inkscape uses 8-bit values for each channel).

Hex

I didn't really touch on Hex, other than that it is another method of preserving a value of color. There's not much to it. It essentially is just a concatenation of the three or more channels in the fewest logical number of characters.

Short answer: Hexadecimal notation throws a couple of letters after the number 9 so each significant figure can be one of 16 possible values:

0 1 2 3 4 5 6 7 8  9  A  B  C  D  E  F

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Hex usually stands for RRGGBB, and sometimes for RRGGBBAA (for Alpha).

To find the Hex value of Red using the common six-digit RRGGBB method, first find the RGB value of Red:

  (255, 0, 0)

Then convert each value to its hex equivalent:

(FF, 00, 00)

Finally, remove the formatting, and stick the three values together:

FF0000
123456

For Inkscape and the few other examples of hex RGBa values, just throw another set of F's on the end. Here, we'll have a fully opaque value of Red:

FF0000FF

12345678

HTML & CSS

There are two ways to write hex color values in CSS and HTML.

There's the long way (again, using Red as an example):

#FF0000

And when all three RGB channels use doubled digits for their channel, you can use a 3-digit format:

#F00

Additional examples:

#112233 = #123

#00FF00 = #0F0

#333333 = #333

Further Reading

The physics of light are fascinating. I learned a lot about the subject in my various Remote Sensing courses in grad school, and in the practice of GIS and graphic design over the years. There are plenty of other great resources to use on these matters. Here are a few search terms to consider:

• Emitted vs. Reflected light
• Additive vs. Subtractive color
• Color models
• Primary color of light and pigment
• Light vs. Pigments
• Pigment vs. Dye
• Blackbody radiators
• Color theory