1 / 35

HTML Colors

Insert a picture or background that is appropriate for this topic. 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. Psychology of Color.

satinka-herrera
Download Presentation

HTML Colors

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Insert a picture or background that is appropriate for this topic. 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.

  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. 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/. • GO TO this site. • 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. • Make the background BLACK just like the site. • If you need more slides… CTRL M.

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

  18. 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.

  19. 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.

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

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

  22. 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.

  23. 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.

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

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

  26. 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.

  27. 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.

  28. 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.

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

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

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

  32. THE END!!!!!

More Related