Tumo Curriculum Activities

Color the World

Posted on: July 15, 2009

In this lesson, we are going to explore color theory and make your own color theme.

  1. STEP 1: All the Colors of the World
    • what-is-color-wheel
    • color-wheel-desc
    • All colors of the world are found in the color wheel. There are THREE colors that can be used to make up any color in the world – red, blue & yellow. These are called the PRIMARY COLORS.
    • primary
  2. STEP 2: What is a color scheme?
    • what-is-color-scheme
    • color-scheme-desc
    • primary
    • Slide2
    • Slide3
    • analogous-colors
    • complimentary-colors
    • Slide6
    • Slide7
    • Slide8
    • Slide9
    • QUESTION: What is the name of the color scheme that is consists of one base color and white tints and black shades of that same color?
    • ANSWER: a. Complimentary Color Scheme; b. Primary Color Scheme; [c. Monochromatic Color Scheme]; d. Analogous Color Scheme
  3. STEP 3:  Find other color schemes
    • Kuler is a website that provides color schemes.  Go to this website and click on some of the color schemes listed in the middle of the page.
    • kuler-list
    • NOTE:  “Color theme” is another way of saying “color scheme”.
    • Click on some of the color schemes and you’ll see comments associated with it and the user name of the person who made it.
    • EXERCISE:  Find one color theme with many comments.  Read the comments.  View all the color schemes from this user by clicking on the user’s name:  kuler-view-all-color-themes
      • QUESTION:  Find a comment that you think is funny.  ANSWER:  Copy/paste it here.  [input textbox]
  4. STEP 4: Create your own color scheme
    • Kuler allows you to create your own color theme.  Let’s do this now.  Click the “Register” link at the top right.
      • kuler-register
      • This will take you to the Adobe Website to register
      • adobe-register
      • Fill in each of the required fields with a red star.  Uncheck the boxes near the bottom of the form that state “Email”, “Mail”, “Phone”.  And hit “Continue”.
      • Once you’ve received your Adobe password, go back to the Kuler website and sign in (in the upper right hand corner)
      • Agree to the terms of service
      • click “Create” in the left hand menu
      • kuler-create-screen
      • Select “From a Color” on the left hand menu
      • Notice the Different types of color schemes you can choose from
      • kuler-color-schemes
      • Change the color themes.  Spin the color wheel.  Change the base color. Remove and add a color.
      • When you’ve found a color combination that you like, name it in the upper right corner and hit “Save”
      • kuler-my-color-theme
      • Navigate back to the homepage and select “Newest Colors” from the left menu
      • Notice that your color scheme is now available to the public!
      • kuler-my-color-theme-public
      • QUESTION:  Copy/Paste the public URL of your new color scheme here.  ANSWER:  [text input i.e. http://kuler.adobe.com/#themes/newest?time=30%5D

Congratulations!  You’ve learned about color theory and made your own color scheme.

  • EXTRA:  For more on Color Theory, explore the following website:
    • Color Theory Lesson:  A thorough description of color theory from Opera’s Web Standards curriculum.
    • Kuler: Adobe Labs has released an incredibly useful and well designed color palette creator that beats the rest.
    • Contrast checker: evalute contrast between type and background
    • Color Scheme Generator 2: My favorite color scheme generation tool for its control and variety of system generation.
    • Color Blender: A good, simple color utility, which exports to Illustrator and Photoshop
    • Colour Lovers: Color palette generation in a social setting
    • Color Palette Creator: Give it a base color, it will give you a color palette
    • The Man in Blue: Technicolor: Palette shown in context of a CSS layout
    • 4096Color Wheel: A different approach to a color wheel
    • Colr.org: Generate color systems from a photo or randomly
    • Color Mixers: A staple in color generation systems
    • Color Meaning:  See what emotions colors naturally bring out in human nature
    • ColorZilla:  Recommended Firefox Color Picker Add-on
Advertisements

3 Responses to "Color the World"

This is a solid resource you’ve put together here. Great work!

-steps 1 and 2: Make font in color wheel stills bigger

-step 1: It is a circle that shows…

-step 2: Change the monochramatic color scheme display

-steps 3 and 4: screenshots that need to be read in detail need to be
written in a bigger font.

-step 4: Needs to be broken down more: one image for each operation

screenshots that need to be read in detail need to be
written in a bigger font.

missing a screenshot for Create an Adobe Account

-step 5: Have less suggestions. Add a picture after each one.
Simplify terminology, i.e.:

Recommended Firefox Color Picker Add-on >
Tool for collecting colors from web sites.

Image size: 290px width; 72 dpi. *Remember to convert all JING images from 96dpi to 72dpi*

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: