In this blog post, we’ll explore the topic of colors in CSS. To do so, we will talk about different ways of using colors in CSS and their implications. We will also take a look at why you should use them.
CSS Named Colors
In CSS there are many ways to specify colors. The easiest way is to specify a color name, and the below lists the names for 16 colors that are supported by all browsers.
In addition to these names, though, most browsers support the color names in the draft CSS3 Color specification.
List of 16 Basic Colors in CSS
| Color Preview | Color name |
|---|---|
| black | |
| | silver |
| gray | |
| white | |
| maroon | |
| red | |
| | purple |
| fuchsia | |
| green | |
| lime | |
| olive | |
| | yellow |
| navy | |
| blue | |
| teal | |
| aqua |
Example
The following CSS code will apply the background color in purple for all div tags.
div {
background-color: purple;
}CSS RGB Values
Another way to specify a color is to use an RGB (red, green, blue) value. One way to do that is to specify the percent of red, green, and blue that make up the color.
For instance, in the example below it specifies 100% red, 40% green, and 20% blue for the p (paragraph) tag. When using this method, you can also use any values from 0 through 255 instead of percentages. Then, 0 is equivalent to 0% and 255 is equivalent to 100%. This gives you more precision over the resulting colors.
Example
In the following example, it will set the text color of the paragraph and h2 heading to orange. The difference is in the format, the color is the same.
p {color: rgb(100%, 40%, 20%);}
h2 {color: rgb(255, 102, 51);}CSS Hex Values
Another way to specify a color is to use hexadecimal, or hex, values for the red, green, and blue values, and this is the method that has been preferred by most web designers.
In hex, a value of "000000" results in black, and a value of "FFFFFF" results in white. The simple conversion of percentages to hex is 0% is 00, 20% is 33, 40% is 66, 60% is 99, 80% is CC, and 100% is FF. When you use this technique, the entire value must be preceded by the pound sign (#).
Example
header {
background-color: #ffb703;
}Colors in CSS3
To provide even more color options for web designers, CSS3 lets you code color specifications in three more ways.
CSS RGBA Values
First, you can use RGBA values. This works like RGB values, but with a fourth parameter that provides an opacity value. If, for example, you set this value to 0, the color is fully transparent so anything behind it will show through. Or, if you set this value to 1, nothing will show through.
Example:
p {
rgba(255, 99, 71, 0.2);
}CSS HSL Values
Second, you can use HSL values. To do that, you provide a number from 1 through 359 that represents the hue that you want. The hue is one of the main properties of a color. Then, you can provide a number from 0 through 100 that represents the saturation percent with 100 being the full hue. Last, you can provide a number from 0 through 100 that represents the lightness percent with 50 being normal, 100 being white, and 0 being black.
Example:
p {
hsl(240, 100%, 50%);
}CSS HSLA Values
Third, you can use HSLA values. This is just like HSL values, but with a fourth parameter that provides an opacity value between 0 and 1. The examples below give you some idea of how these values work.
Example:
hl {
color: hsla(240, 100%, 50%, 0.5);
}
