How Do Computers Understand Color?

Understanding Hexadecimal Color isn’t easy. Mr. Machtay will explain it. But then the class will work on at least two assignments using Hexadecimal Color. It will be easier to understand after doing the hands-on projects.

RGB POWERPOINT

Mr. Machtay will present a PowerPoint about RGB Color (Red Green Blue) and about Hexadecimal (counting by 16). You need to be clear on these two concepts in order to understand color on computers.

COLOR TABLE

If you were in a painting class, your teacher would have you create Color Tables. You will create a Color Table for this class.

First you will fill out a table with 36 squares — each square will be filled in with a Hexadecimal Number for a Color. We will only use “Web-Safe” Colors. In “Web-Safe” there are only 6 settings for Red, 6 for Green, and 6 for Blue. Therefore, if you have one “Fixed Color” (for instance Red at 66) there are 36 different Web-Safe Colors you can create.

After filling out the form on paper, each student will work on Photoshop.

PHOTOSHOP COLOR TABLE

Create a new Photoshop file 300px by 300px. Use the ruler to set guidelines every 50 pixels. Make sure to show the grid that’s created by these guidelines. There should be 36 squares.

Begin at the upper left corner. Find the Hexadecimal Color for this square on the upper left of your hand-out. Enter the Hexadecimal Color in Photoshop and paint in the upper left square. Then continue to each square, careful to make sure you enter the correct Hexadecimal for that particular square.

Your completed Color Table will be saved as a GIF. If you did a really exceptional job, and you were very neat, it will save as a GIF with 36 colors.

HEXADECIMAL IN HTML

Each student will download a “web1″ folder from Mr. Machtay’s pickup folder. There are files inside you will need to work with this marking period.

Mr. Machtay will introduce the class to HTML Code with a simple page for each student to enter. Then students will have time to experiment with that page.

Then each student will open the page color.html in Dreamweaver (CC). Notice that the entire page is black and white. All the backgrounds are white, all the lettering is black. Look at the HTML Code. The Tags read: <td bgcolor=”#FFFFFF”> (the background color is white), and <font color=”#000000″>.

However, inside each cell there are words. For instance: “Red text on a Pink background.” Students will only be changing the Values for the Tags <font color=, and <td bgcolor=. In the case of the first cell students must change the Hexadecimal Colors so that the text is red and the background is pink. Follow suit for the rest of the cells.

In the final row of table cells, enter any color combinations that you like. Choose color combinations you may want to use on your own website.

Please don’t try to put a medium color over another medium color. Make it dark color on light or light color on dark.