XHTML: Colors
From Academic Computing
Contents |
[edit] Purpose
This workshop serves as a reference for using colors on the web.
[edit] Prerequisites
Students wishing to participate in this workshop must be familiar with basic hypertext markup (HTML or XHTML). Students wishing to save any work created in class should bring a formatted floppy disk.
[edit] What do I need to know about colors?
The web is the graphical portion of the Internet, and that means colors are involved. If you want to create a basic web page, with basic colors, then you can use standard color names. "White", "Black", "Red", "Blue", and a couple dozen others are all accepted by the popular graphical browsers. But what if you want the color of a ripe orange under a warm, Florida sun as the background for your web page. To access the sixteen million colors a computer can handle, you've got to use a hexadecimal code. If you really want to ensure that your site looks the same under different browsers and different operating systems (Windows or Mac), then you will limit yourself to the 216 browser-safe colors. The browser-safe colors are part of the 16.7 million.
[edit] Hexadecimal Codes
Hexadecimal codes are 6-character alphanumeric (letters and numbers) codes that represent each of the 16.7 million colors a computer with a super vga monitor and video card/driver can render. Each of the six characters in a hex code can range from 0-9, or A-F. This means a hex code could be: 000000, FFFFFF, 1122BB, 3C3C3C, and on and on sixteen million times.
The first two characters in a hex code represent red, the middle two represent green, and the last two represent blue. Based on the two graphics above, can you figure out what color 000000 would represent? Black. How about FFFFFF? White. What about 00FF00? Yeah, it's green. But, is it bright green or dark green? Bright green. If you want dark green then you just move left on the scale. 006600 would be dark green. 003300 is a very dark green. Get the idea?
[edit] Color Combinations
A hex code is made up of six different alphanumeric characters that represent red, green, and blue. You can produce 256 shades (255 plus black) of green: 000000, 000100, 000200,…,00FD00, 00FE00, 00FF00. By the same token, you can produce 256 shades of red and 256 shades of blue. Once you start mixing these colors up, you can access the 16.7 million colors. A little math: 256 X 256 X 256 = 16,777,216.
To get 256 shades for each of the three colors (red, green, and blue), black (000000) is included. There are really only 255 variations of a particular shade.
[edit] Hex Code Converted to Decimal
Hex codes are a short way for us to represent a colors range of intensity on a scale of 0 to 255. Most Image editors use the decimal form to represent colors, some newer ones show the decimal and the hexidecimal. You don't need to know a color's decimal to use colors in a web site, but what does a little extra knowledge hurt?
0 1 2 3 4 5 6 7 8 9 A B C D E F ---------------------------------------------------- 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 What's the decimal for B5? B=11 and 5=5 11 * 16 = 176 176 + 5 = 181 B5=181 What's the decimal for ED? E=14 and D=13 14 * 16 = 224 224 + 13 = 237 ED=237
[edit] Browser-Safe Colors
Although there are millions of colors, some monitors can only display 256 colors. Now, the portion of computer users with 256-color monitors is dwindling, but why not pick colors that everybody can use. If a 256-color monitor tries to display a color that is out of its range, the color will be dithered—speckeled. OK, you've gone from 16 million to 256. It gets worse.
40 of the 256 core colors look different on Macs and PCs. Get rid of those 40 and you have 216 browser-safe colors. If you use colors in this limited palette, you can feel confident that your web page colors look the same on different computer on different platforms.
The 216 are spread throughout the range of hex codes, but only use the alphanumeric characters: 0, 3, 6, 9, C, and F. Each of the three colors (red, green, and blue) in the hex code can only have, 00, 33, 66, 99, CC, or FF. 003900 is not a browser-safe color, but 003300 or 009900 are browser-safe.
If you can find colors you like in the 216 browser-safe palette, then great…use them. However, if there is a color for your site that is not in the range, don't feel bad. The person's computer isn't going to crash, the color will just look a little off. Check out the color references at the end of this handout for links to sites that offer charts of the 216 browser-safe colors.
[edit] Color Keywords
Instead of using hexadecimal codes, you can use some color names. "White", "Black", "Red", "Blue", and a couple dozen other color names will work. If you want a basic color, then give them a try. However, to access the millions of colors available, you need to use hex codes.
[edit] Setting Web Page Colors
If you've read the above section you know how to hex codes and decimals represent the millions of colors, but how do you put them in a web page? There are a few ways, but the hex code method is the most universal. Very important though, when you enter a hex code into some hypertext markup (HTML or XHTML) put a pound (#) sign in front of it.
To control page, text, and link colors, put the following attributes in the <body> tag on your web page:
<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#000066">
bgcolor="#hexcode" The background color property sets the background color for the web page.
text="#hexcode" Sets the font color for the page. Make sure that you use a contrasting color here compared to the background color for easy reading. Light background – dark font, dark background – light font.
link="#hexcode" alink="#hexcode" vlink="#hexcode" Set the link color, active link color, and the visited link color for the web page. A slightly different visited link color from a link color lets visitors know that they have already clicked on a link once before. Active link is the color of the hyperlink in the split second when someone clicks on it.
[edit] Setting Web Page Colors with CSS
There is another handout that goes into using cascading style sheets (css), and you can find it at http://www.acomp.usf.edu/ACStudent/workshops/webdesign.html. CSS offers a much more effeicient way to control web page colors than the method of putting attributes in the <body> tag.
Shorthand Hex Code (CSS only)
#006 is equivalent to #000066 (dark blue)
Normal Hex Code (CSS and HTML)
#000066 is dark blue
RGB code (CSS only)
rgb(255,255,255) is equivalent to #ffffff (white)
RGB Percentage (CSS only)
rgb(100%,0%,100%) is equivalent to #ff00ff (purple)
Keyword (CSS and HTML)
"white" is equivalent to #ffffff or 255,255,255
