Web Color


In this lessons, students will learn:

Color Wheel
Color Combinations
Color Blender

To select more than one layer
Hold Shift and select desired layers in Layers Panel.

Web Color Exercise


  • Embedded Style Sheet
  • HTML document (web-color.html)


  1. Create a HTML document called “last name_first name-web-color.html”
  2. Create a page that looks similar to the example provided above.w3sch-color-picker
  3. With the use of HTML Color Picker to choose the colors,
    create color swatches/blocks of two – six that represent the color type.
  4. Name each swatch with the color type and #hex code.
    1. Primary Colors: Red, yellow and blue
    2. Secondary Colors: Green, orange and purple
    3. Tertiary Colors: Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green
    4. Monochromatic colors (tints, tones, and shades of a single hue)
    5. Complementary color (red and green)
    6. Analogous colors (colors that are next to each other on the color wheel)
  5. The background color of the page is #ccffff.
  6. Create a div selector with these declarations
    width 200px, height 50px and align the text center
  7. Place the name of the #hex color in each box.

Upload the file at the end of period to the Google Classroom > Web_Color.

DUE on Thursday November 10, 2016.