web color basics
Post on 06-Jan-2016
32 Views
Preview:
DESCRIPTION
TRANSCRIPT
Kevin Murphy
Web Color Basics
Masters Project CS 490
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.
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.
BASEFONT and FONT tags have COLOR = (value) attributes
The BODY tag has BGCOLOR, TEXT, LINK, VLINK, and ALINK color attributes
Kevin Murphy
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>
Kevin Murphy
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>
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
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?
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)
Color Models
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 x 256 = 16.7 million colors possible
Kevin Murphy
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)
Kevin Murphy
Choosing ColorsHow 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?
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?
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 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!
top related