Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture.

Similar presentations


Presentation on theme: "HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture."— Presentation transcript:

1 HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture or background that is appropriate for this topic.

2 Psychology of Color Color choice should always be evaluated carefully because different colors invoke similar reactions from most people. Keep in mind that these meanings are interpreted. They may not mean the same thing to you, your clients or the audience.

3 Red symbolizes power and summons feelings of excitement. Insert a picture here that illustrates this color and the feelings it invokes.

4 Orange represents creativity and instills confidence. Insert a picture here that illustrates this color and the feelings it invokes.

5 Yellow is generally portrayed as cheerful. It depicts optimism. Insert a picture here that illustrates this color and the feelings it invokes.

6 Green is peaceful and represents a harmonious sentiment. Insert a picture here that illustrates this color and the feelings it invokes.

7 Blue symbolizes honesty and conjures feelings of calmness. Insert a picture here that illustrates this color and the feelings it invokes.

8 Purple signifies beauty and invokes inspiration. Insert a picture here that illustrates this color and the feelings it invokes.

9 White implies innocence and suggests feelings of security. Insert a picture here that illustrates this color and the feelings it invokes.

10 Black represents elegance. It can signify strength. Insert a picture here that illustrates this color and the feelings it invokes.

11 Colors on the Web There are three options for specifying colors in HTML – color name, hexadecimal value, RGB value.

12 Color Name There are sixteen valid HTML color names that can be used on the web. They are case- insensitive.

13 AquaBlackBlueFuchsia GrayGreenLimeMaroon NavyOlivePurpleRed SilverTealWhiteyellow Fill in each box with the appropriate color. Make the table fill the page with prettyfullness.

14 Hexadecimal Value Hexadecimal values are six digits ranging from 0 to f preceded by a hash (#) symbol. The first two digits represent the color intensity of red. The second two digits set the intensity of green. The last two set the intensity of blue.

15 The hexadecimal value for red is #ff0000. The ff means that red is set to 100%. The 00 means that blue and green are set to 0%. If you wanted 100% green the value would be #00ff00. If you wanted 100% blue the value would be #0000ff.

16 For a complete list of hexadecimal values go to http://www.htmlcolorcodes.org/. http://www.htmlcolorcodes.org/ 1.GO TO this site. 2.Use Print Screen or the Snipping tool to copy/paste ALL the examples shown. It might take you several slides. There are 5 blank slides after this one. 3.Make the background BLACK just like the site. 4.If you need more slides… CTRL M.

17 EXAMPLE – make yours cropped and pretty and get all the colors.

18

19

20

21 RGB Color When you look at your computer monitor you’re looking at colors generated using red, green and blue light. This is called an additive color model because varying percentages of red, green and blue light create the variety of colors your monitor produces.

22 The key word here is light. 100% red light, 100% green light and 100% blue light added together will create white on your monitor. In order to create black you must turn the RGB light sources down to zero.

23 RGB Value RGB Values are represent the numeric value 0 through 255 for each of the colors red, green and blue.

24 Go to this site and copy/paste the chart that has the basic color values. http://www.w3schools.com/cssref/css_colors. asp http://www.w3schools.com/cssref/css_colors. asp DELETE the color HEX columns and only include the RGB.

25 Web-Safe Palette Not all computers or web browsers display the same amount or render the colors similarly. Therefore, the web-safe palette was invented. The web-safe palette of consists of 216 colors. The number 216 was chosen because computer operating systems customarily reserved up to twenty colors for their own use. The 216 web-safe colors and the 40 reserved colors total 256.

26 In the 1990s when the Internet was becoming popular, computers where only capable of displaying 256 colors. Today however, computers are capable displaying over 16 million colors. So, the only reason to use the web-safe color palette today is if you feel your website will be viewed from an older, 256 color computer system.

27 Find a picture of an OLD computer that might only be able to show 256 colors.

28 Color Tips A few things to keep in mind about using color on the web.

29 Don’t forget the hash (#) symbol when specifying hexadecimal colors or the color may not appear in all browsers. ADD a graphic or picture to illustrate the tip mentioned above.

30 Color should be used to enhance a message or design. Therefore, you should be careful not to use to many different colors. ADD a graphic or picture to illustrate the tip mentioned above.

31 Be careful when setting text and background colors. Readability should be the most important thing. ADD a graphic or picture to illustrate the tip mentioned above.

32 White and black always make a good combination. ADD a graphic or picture to illustrate the tip mentioned above.

33 Blue is the default color for hyperlinks. ADD a graphic or picture to illustrate the tip mentioned above.

34 Purple is the default color for visited hyperlinks. ADD a graphic or picture to illustrate the tip mentioned above.

35 THE END!!!!!


Download ppt "HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture."

Similar presentations


Ads by Google