# 1. Color Representations

## 1.1. Objective

• To introduce the method in which we communicate about colors in computer programs.
• To review encoding.

## 1.2. Motivation

• Computing often requires the display of large tables of numbers as images. Before doing this, we need to understand how colors are represented in computer programs.

## 1.3. Review of Digitization and Encoding

Previously we looked at black and white images. The encoding rule was: a black square is represented by a 0 and white square is represented by a 1. Using this encoding rule, we could represent a black square next to a white square next to a black square by 010 in binary. Given the encoding rule, someone would know that when I say 010, I mean "a black square next to a white square next to a black square".

## 1.4. Review of Digitization and Encoding

How can we represent a blue square next to a green square next to a red square in binary? In the above example, we assigned the bit pattern 0 to black and 1 to white. If the color of each square is determined by a single bit, only two colors could be represented. To handle four colors, we could use the encoding rule 00=black, 10=red, 01=green, and 11=blue. To encode "a blue square next to a green square next to a red square" in binary, we would write 11 01 10 (spaces added for readability).

To represent more than four colors, we need to associate more than two bits per color. If we wanted to use 24 bits to represent a color, we could use the encoding rule

• red = 111111110000000000000000
• green = 000000001111111100000000,
• and blue = 000000000000000011111111.

and then the pattern

111111110000000000000000 000000001111111100000000

would be interpreted to mean a red square next to a green square.

## 1.5. Review of Digitization and Encoding

As with the ASCII table, instead of using binary numbers (e.g., A=1000000), we'll use decimal numbers (64) as short-hand.

• red=11111111 00000000 00000000 (spaces added for readability) = 255, 0, 0
• green=00000000 11111111 00000000 = 0, 255, 0
• and blue=00000000 00000000 11111111 = 0, 0, 255

(The 255 arises from the fact that it has a binary representation of 11111111.)

Then when we see 255, 0, 0, 0, 255, 0 we'll remember that on the computer it is represented by the bit pattern

11111111 00000000 00000000 00000000 11111111 00000000 (spaces added for readability).

## 1.6. Ways to describe mixtures

The above review on encoding was to emphasize that all numbers are represented as a binary pattern on a computer. From on now, we'll talk about colors as fraction and integers instead of bit patterns. This makes it easier to write and communicate colors; even though internally the computer uses bit patterns, it will be easier for us to use fractions and decimal integers while keeping in mind that internally these fractions and decimal integers are stored as bit patterns.

There are many ways to numerically represent a color. The two most common are:

 1. Percentages or fractions of each component (r,g,b). Red is 100% or 1.0 red 0% or 0.0 green 0% or 0.0 blue 2. Amount of light for each component to mix together (R,G,B). Red is 255 of Red 0 of Green 0 of Blue

## 1.7. Numerical representation 1.

Associate a number between 0.0 and 1.0 for each of red, green, and blue. This is what MATLAB uses.

To tell MATLAB to color something red, you tell it the color is [0,0,0].

To tell MATLAB to color something green, you tell it the color is [0,1,0].

To tell MATLAB to color something blue, you tell it the color is [0,0,1].

Other color representations that you need to know without reference:

White is [1,1,1], which means an equal mixture of red, green, and blue light.

Black is [0,0,0], which means a mixture of no red, no green, and no blue light.

Grey is [0.5,0.5,0.5]. As you decrease all three numbers, you'll get closer and closer to black.

## 1.8. Numerical representation 2.

MATLAB does not directly use this representation of color, but it is useful to know that it exists (you may have already used it if you have used Photoshop or HTML).

In the screenshot below of the program Inkscape (similar to functionality as Adobe Illustrator, but free), a selector is given where the user can select the color of a square by changing the amount of red, green, and blue light to mix together.

## 1.9. Relationship Between Representations

To convert between numerical representations, you either divide by 255 or multiply by 255.

To convert from RBG (representation 1) to rgb (representation 2), divide by 255. For example, R=128,G=10,B=12

• r = 128/255 = 0.502
• g = 10/255 = 0.392
• b = 12/255 = 0.0471

To convert from rgb to RGB, multiply by 255 and then round. For example, r=0.1,g=0.1,b=0.1

• R = 0.1*255 = 25.5
• G = 0.1*255 = 25.5
• B = 0.1*255 = 25.5

Because values of R, G, and B must be integer, we must round. The final answer is

• R = 26
• G = 26
• B = 26

# 2. Problems

## 2.1. Binary versus decimal

If the the color green is encoded on a computer as 00000000 11111111 00000000, why do we also say that green is 0, 255, 0?

## 2.2. Unique colors

How many unique bit patterns can be created with a list of 24 0s and 1s?.

## 2.3. Unique Colors

Suppose that you were told that a computer represented colors with 2 bits. How many unique colors could the computer display?

## 2.4. Unique Colors

Suppose that you were told that a computer represented colors with 8 bits. How many unique colors could the computer display?

## 2.5. Relationship Between Representations

Question 1:

• Convert R=12,G=102,B=102 (Numerical Representation 1.) to r,g,b values (Numerical Representation 2.)

Question 2:

• Convert r=0.5,g=0.5,b=0.5 (Numerical Representation 2.) to R,G,B values (Numerical Representation 1.)

## 2.6. Potential loss of resolution when converting between representations

Why will the r,g,b representation not always be exactly the same as the R,G,B representation?

## 2.7. Representation of Colors in Software

Find a software program that is used to manipulate images (other than Inkscape or MATLAB/Octave).

• How does the program's documentation describe colors? How do any of the things mentioned in the documentation relate to anything covered in this section?
• Create a screenshot like any of those shown in the slides for the Inkscape program. See Screenshots for instructions on how to do this.

## 2.8. Unique colors

In the Inkscape screenshot for RGB, there is a slider that allows the user to pick an integer between 0 and 255 for each of these three colors. The composite color is represented by these three integers (which could be used for an instruction such as "mix 25 red with 45 green and 200 of blue"). Said another way, each color is represented by a combination of three integers.

Suppose the slider only allowed the user to pick an integer between 0 and 7 for each of these three colors. How many unique colors could be represented?

## 2.9. Why 255?

In the image editing program Inkscape, the user is allowed to select a value of 0 through 255 for each of red, green, and blue. What is special about the number 255?

# 3. Appendix - Other ways to describe colors

## 3.1. RGB

There are many ways to describe colors (color basis):

• One of the most common is RGB (Red, Green, and Blue). In the image below sliders are used to control the amount of each color.
• Instead of showing binary numbers, decimal numbers are used to make them easier to read. (Note that instead of showing a binary number associated with the color mixture, there is a box that says "RGBA" which is a hexadecimal number; The "A" represents "alpha", which is a measure of opacity.)
• To create a color, a mixture of red, green, and blue light between 0 and 255 are used. The image below shows a screenshot of the program Inkscape. The rectangle was chosen to have a color of blue by setting the amount of red and green to be zero and the amount of blue to be 255.

## 3.2. CMYK

• Another color basis is CMYK (Cyan, Magenta, Yellow, and Black). A mixture of 0 to 255 of each color may be used to create a color mixture.

## 3.3. HSL

• HSL is Hue, Saturation, and Lightness.

## 3.5. Question

When you buy ink for a color printer, why don't you buy red, green, and blue?