CSS color Property
The color property describes the color of the text content and text decorations. A background color can be combined with a text color to make the text easy to read. You can find web colors in our HTML colors section and try to choose your preferred colors with our Color Picker tool. The default value of this property is currentcolor.
| Initial Value | currentcolor |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. The color is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.color = "#1c87c9"; |
Syntax
Syntax of CSS color Property
color: color | initial | inherit;Example of the color property:
Example of CSS color Property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Result
INFO
You can set hexadecimal, RGB, HSL, or color names as a value for the color property. Note: The initial value is currentcolor, which means it inherits the text color from its parent element.
Example of the color property with a named color value:
Example of CSS color Property with named color value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Example of the color property with a hexadecimal value:
Example of CSS color Property with hexadecimal value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Example of the color property with an RGB value:
Example of CSS color Property with RGB value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Example of the color property with an HSL value:
Example of CSS color Property with HSL value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| color | Describes the color of the text and text decorations. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. | Play it » |
| initial | It makes the property use its default value. | Play it » |
| inherit | It inherits the property from its parent element. |
Practice
What are the three ways to specify colors in CSS as per the content on the provided URL?