Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS Basics – CSS color / colour codes

css_colors.jpgBlack text on a white background can get kind of boring. It looks a little old-school too. Here is how to spice up your site with a little color. There are several color values that you can use

  • Three digit hex
  • Six digit hex
  • Integer
  • Float

The two most common are the three digit and six digit hex values. They take the format #RGB and #RRGGBB where R stands for red, G stands for green and B stands for blue. The color codes need to be prefaced with a # sign, to indicate that they represent a hex value. The shortened three digit version is used when each of the RGB value pairs are the same, thus, #ff00ff could be abbreviated to #f0f. A discussion of RGB values are beyond the scope of this article, but a commonly used set of colors is the ‘web safe’ palette. This consists of the 216 colors which will reliable display correctly on all monitors, including older 256 color screens.

Some common values are:

  • Black: #000
  • White: #fff [white!]
  • Red: #f00
  • Blue: #00f
  • Yellow: #ff0

To color text, or foreground colors use the color property:

p {color:#f00}

To color the background use the background-color property:

p {background-color:#00f}

Borders also have color properties, set by using the border-color, or border-top-color, border-left-color, border-right-color, border-bottom-color values.

Final there are 16 officially named colors designated by the W3C, these are :-

  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • white [white!]
  • yellow

This entry was posted on Wednesday, September 12th, 2007 at 2:22 pm and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.