Hexadecimal Colors
To specify colors on the Web you must
enter the pound sign # followed by the 6 character hexadecimal
code. Here are some examples:
#000000 |
|
#00CC00 |
|
#CC0000 |
|
#FFFFFF |
|
#FF9900 |
|
#CC0099 |
|
#0000CC |
|
#FFCC00 |
|
#990000 |
|
#FF0000 |
|
#FF6633 |
|
#00FFFF |
|
#FFFF00 |
|
#666666 |
|
#99CC00 |
|
Using HTML and hexadecimal color codes,
you can specify
- background color
- text color of the whole page
- text color of some selected text
- text color of links, viewed links and active links
- background color of table or table cell
Color is an attribute:
Body Attributes
You can specify a background color for
your HTML page, as well as text color, link color (the color
of your links before they have been clicked), viewed link
color (the color of your link after it's page has been viewed)
and active link color (the color of your link while the
link is clicked down.)
These colors are put into your HTML
page as an attribute of the body tag.
<body bgcolor="#00CC00"
text="#FFFFFF" link="#000099" vlink="#333333"
alink="#FFFF00">
This will make a green page with white
text, navy blue links that turn dark grey after being viewed,
and yellow while the link is pressed.
See
an example of this page.
Changing Text Color
Using the above body attributes to specify
color will change all of the links and text color on your
whole page. What if you just want one line or one part of
your text to be a different color?
Color is an attribute that can also
be specified inside the font tag. Notice how the font tag
is applied to each letter here. Even though all of the text
is size +7, the color of each letter changes, therefore
the font tag has to start and end after each letter, and
be re-applied for the next.
<p align="center">
<font face="Arial, Helvetica, sans-serif" color="#FF0000"
size="+7">
<b>U</b>
</font>
<font face="Arial, Helvetica, sans-serif" color="#FFFFFF"
size="+7">
<b>S</b>
</font>
<font face="Arial, Helvetica, sans-serif" color="#0000FF"
size="+7">
<b>A</b>
</font>
</p>
Web Safe Colors
Some older Macs and PCs have only 256 colors in
their system palettes, and only 216 of them are the same
colors. These 216 colors can be viewed the same on all computers.
These are called "browser safe colors" or "Web
safe colors." It's easy to recognize a web-safe color
in HTML code because all Web safe colors are a combination
of 00, 33, 66, 99, CC, and FF
Web-Safe
#009900
|
#990000
|
#6633CC
|
#FFFF99
|
NOT Web-Safe
Hexadecimal Colors and RGB Colors
Web images are created using a RGB (red
green blue) palette, as opposed to CMYK (cyan magenta yellow
black) that is used for print.
In
Fireworks, you can select color by clicking the color box
at the bottom of the toolbar (circled on left). When you
do, the color picker (below) pops up. By default, the Fireworks color picker shows the 216 web safe colors, but you can use other palettes by clicking on the drop-down arrow in the upper right hand corner or the round system color picker towards the center of the menu bar.
Notice the R, G, and B values that are
inside the white box? These 3 pairs of numbers are the "recipe"
that mixes a specific amount of red, green, and blue in
order to produce a color. The number at the top, #66CC00,
is the hexadecimal value for this RGB color.
It is important to know the RGB value
as well as the hexadecimal code for the color if you have
to match colors on your Web page to specific colors in your
graphics. In Fireworks, to view the RGB value of your selected color, click on the small round color wheel at the top of the Color Picker. When you do, the following System Color Picker will pop up. In the lower right corner is the RGB formula.
Once you decide on colors, be consistent!
Use these codes to guarantee that you always use the same
exact color.
Web Color Resources
Here is a chart of web-safe colors.
Or refer to this Browser
Safe Color Chart from Lynda Weinman for more information about the use of color in web design.
|