Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101

Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > Formatting > Page Colors
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   Formatting: Page Colors

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

Color Numbers and Names

Primary Colors for Emitted Light

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.

Hex Numbers for Color

In HTML code you identify a color with three pairs of numbers for the amount of red, green, and blue, 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. You can use either upper case or lower case letters.

This is what you get with
style="background-color:#00ffff; color:#ff0000;"

RGB Numbers for Color

Another way to identify colors by the amount of red, blue, and green is with the expression rgb(rrr,ggg,bbb) where the numbers are between 000 and 255 in base 10.

This is what you get with

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.01 standard itself. You can safely use these names in your HTML code instead of the #rrggbb numbers.

Palette: Named colorsThere are 140 colors are named in the HTML and CSS specifications, the original 17 plus 123 more. All current browsers should understand these names but some really old browsers do not.

When you are writing your own code, it is certainly easier to remember Pink  than "#ffc0cb"! 

W3Schools.com: Table of additional named colors Icon: Off Site

Browser-safe colors:

Color palette: Browser safe colors in hexagonOn a computer monitor that can show only 256 colors (few and far between these days!), 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 for the browser-safe colors are combinations of only 00, 33, 66, 99, CC, and FF.

This hexagon of browser-safe 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: Page Colors

 Icon Step-by-Step

What you will learn: to use an internal style sheet to set page colors using color numbers for:
     background color
     text color
     link colors - unvisited, visited, hover, active
     background color for a:hover
to set color with color names
to use Paint to pick a custom color
to use the #rrggbb value of the custom color

 Start with Icon: Class USB , hector16-Lastname-Firstname.htm, resource files

Internal Style Sheet: Set Colors for Page with Color Numbers

You will create an internal style sheet to set the background color for the page, the text color, and the colors for links.

  1. If necessary, open hector16-Lastname-Firstname.htm in your editor.

  2. Icon: Class USB Save As hector17-Lastname-Firstname.htm to the web project2 folder of your Class disk.
  3. Edit the HEAD section to include the following styling code, but you may omit the comments if you wish:
    <style type="text/css">
    body {
         background-color:#00ffff;   /*blue-green*/
         color:#000000;              /*black*/
    a:link {
         color:#0000cc;             /*dark blue*/
    a:visited {
         color:#00cc00;             /*green*/
         background-color:#aa00ff;  /*purple*/
         color:#ff0000;            /*red*/
        color:#ffffff;            /*white*/

    Icon: WarningCopy and Paste: Don't try to copy and paste the code above. You may get unexpected results due to hidden characters! 

  4. Icon: Class USB Save.

  5. hector17- after adding internal style sheet (browser)Switch to your browser and view the new page.
    • The signature image at the top right clearly has a white background.
    • Links that you have visited, and are still in your browser history, will be in green.
    • Unvisited links will be in dark blue.

    Typing is important!

    Icon: TroubleProblem: Style code shows in the browser
    Error: spelling of STYLE allows code for styles to show on pageThere was a coding error in the STYLE section of the page. In the example, the tag <style> was misspelled as <sstyle>

    Icon: TroubleProblem: Page is blank
    You left our a quote or closing bracket in part of the HEAD.

    Icon: TroubleProblem: Part or all of the styles are not used
    This is usually a typing problem or a failure to create or apply correctly.

    • Check punctuation of styles - colons, semicolons, quotes, parentheses, and brackets.
    • Check spelling of the name of attributes and values, especially font and color.
    • Check spelling and punctuation of class in the tag where you wanted to apply it.
    • Did you actually create the style named in the tag?
    • Did you apply the correct class to the tag?
  6. Icon: Experiment Experiment: Page Colors
    • Switch back to your editor and change the colors in the STYLE section.
    • Use various combinations of 00, 33, 66, 99, cc, and ff.
    • Save and view your changes in the browser.
    • Which combinations are easy to read and which are impossible to read.
    • 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 and pick out some combinations to try on your page.

Internal Style Sheet: Set Colors for Page with Color Names

You can use names for many colors. Then you may not need comments to tell you what the color is.

  1. Return to your editor and edit the STYLE section to use the following color names:
    • body background-color: wheat
    • body color: navy
    • a:link color: green
    • a:visited color:navy
    • a:hover background-color:pink
    • a:active color: lime

    Icon: TipTips for Styles: Do not use # with a color name, only with a color number. You still need a semicolon after a declaration with a color name, like color:green;

  2. Delete the comments from the internal style sheet.

  3. Icon: Class USB Save.

  4. hector17-using color words (browser)Switch to your browser and Refresh.

    The signature image is still not transparent, of course. The look for the whole page is quite different with different colors.

Paint: Pick a Custom Color

Dialog: Color > custom gree (PaintShopPro)The easy way to use colors in HTML is to pick a color from the chart of named colors! But, if none of those is quite right or you cannot get to a chart, you need the color number for exactly what you want. You don't want to spend a lot of time guessing what numbers to use to get that perfect shade of green!

An advanced HTML editor like Dreamweaver or an advanced graphics program like PaintShopPro or one of the Adobe graphics programs will have a tool for picking colors that shows you the #rrggbb number and probably also the RGB number.

We will work with Paint, which does not show the HTML version of a color's number, but does easily show the RGB version.

  1. Dialog: Colors (Paint - Win7)Open Paint and then:
    Icon: WinXPIcon: Vista WinXP/Vista: Menu Color > Edit colors
    Icon: Windows 7 Icon: Win8 Icon: Win8.1 Win7, Win8, Win8.1
    , Win10:
    Click on the ribbon button Edit Colors Button: Edit Colors (Paint - Win7).

    The Edit Colors dialog opens.

  2. If necessary, in the Color dialog click on the button Define Custom Colors >> to expand the window to the right.

    Parts of the Color Dialog:

    • On the left, a palette of 48 standard Windows colors.
    • On the right, a rainbow box for picking any of millions of colors and a column to adjust the exact shade of that color.
    • Paint pointerCrosshairs in Paint pick a colorCrosshairs shape = current color is in the rainbow box. Arrow = shade of the color.
    • Color|Solid box = the currently selected color
    • Hue, Saturation, Luminance or Lightness (HSL) numbers from one model of identifying colors.
    • Red, Green, Blue (RGB) numbers from another model for colors.
    • Does not show the HTML color numbers, which are hexadecimal numbers (base 16).
    • Custom colors. Click a blank square on the left (BEFORE you select your color in the rainbow box). The color picker resets. Select a color, and then click Add to Custom Colors. Click on OK and your new color appears in the Color Palette. You can use the new color on other images while Paint is open. Once you close Paint, all custom colors are forgotten.
  3. Icon: Experiment Experiment: Colors Dialog
    • Drag the crosshairs in the large rainbow box to select a color and observe how the RGB numbers change in the dialog.
    • Use the keyboard arrow keys to move the crosshairs in the rainbow box.
    • Slide the pointer up and down in the color column on the right to select a shade of the current color.
      How to the numbers change?
    • Edit the numbers yourself for Hue, Saturation, and Luminance and observe what colors you get.
      • The largest number you can enter is 255 and the smallest is 0.
      • Larger numbers for Hue move the crosshairs which way?
      • Larger numbers for Saturation move the crosshairs which way?
      • Larger numbers for Luminance move the pointer on the color column which way. How do the crosshairs move?

    • Edit the numbers for Red, Green, Blue and observe what colors you get.
      The largest number you can enter is 255 and the smallest is 0.
      There is no direct pattern for how the crosshairs move within the rainbow box.

      Dialog: Color - 256 colors only. Other colors are dithered. Rare these days.TipDithered Colors: If you have your computer set to only 256 colors (Why??), 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. Rare these days! My monitor won't let me set the number of colors low enough to show this effect. I had to find an old screenshot. The light aqua is dithered with gray, if you look really carefully. Lots of obvious dithering in the rainbow box.

      You often see the same effect when you save a screen shot as a GIF file because that format only allows 256 colors. They are not the SAME 256 colors in every image but photos, for example, need a lot more than 256!

      Graphics Programs: A more advanced graphics program will likely include the HTML color number also.

  4. Dialog: Color - numbers for custom color - 203,230,255To create your final custom color (so that your document will match mine!) type in the boxes for Red, Green, and Blue the numbers 203, 230, and 255, in order. The Color|Solid box shows you a light blue.
  5. Close Paint.
    Now you can write a STYLE to use this color.

Internal Style Sheet: Use Custom RGB Color

  1. hector17 with new hexadecimal backgroun-color for the BODY (browser)Edit your HTML code in the STYLE section, up in the HEAD section, to replace the named color for the BODY background-color with your RGB color values:

  2. Icon: Class USB Save.

  3. Switch to your browser and Refresh to view the saved page.

Next we will make Hector's signature image blend in with the page by changing its background color.