Storing Colors as Numbers

An Integer is a number without a fraction or decimal. In computer science they cannot be divided while leaving a remainder.

As with all digital information, the colors displayed on your screen are saved as numbers, typically integers. Some can be measured in other amounts or percentages, but that can be covered later. For now consider this;

  • Every color displayed on a screen is the combination of three basic colors; red, green, and blue.
  • These basic colors are the "channels" of the final color.
  • The "value" of the channels are stored as integers.
  • Each of these integers will range between 0 and 255.
  • A digital display combines these three integer values to produce a single color.

The circles below display a color and the integer values of their Red, Green, and Blue channels under them.

255,000,000
128,128,000
000,255,000
000,128,128
000,000,255
128,000,128

As you can see, when averaging colors, some can be darkened by virtue of the averaged color not reaching a maximum value. If we want a brighter yellow for instance, we need to increase the right values to their maximum possibility.

255,255,000

This circle displays the brightest possible yellow in an RGB space. It contains no blue, only red and green. The result of that mixture might not have been what you were expecting though, and to explain that, let's look at subtractive and additive colors.

Color Models

I should clarify that the idea of color space is not defined by the *result*. The phrase, similar to color model, describes the speed at which brightness changes and the dominance of various hues within the space. This is why the subtractive space uses Red, Yellow, and Blue, while additive can use Red, Green, and Blue.

The pages in this tutorial will all, unless noted, be discussing and using an additive RGB model. But to illustrate how malleable the idea of a color model is, let us look at the other major spaces.

RGB

The Red, Green, and Blue color model is probably the simplest to understand, and is the default model for measuring colors in most digital realms. The colored circles above, and their respective numerical values, is a good example of how this model works.

So if it is so simple and ubiquitous, why use any other model? RGB is a "linear" model. That means that it changes color values evenly. A Red channel with a value of 200 is exactly twice as much red as a value of 100. The problem is that the human eye does not see an equal difference between all the steps on a linear scale. Let's look at an example.

HSB / HSV

HSB is basically the same as the RGB model, it just has a different approach to representing the same colors. Hue, Saturation, and Brightness (or Value) are the channels now. It should be noted that some define HSV differently than HSB, but we shall consider them the same for now.

In this mode Saturation and Brightness are measured in percentages (between 0 to 100%) and Hue in 360 degrees. Why degrees? Further down this page you'll see examples of color wheels, which you've probably seen before, where the Hue changes based on the chosen wheel position. Degrees were simply adopted as the traditional form of measuring rotation. Brightness and value can be the

A subtractive mix of colors, but using CMYK. From left to right, a complete wheel, primary, secondary and tertiary.

CMYK

If there is any chance of you every printing an image you are working on, whether it's a simple desktop printer page or a professional printing press, you'll want to be processing your image in CMYK at some point. CMYK stands for Cyan, Magenta, Yellow and "Key". These are the four colors of ink that will be used in most any modern printing machine.

The first three colors are akin to the subtractive color model shown above, but what is "Key"? Basically this is the black channel of an image. Mixing Cyan, Magenta, and Yellow will give you a dark grey, but won't reach black, and therefore we need black as a fourth channel.

There is some debate as to the reason for the word "key", but the best explanation I've heard refers to screen printing, where each channel has a seperate printing screen or pass. Since black is the most prevelent tone in most images, the black screen came to be known as the "key" screen since the other three screens could be aligned to the printing press based on that first screen.

A color Gamut refers to colors possible in a printed image.

Should you be printing anything, make sure to also familiarize yourself with the concept of a color "Gamut". Since printing colors work in subtractive spaces they can not show colors the way an additive space like your computer screen can. A very bright and saturated color that your monitor is capable of printing will be forced down into something darker and less saturated when printed.

If you'd like to check an image for colors that might fall "out of gamut" in Photoshop, toggle on the "View > Gamut warning" option. Non-printable colors will appear in light grey.

Lab

Not an especially widely used model, Lab was designed to make up for the previously discussed problem of RGB being a linear space. In Lab we find fewer "duplicate colors" across the spectrum, so any given change should make the same amount of "perceptual" difference no matter what the starting hue or brightness.

Lab has had most success in photographic studios and professional publications where designers what to

The "L" in Lab stands for lightness, but the "a" and "b" don't stand for anything. They are akin to x and y coordinates on a graph.

Channels

Color Blending Modes

yeah... ....this is going to be re-written.



At some point in your life you've probably tried painting with traditional media and seen how they blended together. Watercolor or oils, maybe even certain kinds of soft crayons. When you blend these mediums together you'll often see two colors combine to make a third. The most obvious example of something like this is probably combining yellow and blue to get green, red and yellow to get orange, or red and blue to get purple. This kind of subtractive blending works because of the way the actual pigments combine on a molecular level. The light color absorbed by each paint combines to further limit the reflected spectrum.

Since digital colors are recorded as numbers there are no molecules to react together. So making a new color is no longer about subtracting different parts of the spectrum by combining paints, but about the way two numbers are combined. I use the word "combined" because there are many ways two numbers can be combined. Are they averaged? Weighted towards the lower or higher number? Is one channel disregarded below a threshold? The possiblities are near limitless.

The most common approach to fading an object in software is by changing the opacity of it. You'll see settings for opacity (or sometimes "alpha") in many places of a software package; in the tool settings, in a layer browser, perhaps special effect options. It nearly always means how much something ranges between transparent and opaque.

Now remember that most digital colors are stored as RGB values. There are three numbers, one for each channel, Red, Green, and Blue, with each number falling between 0 and 255.

There are two circles below, the first is solid red and has RGB values of 255, 0, and 0.

The green circle has RGB values of 0, 255, and 0. But we've also chanegd the opacity of it to 50% so that we can see through it. This has the effect of making it look like it has the values of 128, 255, and 128. The Middle color can't get any higher, so as the circle takes on the white of the background the red and green values increase.

So what do we see in the intersection? Where they overlap the RGV values are 128, 128 and 0.

Let's compare them next to one another. From red, to intersection, to transparent green.

255, 000, 000
128, 128, 000
128, 255, 128

You can see that as they move towards the green circle, red is lost and green is gained, along with a little blue.

The main thing to take away from this is that the circles did not add up to a shade of yellow, nor did they subtract towards black. In the intersection the brightness goes down and the saturation up.

Under contstruction....
Here we see a diagram showing hue values for various color. Notice how the "complimentary" colors have the widest difference in hue values.