web color basics

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:



Stop the presses.

Throw caution to the wind.

GO FOR IT!

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!

web color basics

Documents