CSS Colors
CSS lets you set colors on text, backgrounds, borders and more using named keywords or the HEX, RGB, and HSL formats.
Where color is used
Many properties accept a color value. The <color> property sets text color, <background-color> fills an element's box, and <border-color> tints a border. Whatever the property, the same set of color formats is available.
Named colors
CSS ships with around 140 predefined color names, from common ones like red and blue to specific shades like tomato and slategray. They are easy to read and great for quick work.
Using a color name
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: tomato;
}
body {
background-color: whitesmoke;
}
</style>
</head>
<body>
<h1>Tomato Heading</h1>
<p>Some body text.</p>
</body>
</html>The three numeric formats
All three formats can describe the exact same color; they are just different ways of writing it. The three values in the table above are the same shade of tomato.
Same color, three ways
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: #ff6347; }
h2 { color: rgb(255, 99, 71); }
h3 { color: hsl(9, 100%, 64%); }
</style>
</head>
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
</body>
</html>Exercise: CSS Colors
Which property changes the color of an element's text?
