One of the greatest American painters, Georgia O’Keeffe, once said, “I found I could say things with color and shapes that I couldn’t say any other way – things I had no words for.” These days, we never question the value of color in a web page, in a canvas drawing, or in a children’s book because we expect it. During Web Design I, you learned how to use basic color names and some of the more complicated hex values. In this lesson, you’ll learn to expand your knowledge of color, including some work with RGB values.

Below are some helpful tips and resources that you can use during and after this lesson is over.

Important Points to Remember

• Colors in HTML can be written in three ways: Color Names, Hex Values, and RGB Values.
• There are only 140 Color Names that can be used and understood by all the major browsers (such as Blue, DarkBlue, Cyan, Brown, etc).
• HTML color values are based on a combination/blend of Red, Green, and Blue.
• Hex Values are written with a hash (#) and six characters ranging from 0 through F (#FF0000, #00FF00, #0000FF, etc).
• RGB values are written like rgb(0, 100, 255) where the numbers represent how much red, how much green, and how much blue should be added (between 0 and 255).
• The Color Wheel allows web designers to find primary, secondary, tertiary, complimentary, shades, and analogous colors.
• For all future web pages and designs, you may NO LONGER USE HailPixel since the colors you find there are purely random and this class will only accept color combinations based off the color wheel.
• Inline styling means going into the tag, adding the style attribute, then inserting a series of styles like this with a very specific syntax.

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called HTML Fundamentals. Inside of this course, watch the following lessons (you may need your headphones). When you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many slides you complete and how many questions you answer correctly after each slide segment.

21. HTML Colors
22. Frames
23. Blog Project: Putting It All Together
24. Module 2 Quiz
25. Challenge 1

Assignment #2 (1 Point): Design Project
Open TWO new documents with Notepad or Notepad++ and save them as “5-6_hextable.html” and “5-6_rgbtable.html” in your WD2 Folder. If you watched the SoloLearn slides carefully and read the resources from the overview, you learned that there are three ways to write colors into a page: color names, hex values, and RGB values.

On the “5-6_hextable.html” page, you must design a table with five boxes that each have a different shade of RED written with hex values. Inside of your tables, the page must show what hex value is being used like this. On the “5-6_rgbtable.html” page, you must design the exact same table with the exact same shades of RED, but instead of hex values, you must write your colors with RGB values and include those values on the page like this.

Below are some resources that can help to get you started, but don’t forget about all the elements and attributes you learned how to use in Lessons 5.1, 5.2, 5.3, 5.4, and 5.5:

1. Understanding the Color Wheel
2. Understanding Complementary Colors
3. Color and Contrast
4. Complementary, Analogous, and Triad Colors
5. The Paletton Color Wheel
6. Adobe Color Wheel
7. How to write Hex Values (Color-Hex Website)
8. RGB Color Chart
9. Using inline styling with Color Names and Values
10. PaletteFX: Getting Color from an Image on your Computer
11. CSS Drive: Getting Color from an Online Image URL
12. Pictaculous: Getting Color from an Image

Assignment #3 (1 Point): Florida Orange Palette
The word “palette” means a selection of colors. In this assignment, you will be creating a palette of orange shades, but you get to make up color names like this. Open a new document with Notepad or Notepad++ and save it as “5-6_orangepalette.html” in your WD2 folder. You may copy/paste the code from one of your 5.6 table pages and just use orange colors instead of red. Feel free to be silly about the color names that you make up for your table.

Assignment #4 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new designs (all three of them) to your index page using screenshots and links.

Assignment #5 (1 Point): Review and Quiz
Look over the 5.6 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 5.6, and take it. This is a way for you to show the teacher that you have finished this lesson.

If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 5.7. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.