Syllabus Aesthetics HTML Fireworks Flash Dreamweaver

 

 

 

Intro to Web Graphics
How Web Design is Different from Print
How to save graphics for the Web
File formats: gif vs jpg
Hexadecimal Colors
Inserting an image in an HTML page

Preparing Graphics for the Web
Scanning
Editing and resizing graphics
Download Navigation Graphics
Web Design with Photoshop
Optimizing and Exporting with Fireworks
Setting up Rollover Graphics

Designing Successful Web Sites
Interface and Navigation Design
Design Tips
15 Steps for Successful Web Design

 

Search this site:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


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

  1. background color
  2. text color of the whole page
  3. text color of some selected text
  4. text color of links, viewed links and active links
  5. 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>

 

USA

 

 

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

#358613

 

#8D0C1F

 

#5B43BC

 

#FAF59E

 

 

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.

 


 

Top of Page

 

Home . Syllabus . Web Aesthetics . HTML . Fireworks . Flash . Planning . Graphic Design . Dreamweaver