CSS Property - Color
Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A
This CSS property describes the text color of an element (often referred to as the foreground color). There are different ways to specify colours in CSS:
Example:
p {color: red;} = natural language
p {color: rgb(255,0,0);} = RGB range 0-255
Colour Units
A color is a either a keyword or a numerical RGB specification.
The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette, and their RGB values are not defined in this specification.
Example:
body {color: black; background:white;}
h1 {color: maroon;}
p {color: olive;}
The RGB color model is being used in numerical color specifications. These examples all specify the same color:
Example:
p {color: #f00;} = #rgb
p {color: #ff0000;} = #rrggbb
p {color: rgb(255,0,0);} = integer range 0 - 255
p {color: rgb(100%, 0%, 0%);} = float range 0.0% - 100.0%
The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values in the range of 0-255, or three percentage values in the range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed around the numerical values.
Values outside the numerical ranges should be clipped.
Example:
p {color: rgb(255,0,0);} = integer range 0 - 255
p {color: rgb(300,0,0);} = clipped to 255
p {color: rgb(110%, 0%, 0%);} = clipped to 100%
RGB colors are specified in the sRGB color space [9]. UAs may vary in the fidelity with which they represent these colors, but use of sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards [10].
UAs may limit their efforts in displaying colors to performing a gamma-correction on them. sRGB specifies a display gamma of 2.2 under specified viewing conditions. UAs adjust the colors given in CSS such that, in combination with an output device's "natural" display gamma, an effective display gamma of 2.2 is produced. Appendix D gives further details of this. Note that only colors specified in CSS are affected; e.g., images are expected to carry their own color information.