The color Property

The color property specifies the foreground color of an element. The foreground color applies to text. It also applies to borders when there is no border-color declaration.

The color property can take, as values, color keywords, system color keywords, hexadecimal color notation, decimal functional rgb notation, percentage functional rgb notation and the keyword inherit.

color with Color Keywords

For a list of color keywords, see Specifying Color in CSS. Below is an example that uses a CSS 2.1 color keyword.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';color:aqua">the quick brown fox jumps over the lazy dog</p>

Below is an example that uses a CSS 3 color keyword.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';color:crimson">the quick brown fox jumps over the lazy dog</p>

color with System Color Keywords

To mimic the appearance of the viewer's operating system's GUI, the colors of text elements need to match the viewers OS. For this, system color keywords can be used. see Specifying Color in CSS for more info. Below is an example.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';color:WindowText">the quick brown fox jumps over the lazy dog</p>

color with Functional rgb Values

The color property can have a value specifying a color in the decimal functional rgb notation.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';color:rgb(255,105,180)">the quick brown fox jumps over the lazy dog</p>

The color can also be specified in the percentage functional rgb notation.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';color:rgb(100%,49.8%,31.3%)">coral the quick brown fox jumps over the lazy dog</p>

In the above example, the color value can also be expressed as rgb(255, 127,80)

color with Hexadecimal Notation

The values of red, green and blue can be specified as hexadecimal numbers in a color declaration. The value consists of a pound symbol (#) followed by the hexadecimal values of red, green and blue. There are no spaces.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';color:#FF7F50">coral the quick brown fox jumps over the lazy dog</p>

In the above example, the color in decimal rgb notation is rgb(255,127,80).

A hexadecimal notation value can be shortened if the value of each primary color consists of a repeated number or letter.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';color:#AD9"> the quick brown fox jumps over the lazy dog</p>

In the above example, the color value can be expanded to #AADD99 which is equivalent to rgb(170,221,153).

color with inherit

Since color is an inherited property, the only use of the color:inherit declaration is to override another CSS color declaration on an element. Internet Explorer 6 and Internet Explorer 7 ignore the color:inherit declaration.