Color Representations
From ComputingForScientists
Contents 
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 shorthand.
 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

2. Amount of light for each component to mix together (R,G,B). Red is

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.
Note 

If you expected [1,1,1] to be near black, then you are probably thinking about what happens when you mix paint. Here you should think about what happens when you mix light and not ink or paint [1]; the difference has to do with "additive" versus "subtractive" mixing of colors. The mixing of light is "additive". 
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
?
Answer 

It is easier for humans to read and write 
2.2. Unique colors
How many unique bit patterns can be created with a list of 24 0s and 1s?.
Answer 

Answer: 2^{24}. If you read that a computer monitor has a "color bit depth" of 24, this means that 2^{24}=16777216 unique colors (each with an associated pattern of 24 0s and 1s) can be displayed on the screen. 
Note 

16,777,216 is more colors than the human eye can distinguish [2]. Modern computers have a color bit depth of 32, which corresponds to 2^{32}=4,294,967,296 (over four billion) colors that can be displayed. This is quite a bit more than the human eye can detect. Although 24 bits is generally "good enough" for humans, what really happens is 24 bits are used for color (about 16 million colors) and the other 8 bits are used for 256 levels of opacity of each color ("alpha") [3]. There are various technical motivations for this. 
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.) tor,g,b
values (Numerical Representation 2.)
Question 2:
 Convert
r=0.5,g=0.5,b=0.5
(Numerical Representation 2.) toR,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?
Answer 

To convert from rgb to RGB, multiply by 255 and then round. For example,
Because values of R, G, and B must be integer, we must round. The final answer is
Because we have to round the numbers, we can't represent r,g,b = 0.1,0.1,0.1 exactly as an R,G,B value. The R,G,B value of 26,26,26 will be fairly close, but if you were asked to convert 26,26,26 back to r,g,b, you would get 0.10196, 0.10196, 0.10196. 
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?
Answer 

Earlier it was mentioned that on a computer we may associate a color with a bit pattern. The color red was With 256 options for the amount of red, green, and blue, we get 256x256x256 = 2^24 possible colors = about 16 million colors. So the answer to the question of what is special about the number 255 is that it corresponds to the bit pattern 
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.4. Color wheel
3.5. Question
When you buy ink for a color printer, why don't you buy red, green, and blue?
Answer: [4]