Categories
Web development

CSS color Property

Learn how to use the CSS color Property.


CSS color Property

The CSS color property defines the color of text.

Demo:

Click the “Try it” button to set the text color of the DIV element to “#ff006e”:



myDIV




Syntax:

color: color;

color – defines the text color (Hexadecimal, RGB, RGBA, HSL..).

Example1:

Set the text color with a HEX value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: #3a86ff;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example2:

Set the text color with an RGBA value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: rgba(155, 56, 56, 0.9);
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example3:

Set the text color with a HSLA value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: hsla(59, 43%, 61%, 0.8);
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

Read also:

CSS background-color Property

CSS border-color Property

CSS font-family Property