Tumo Curriculum Activities

Color the World Wide Web

Posted on: July 21, 2009

  1. STEP 1: Mixing colors for PAINT & LIGHT
    • red-swatch RED, blue-swatch BLUE & yellos-swatch YELLOW
      are the classic primary colors. If you combine these colors with paint, they will make up every other color on the color spectrum.
    • red-swatch RED, blue-swatch BLUE & green-swatch GREEN
      are the primary colors of light. If you combine these colors in light rays, they will make up every other color on the color spectrum.
    • EXERCISE: Use the projector and the transparency color sheets to create new colors. Turn the projector on and shine it onto a white screen or wall. With the transparent sheets, overlap the red, green & blue sheets to make new colors on the wall.
    • Computer monitors work by displaying light on the screen. This is why RED, BLUE & GREEN are used to define all colors on the internet. Watch this movie to see more.
    • EXERCISE: Use a magnifying glass to see how every color on your screen is made up of a reflection of red, blue & green.
  2. STEP 2: Color on the World Wide Web
    • what-is-hexadecimal
    • hex-desc
    • hexadecimal-red
    • hexadecimal-green
    • hexadecimal-blue
    • The hexadecimal system is a way for computers to know what color to display on the internet.
      • EXTRA: The hexadecimal system is also used to define color when you code a website. (takes student to basic coding exercise where they can change the color of the background of a website, etc.)
    • Now let’s see how it works…
      • Color Blender is a website that provides color schemes (we will learn more about color schemes later in this lesson). For now, go to this website and notice all of the different suggested groupings of color.
      • Scroll down on the page so that you see all the groupings of colors:
      • color-blender
      • Click on the “Colorzilla” icon on the bottom left of your browser. It looks like this: colorzilla-icon
      • Use your mouse to hover over the color swatches on the screen
      • Notice the hexadecimal color changing on the bottom of the screen.
      • ColorZilla-2
      • This displays the hexadecimal number that represents each color, and next to it the RGB numbers that represent each color.
      • EXERCISE: Find your favorite shade of blue within these color swatches.
      • QUESTION: Write the hexadecimal number for that color here. ANSWER: [input field]
    • STEP 3: Color in Photoshop
      • Select the “Start Menu” in the bottom left corner of your monitor.
      • Hover over the tab that says “Programs”. This lists all the programs (or “applications”) that are installed on your computer at this time. A flyout menu of program options will appear.
      • Select the program called “Photoshop”
      • open-ps
      • The Photoshop logo will appear now, and you will need to wait for the program to finish loading.
      • Once the program has loaded, you will see a new tab at the bottom of your screen labeled “Adobe Photoshop”. This is how you can get back to the Photoshop program at anytime, if you navigate away from it.
      • Click on the color swatch in the Tools panel on the left
      • ps-color-swatch
      • The “Color Picker” will open. Here you can drag the color selector around to see the “Red”, “Blue” and “Green” values change, as well as the hexadecimal values.
      • EXERCISE: Drag the color selector to the color white. Notice here that the R, B, G values are all “255”.
        This is because the color white is the blending of all colors. Similarly, the R, B, G values for black are all “0” because black is the absence of all colors.
      • QUESTION: Type in the following hexadecimal number “ff9915”. What color is this? ANSWER: [a. Orange]; b. Blue; c. Pink; d. Grey
  3. STEP 4: Colors in an image
    • Colors appear in images all around you.  If you extract colors from an image you can create a color scheme that matches with that particular image.  Let’s do this now…
    • Login to the Kuler Website.
    • Click “Create” from the left hand menu
    • Click “From an Image” from the left hand menu:
    • kuler-fromanimage
    • Upload this image of Yosemite National Park to Kuler:
    • mountains
    • Drag the color selectors around on the image. Notice how the colors from the picture combine together to make a new color scheme below. Notice how the hexadecimal and RGB color numbers change below the color swatches. This is how you can find color schemes in nature.
  4. STEP 5: Emotion from Colors
    • Colors are seen everywhere in the world and people have become so used to colors that they relate certain colors to certain emotions. There is a color language. If you look at the world through this point of view, you will begin to see the meaning attached with color. Most colors seem to have strong associations, for example yellow represents optimism, happiness and cheerfulness; where blue represents calm, peacefulness and dependability.
    • Read more about the meaning of color.
    • EXERCISE: Create a color scheme that represents “Autumn”. What colors are usually associated with this season? Choose the colors from either a picture or from your memory and emotion when you think about Autumn.

2 Responses to "Color the World Wide Web"

Step 1:

– Change title to: “Color in Paint & Light”+++++++++++++
– add more images, the panel looks boring (maybe tomorrow)

Step 2:

– change second pix, hard to read right now
– change Color blender screenshot image – hard to see

Step 4:
– add images or video screen shots of the hexadecimal number changing on the Kuler website.
– have user save their new new color scheme (possibly have user extract the color swatch file and import it into Photoshop??)

Step 5:
– Change totle to: “Color and Emotion”++++++++++++
– add more images, the panel looks boring

Step 1:

-… When you’re “painting”

Step 2:

-… (takes student to basic…)

-… “We will learn about color schemes…”

-… No colorzilla bar / icon

Step 4:

-… Show how to upload

(what if the kid doesn’t have any pics > flickr)

-…”Notice how the hexadecimal and RGB color numbers
change below the color swatches…” WHAT? WHERE?

Step 5:

-… Add pics and/or re-space text.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: