Web Safe Color Exercise


In this lessons, students will learn:

Screenshot of Color Swatch HEX code


  • Embedded Style Sheet
  • HTML document
  • #ids for grouping each swatch set
  • .class for swatch size and .class for each color


  1. Create a HTML document: LastName_FirstName-web-color.html
  2. Choose 3 images and download to create color swatches from.
  3. Use each image and create a custom color scheme/palette
  4. Swatches need to be side-by-side
  5. The background color of the page is #cc9966.
  6. Create a class selector with these declarations
    width 100px, height 50px and align the text center
  7. Place the name of the #hex color in each box

Upload the HTML file to Google Classroom > Web Colors.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.