Named Colors

Colors make a page pleasant to look at and easier to read. In this lesson, we will color our cat page and try all the ways a color can be written in CSS:

• named colors, such as green or white,
• RGB colors, mixed from red, green and blue light,
• hexadecimal colors, which are just a shorter way to write RGB colors,
• HSL colors, described by their hue, saturation and lightness.

For this lesson, we've prepared the cat page again, with a short stylesheet. Look at style.css in the editor: it has two rules, and each of them uses a different color property:

• color sets the color of the text, also called the foreground color. Thanks to the rule for #title, the main heading is white.
• background-color sets the color of the background of an element, the area behind its content. Thanks to the rule for .title-background, the area around the main heading is black.

Both properties accept a color in any of the formats above.

The simplest way to write a color is by its name. CSS knows 148 color names. Besides the basic ones like red, blue or gray, there are also tomato, gold, skyblue or orchid. Uppercase and lowercase letters don't matter, but we usually write color names in lowercase:

p {
	color: tomato;
}

Names are easy to read and remember, but there are only 148 of them. The other formats can describe more than 16 million colors, so we can choose exactly the shade we want.