Web Color Basics Masters Project CS 490 Kevin

Web Color Basics Masters Project CS 490 Kevin Murphy

Advantages of Using 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. Kevin Murphy

HTML Color Attributes There 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 Kevin Murphy

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

Body Tag Attributes n <BODY BGCOLOR= #FFFFFF> n <BODY TEXT= “blue”> n <BODY LINK=“red”> n <BODY VLINK=#00 FF 00> Visited Links n <BODY ALINK=#0000 FF> Active (As you click) n <BODY BACKGROUND=“logo. gif”> (Image) n <BODY BGCOLOR=“white” TEXT=“blue” LINK= #FF 00 FF ALINK= #FFB 5 C 5> 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. Kevin Murphy

1) Predefined Colors n There are 16 Windows palette colors that can be specified by their names: White Cyan Silver Navy Red Magenta Gray Lime Green Yellow Maroon Olive Blue Black Purple Teal Kevin Murphy

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

RGB Color Model 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 = 16. 7 million colors possible Kevin Murphy

Color Values # RED # 00 # FF GREEN 00 FF BLUE 00 (least amt) FF (most amt) Samples: #FF 0000 (Red) #00 FF 00 (Green) #0000 FF (Blue) #00 FFFF (Cyan) #FFFF 00 (Yellow) #FF 00 FF (Magenta) 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) Kevin Murphy

Do you have 16. 7 million choices for color? n n TECHNICALLY YES! 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. ) Kevin Murphy

Dithering 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. Kevin Murphy

Final Reminders When Using Color 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! n Kevin Murphy