Graphics: Calculating Color

Student Resource:
Additive and Subtractive Color and Hexadecimal Coding

 Challenging the Way You Think about Color 
Back in Kindergarten you learned that there are three primary colors (red, blue, yellow), and three secondary colors that can be mixed from the primaries. Do you remember what they are?  If you’ve done any coding or web design you may have noticed that video graphics uses red and blue, but instead of yellow, they use green (RGB).

If you’ve ever replaced the printer cartridges in a color printer you may have noticed that primary colors are magenta, cyan, yellow, and black (CMYK).  What’s going on here?  Which set of colors is the right set?  It turns out that all of them have a purpose.  Artists used Red/Yellow/Blue for centuries to capture the colors in nature.  More recently in professional printing they were replaced by CMYK that gives a more accurate color match with modern printing equipment.  RGB is used to produce colors on video screens ranging from mobile phones to huge high definition televisions.  

In this lesson you will see that computer graphics uses RGB when color is displayed on a screen, and it uses CMYK when color is printed on a surface such as paper. Some definitions will help.

 Additive Color 
RGB produces additive color. A video screen has millions of little points of light called pixels.  Each pixel can be lit with a combination of red, green, and blue light. You add color and brightness to produce a color. To light those pixels faster than the eye can see, every pixel’s information is stored in the computer’s memory. The code that fills the screen with color runs through that memory grabbing one color at a time.  

 Representing Color in Hexadecimal 
Modern computers including smart phones such as iPhones, have 64-bit memory. Imagine a row of 64 ones and zeros to keep track of one color. Those 64 bits each hold a binary number (a 1 or 0).  Because human brains have trouble with binary numbers, RGB color is represented in Base 16.  Using logic, the computer can quickly take this number and convert it into red, green, or blue, parts.  This will make more sense in as you do the activities in this lesson.

 Subtractive Color 
CYMK color is used when you mix pigments together on a surface, such as paper.  You will have an opportunity to experience this as well.  The color you apply to the surface absorbs some of the color and only reflects back the color you see.  It subtracts out the color that you don’t see.  This too, will make more sense as you do the activities.

      Graphics: Calculating Color

Student Worksheet 1: Matching Natural Colors

 Find the color of your found object color
With the team your teacher assigned you to, go to this website:
•	http://www.rapidtables.com/web/color/RGB_Color.htm

If you didn’t bring in a found object, ask your teacher to lend you one. Using the color picker that looks like this, move the cursor until you can match the color of your object pretty closely.  (This is the color we identified for a slide of mango.)  Write down your found object, and its RGB and hexadecimal numbers.  Help your entire team complete this task.

	OBJECT: 

_______________

RED: __________

GREEN: _______

BLUE: _________

# (hexadecimal)

_______________	

 Creating Additive Color with Light
Your teacher will give you a flashlight, red, green, and blue colored gels, and rubber bands. Cover each flashlight with a gel and fasten it in place with a rubber band.

Shine the flashlights on a white surface and try to match your found object color.  The RGB numbers should give you a hint on how to combine the colors.  High numbers mean that particular color light is bright.  Low colors mean it is dim or isn’t included.  Our mango has very bright red and green but very dim blue.  To achieve this with the flashlights, the red and green flashlights should be very close to the wall to create a bright color, and the blue flashlight should be further back. Describe here what you had to do to produce your color, or something close to it. How did you combine the light from your flashlights?

      Graphics: Calculating Color

Student Worksheet 2: Colors in Hexadecimal

 Calculating a # (hexadecimal) number.
We count to 10 because we (most of us) have 10 digits (fingers) on our two hands. In computers it is more convenient to count in hexadecimal or Base 16.  Imagine if you had eight fingers on each hand. To count in hexadecimal, we need more than 10 digits. We need a total of 16. Being human, we use the western alphabet to add digits. Compare the quantities represented in decimal and hexadecimal:

0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	
0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	
																

We can count higher than 9 in decimal. We can count higher than 15 in hexadecimal.  

Think about this:  In decimal:
The number 13 means 10 + 3, or 1 X 10 + 3.
The number 25 means 20 + 5, or 2 X 10 + 5.

This works in hexadecimal:
FA  means F X 16 + A.
CA means C X 16 + A.
0B means 0 X 16 + B.

The mango color was #FACA0B. In decimal it is 16435723.  We won’t worry about how to convert it. You can Google ‘hex to decimal’ to do the conversion. The computer does a logic trick to split this number into red, green, and blue parts. Again, we won’t worry about how to do this in decimal, but if you are curious, you can find it on the Internet.

FA = (F X 16) + A = (15 X 16) + 10 = 240 + 10 = 250 in decimal. 
CA = (C X 16) + A = (12 X 16) + 10 = 192 + 10 = 202 in decimal.
0B = (0 X 16) + B = ( 0 X 16) + 11 =   0 + 11 =  11 in decimal.

Calculate your RGB values from your hexadecimal number on the back of the page. 
As group use a blank piece of paper to report the following:
1.	List the hexadecimal numbers for everyone in your group. Put them in order of smallest to largest. For example #3F4251 is smaller than #FACA0B.
2.	What colors are stored as small numbers such as #00FFAA? Why?
3.	What colors are stored as large numbers such as #FFAACC? Why?
4.	What colors are stored as numbers in the middle and why?

      Graphics: Calculating Color

Student Worksheet 1: Subtractive Color

With the team assigned by your teacher, go to this website:
•	http://www.rapidtables.com/web/color/RGB_Color.htm

Using your found object’s RGB colors, use the RGB to CMYK converter to determine the percentages of Cyan, Magenta, Yellow and Black paint you will need to create a 4 X 4 inch (10 X 10 cm) color swatch of your color.

For example, here is the result of our mango color:

	Rounding out the amounts we need:

0 parts Cyan
2 parts Magenta (rounding 1.9 up)
10 parts Yellow (rounding up again)
Just a pinch of black. (1/10 of a part).	

Calculate your parts here:

_____ Cyan   _____ Magenta  ______ Yellow  ______ Black

Use the Popsicle sticks to estimate a measure of paint. (Your teacher will demonstrate this.)  Drop the estimated parts of paint onto your art paper; taking care not to mix the paint colors in the bowls or on the Popsicle sticks.  If the sticks do get contaminated, get more.   

When you have the correct amount of each paint color, mix them together in a 4”X4” inch area of your art paper and compare with your found object color.  Is it a match?  If not, what color(s) do you have to add in to get it right?  Need to start over? Take another space on your paper or ask for another sheet.

Write your found object, the hexadecimal number on your page, and the CMYK parts on the page, and add it to your class color wheel.