The Internet Connection
(January 2000 Action for Libraries newsletter)

By Michael Sauers

Coding Colors in CSS for Web Pages

Authors of World Wide Web pages who choose to use Cascading Style Sheets (CSS) to control page layout have five ways available to represent colors. (CSS currently function only in NetScape and Internet Explore 4.0 and above, but not all styles work in both browsers.)

The coding for each of the five are listed in bold below:

  • body {color: red}
    Specifies one of the 16 basic colors.

  • body {color: #ff0000}
    The standard hexadecimal (hex, base 16) notation. A two-character representation for each of the values of red (R), green (G) and blue (B). (RGB is the color model used to select and manipulate color in digital media.)

  • body {color: #f00}
    A three-character hex representation. Each of the three characters will expand by doubling to form a standard six-character hex value, in this case it is equal to the #ff0000 in the previous code.

  • body {color: rgb(255,0,0)}
    RGB value representation. Each value for R, G and B can be represented by a whole-number decimal value ranging from 0 to 255. This method removes the need for the user to convert the values to hexadecimal notation.

  • body {color: rgb(100%,0%,0%)}
    RBG float range. Allows you to specify a percentage of the potential values for R, G and B. Since possible RGB values range from 0 to 255, 0%=0, 50%=127.5 and 100%=255. Technically, this allows for more than the 16 million possible colors.

Even though a browser supports CSS, not all five of the above color declarations may work in a browser. Web page creators will want to experiment to find which style declaration works best.

Note: All of the examples above produce a red background. The coding in each example is composed of zeros and does not contain the letter "O," except for in the word "color."

(Source: CSS Level 2 Specification, Section 4.3.6)

BCR Home Page Table of Contents