HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML color usage

Knowing how to set color is one thing, but doing it correctly as well as choosing the right color is another thing. Using color correctly both for yourself (in your code) and for your visitors (on the actual webpage) is an integral part of web development.

This tutorial focuses on:

Color naming convention

In the tutorial on HTML colors, we discussed how you can set a color in three different ways -- by color name, RGB value, or hexadecimal value.

While it is possible to set a color by color name or RGB value, the best way to do it is by hexadecimal code. If you set colors by hexadecimal code:

Hexadecimal color naming shortcut

When declaring the hexadecimal color value for an element, instead of using the full 6 digit value, you can shorten it down to three, that is if the color code consists of three pairs of repeating digits.

<body bgcolor="#ffffff"> <body bgcolor="#aa2233"> <body bgcolor="#114455"> <body bgcolor="#ffaa44">
Can be shortened to::
<body bgcolor="#fff"> <body bgcolor="#a23"> <body bgcolor="#145"> <body bgcolor="#fa4">

Color schemes

When creating a color scheme, you should always make sure that the background color goes good with the text color and images on a page as well as the general appearance of the page (everything has to work together). The general rule in web design is dark text on a light background and you will see this combination on the majority of websites out there. There are some websites that do have light text on a dark background, and to their credit, they do a good job at it as well. So it is possible to make a webpage look good with both dark text on a light background or light text on a dark background but you should stick to light text on a dark background as that is what people are used to seeing and that is the general rule on the web.

Examples of good background/text color combinations:
Black text on a gray background Medium blue text on a very light blue background Orange text on a black background Black text on a white background Green text on a light blue background

Choosing a good color scheme can sometimes be a difficult and tricky process. To help you with this, check out the website You choose a color or colors, and it will tell you in real-time what color(s) go good with it.

© Copyright 2013-2014
Terms of use | Privacy policy | Copyright information