CSS-Colors
In this tutorial you will learn the different methods of defining color values in CSS.
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or for the background of the element. They can also be used to affect the color of borders and other decorative effects.
Setting Color Property
The color property defines the text color of an element.
Example: Try It
p {
color: red;
}
Color Value Formats
Color names
Colors can be set by simply typing the common name (color keywords) of that color.
The basic color names are: maroon, white, red, black, blue, teal, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, aqua , and yellow. The color names are case-insensitive.
Example: Try It
h1 {
color: blue;
}
Hexadecimal Notation
A hexadecimal is a 6 digit representation of a color. Each hexadecimal code will be preceded by hash sign '#', like #RRGGBB.
The first two digits (RR) represent a red value, the next two are a green value (GG), and the last are the blue value (BB).
Hexadecimal means base-16 counting, so valid digits are 0 through 9 and A through F. Each red-green-blue pair can range from 00 to FF,
or 0-255 in decimal notation. All in all, this provides 16 million colors to choose from.
Example: Try It
p {
color: #FF0000;
}
Short Hexadecimal Notation
There is a short form of the hexadecimal notation in which the color is specified using only three hexadecimal digits instead of six. This notation can be converted to the hexadecimal notation by duplicating each digit.
Example: Try It
p {
color: #f00;
} /* same as #ff0000 */
The short hexadecimal notation is a useful shortcut when the full precision provided by the longer hexadecimal notation is not needed.
RGB Notation
The rgb() function allows a color value to be specified as three intensity values for the color components red, green, and blue. The value can be either an integer between 0 and 255 or a percentage.
Example: Try It
p { color: rgb(255, 0, 0); }
h1 { color: rgb(0%, 100%, 0%); }
This notation allows the same color precision as the hexadecimal notation.
RGBA Notation
CSS 3 introduced the RGBA notation, adding an alpha value for specifying the color transparency. This alpha value is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Red with 50% transparency can be set as follows: Try It
p {
color: rgba(100%, 0%, 0%, 0.5);
}
RGBA color values are supported in Chrome 1+, Firefox 3+, Safari 3.1+, Opera 10+, and IE 9+. If support is not present, the rule is ignored, so if legacy browser support is required a fallback color value can be set as shown here: Try It
p {
color: rgb(100%, 0%, 0%); /* fallback */
color: rgba(100%, 0%, 0%, 0.5);
}
A browser that does not support RGBA ignores the second declaration and continues to apply the opaque version.
HSL Notation
A color value can be set with the hsl() function (which stands for hue, saturation, and lightness). Hue is a degree on a color circle from 0 to 360, where 0 and 360 are red, 120 is green, and 240 is blue. Saturation is a percentage value, with 0% giving a shade of gray and 100% giving the full color. Lightness is also specified as a percentage, from 0% (dark) to 100% (bright).
Example: Try It
p {
color: hsl(0, 100%, 100%);
}
HSLA Notation
Similar to RGB, the HSL notation can be extended with an alpha value for specifying the transparency.
Red with 50% transparency can be set as follows: Try It
p {
color: hsla(200, 100%, 20%, 0.9);
}
HSLA is supported in Chrome 1+, Firefox 3+, Safari 3.1+, Opera 10+, and IE 9+, same as the RGBA function.