HTML Basics:
Page Colors

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

The Page Properties of an HTML page include the background (color or image), text color, and link colors. Choosing a combination that is attractive and readable is a challenge.

Color Numbers & Names

Primary Colors

The monitor lights up dots of red, green, and blue to different intensities to form all other colors. These three are the primary colors for emitted light. Most of us are more familiar with the primary colors for paints: red, yellow, blue.

In HTML code you identify a color with three pairs of numbers, written together in the form #rrggbb. The pairs range from 00 to FF, in hexadecimal numbers.

For example, the number #00FFFF sets the amount of red = 00 (which means none), green = FF and blue = FF, which is the maximum value. FF is the same as 255 in regular base 10 numbers.


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPX To subtopics
    Images in HTMLTo subtopics
    Formatting Arrow - Subtopic open
        Page Format
    icon-footprintPage Colors Table: Named Colors
    icon-footprintBackground Image
        Text Format
    icon-footprintFormat Text
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics

Search 
Glossary  
Appendix

Named Colors:

Color Palette: 16 colors named in HTML standard - black, green, navy, teal, gray, lime, blue, aqua, maroon, olive, purple, silver, red, yellow, fushia, whiteThere are 16 named colors in the HTML 4.o1 standard itself. You can safely use these names in your HTML code instead of the #rrggbb numbers.
 

Palette: Named colorsThere are 140 colors which have been named, first by Netscape. Internet Explorer also recognizes these names. Other browsers may not understand some or any of these.

When you are writing your own code, it is certainly easier to remember Pink  than "#FFC0CB"! 
TableTable of named colors 
 

Browser-safe colors:

Color palette: Browser safe colors in hexagonOn a system that only has 256 colors, the browser-safe colors won't dither (using dots of other colors to fool the eye into seeing the color you really want).  This is true for both Windows and Mac systems.

The hexadecimal color numbers are combinations of only 00, 33, 66, 99, CC, or FF.

This hexagon of colors is used in the color dialogs of a number of programs. Very handy and logical. How did they figure out to use a hexagon??
 

Icon Step-by-Step

Step-by-Step: Format Page

  Icon Step-by-Step
What you will learn: to set page background color
to set color of text
to set color of links

 Start with:   Class disk, hector 16.htm, resource files (Either FrontPage or FPX)

Change Colors

  1. Class diskSave as hector17.htm to the web folder of your Class disk.
     
  2. From the menu select  Format  |  Background . The dialog Page Properties opens with the Background tab selected.
     
  3. Experiment with various combinations of colors for the background, text, and links. Notice which combinations are easy to read and which are impossible. Scroll the page to see how the images look on various background colors.

     If you did not try out the Color Picker Icon: Off-site location during the previous lesson, try it now.
     

  4. Dialog: Page Properties | BackgroundReturn  to the Page Properties dialog and set the following characteristics:
    • Background: Aqua.
    • Text: Navy.
    • Hyperlink: Green
    • Visited Hyperlink: Navy
    • Active Hyperlink: Lime
       
  5. Hector's Page with Page Properties setClick on OK. The background of your page and the color of the text change. Not a particularly interesting combination. We'll do better shortly.
     

Source Code for Page Properties

HTML codes for the color attributes of the page:

  • bgcolor is background color.
  • text is the default color of the text on the page.
  • link is the color of an unvisited hyperlink.
  • vlink is the color of a visited hyperlink.
  • alink is the color of an active hyperlink.
  1. View the HTML code and look at the BODY tag:
     
    <body bgcolor="#00FFFF" text="#000080" link="#008000" vlink="#000080" alink="#00FF00">

    This is getting complicated!
     

  2. Close the HTML code window.

Custom Color

If you do not like the colors in the drop list, you have many other choices in the Color dialog. Let's create a custom color.

  1. From the menu select  Format  |  Background  again.
     
  2. Choose, from the Background drop list,  Custom  so you can create a custom color. The Color dialog appears.
     

    Color palette - Custom (FrontPage)
    FrontPage

    Drop list of colors: Custom selected (FPX)
    FPX


     

  3. Dialog: Color with Custom ColorsIf necessary, in the Color dialog click on the button Define Custom Colors, to expand the window.

    Tip If you have Windows set to 256 colors, some of the colors will look spotty. Windows dithers the colors by using dots of the colors it knows to create colors it cannot display directly.
     

  4. Experiment by dragging the crosshairs in the large rainbow box or by sliding the pointer up and down in the color column on the right. The Color|Solid box shows the color you have currently selected.
     
  5. Dialog: Color - numbers for custom color - 203,230,255To create your final custom color type in the boxes for Red, Green, and Blue the numbers 203, 230, and 255, in order.
     
  6. hector17.htm with custom color backgroundClick on OK to close the Color dialog and then on OK again to close the Page Properties dialog. Your page now uses the new color for the page background.
     
  7. Class disk Save. [hector17.htm ]