CSS Color Values
There are several ways to define a color values in CSS.
Color keywords
Color keywords are case-insensitive identifiers which represent a specific color, e.g. red, green, blue, yellow, black, etc.
Example
Try this code »h1 {
color: red;
}
p {
background-color: yellow;
}Warning: Support for color keywords varies across browsers so, to be on the safe side, it's better to use the hexadecimal or functional notation.
Check out the complete list of color keywords »
Transparent Color Keyword
The transparent keyword represents a fully transparent color.
This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is also its computed value.
Example
Try this code »h1 {
color: transparent;
}
p {
background-color: transparent;
}Note: CSS 2.1 allowed only two property background-color and border-color to accept the transparent keyword. But, CSS3 extends the color value to include the transparent keyword to allow its use with all properties that accept a color value.
RGB Color Values
RGB (red-green-blue) color model is the most common way to define color values in CSS. Colors can be defined using the RGB model in two ways:
Hexadecimal Notation
The RGB value in hexadecimal notation is specified with a # character immediately followed by either three or six hexadecimal characters (0-9, a-f).
When six-digit notation (#rrggbb) is used, the first pair (rr) represents the red value, the second pair (gg) represents the green value and the last pair (bb) represents the blue value.
Example
Try this code »h1 {
color: #f80;
}
p {
background-color: #ff8800;
}Tip: The three-digit hexadecimal notation (#rgb) can be converted into six-digit form (#rrggbb) by replicating digits, but not by adding zeros. For example, #03f can be expanded to #0033ff, but both values represent the same color.
Functional Notation
The RGB value in functional notation is specified with: rgb(red, green, blue). Where, each parameter (red, green, and blue) defines the intensity of the color and can be an integer value (from 0 to 255) or a percentage value (from 0% to 100%).
The integer value 255 corresponds to 100%, and to f or ff in the hexadecimal notation: For example, rgb(0,255,255) = rgb(0%,100%,100%) = #0ff, and all values represents the same color which is aqua. White spaces are allowed around the numerical values.
Example
Try this code »h1 {
color: rgb(0,255,255);
}
p {
background-color: rgb(0%,100%,100%);
}A value of 0 or 0% represents the absence of a particular color component, while a value of 255, 100% and f or ff represents the full presence of that color component.
Note: Values outside the valid range (0-255 or 0%-100%) are automatically clipped or changed to fall within the range supported by the device.
Check out the tutorial on CSS3 color to learn about the new functional notations, like rgba(), hsl() and hsla() for defining the color values.
