1. Kevin Murphy Web Color Basics Masters Project CS 490

2. Kevin Murphy Advantages of Using Color Color can give a more polished and professional look to a Web site. Colors can evoke certain feelings and moods in people browsing the site.

3. Kevin Murphy HTML Color Attributes There are attributes to HTML tags that can change the colors used on the Web page itself: including adding spot color to text, changing the background color and the color of links. n BASEFONT and FONT tags have COLOR = (value) attributes n The BODY tag has BGCOLOR, TEXT, LINK, VLINK, and ALINK color attributes

4. Kevin Murphy Spot Color Examples: Stop the presses. Throw caution to the wind. GO FOR IT!

5. Kevin Murphy Body Tag Attributes n n Visited Links n Active (As you click) n (Image) n

6. Kevin Murphy Specifying Colors As shown in the examples, there are two ways of specifying color values for the HTML attributes: 1)Specify in “ “ one of the predefined color names recognized by popular browsers. 2)Specify the color by its hexadecimal number for red, green, and blue components.

7. Kevin Murphy 1) Predefined Colors n There are 16 Windows palette colors that can be specified by their names: WhiteCyanSilverNavy RedMagentaGrayLime GreenYellowMaroonOlive Blue BlackPurpleTeal

8. Kevin Murphy Why Red, Green, & Blue? n Print Media Colors: - CMYK—Cyan, Magenta, Yellow, Black - (Mix these colors together for ink colors) n Display Media Colors: - RGB—Red, Green, Blue - (Mix these colors together for the colors of light) Color Models

9. Kevin Murphy RGB Color Model

10. Kevin Murphy 2) Hexadecimal Values Color codes in HTML are specified by the # sign followed by six digits that consist of three hexadecimal numbers (two each for the amount of red, green, and blue in the color). There are 16 x 16 = 256 different amounts of each color that can be selected. 256 x 256 x 256 = 16.7 million colors possible

11. Kevin Murphy Color Values #REDGREENBLUE # 00 00 00(least amt) # FF FF FF (most amt) Samples: #FF0000#00FF00#0000FF (Red) (Green) (Blue) #00FFFF#FFFF00#FF00FF (Cyan) (Yellow)(Magenta)

12. Kevin Murphy Choosing Colors How do you know what the hex codes are for the colors you want to use? 1)Consult a chart of common colors. 2)Choose the color desired and convert the RGB values to hexadecimal. - Image editors, such as Adobe Photoshop, will show the R, G, and B values from 0 to 255. - Convert these values to their hex equivalent using a scientific calculator, chart or shareware. (www.lne.com/rgb.htm)

13. Kevin Murphy Do you have 16.7 million choices for color? n TECHNICALLY YES! n In reality, it is recommended by Netscape Tech Support that you use colors from a 216-color palette for best results. (Some browsers will dither colors that do not follow this palette.)

14. Kevin Murphy Dithering

15. Kevin Murphy Which 216 Colors? n Colors that use any of the following for red, green, and blue values are recommended by Netscape: 00,33,66,99,CC,FF Photoshop Values = 0, 51, 102, 153, 204, 255 Is this a rule? No—Many lists of common colors do not follow this formula. However, it is recommended that you check your colors in various browsers.

16. Kevin Murphy Final Reminders When Using Color n Avoid changing link colors because users are accustomed to the defaults. n Make sure the text is easy to read by creating enough contrast between the background color of the page and the text color. n Make sure that a background pattern does not interfere with the text. n Enjoy!