1 / 16

Web Color Basics

Web Color Basics. Masters Project CS 490. 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. HTML Color Attributes.

mahdis
Download Presentation

Web Color Basics

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. Web Color Basics Masters Project CS 490

  2. 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. 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. • BASEFONT and FONT tags have COLOR = (value) attributes • The BODY tag has BGCOLOR, TEXT, LINK, VLINK, and ALINK color attributes

  4. Spot Color Examples: <P> <FONT COLOR =“red”>Stop</FONT> the presses. Throw <FONT COLOR = #FFFF00> caution </FONT> to the wind. <FONT COLOR = #00FF00>GO</FONT> FOR IT! </P>

  5. Body Tag Attributes • <BODY BGCOLOR= #FFFFFF> • <BODY TEXT= “blue”> • <BODY LINK=“red”> • <BODY VLINK=#00FF00> Visited Links • <BODY ALINK=#0000FF> Active (As you click) • <BODY BACKGROUND=“logo.gif”> (Image) • <BODY BGCOLOR=“white” TEXT=“blue” LINK= #FF00FF ALINK= #FFB5C5>

  6. 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. 1) Predefined Colors • 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

  8. Why Red, Green, & Blue? Color Models • Print Media Colors: • 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)

  9. RGB Color Model

  10. 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. Color Values # RED GREEN BLUE # 00 00 00 (least amt) # FF FF FF (most amt) Samples: #FF0000 #00FF00 #0000FF (Red)(Green)(Blue) #00FFFF #FFFF00 #FF00FF (Cyan)(Yellow) (Magenta)

  12. 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. Do you have 16.7 million choices for color? • 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.)

  14. Dithering

  15. Which 216 Colors? • 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. Final RemindersWhen Using Color • Avoid changing link colors because users are accustomed to the defaults. • Make sure the text is easy to read by creating enough contrast between the background color of the page and the text color. • Make sure that a background pattern does not interfere with the text. • Enjoy!

More Related