CSS Text Color

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Text Color property is used to change the color of text displayed on a webpage.

By using the color property, you can apply different colors to headings, paragraphs, links, buttons, and other text elements. The supporting concepts are explained in CSS Colors and CSS Font Family.

Text color plays an important role in:

Improving readability
Enhancing visual design
Highlighting important content
Creating a consistent color scheme

Syntax

CSS Text Color Syntax

css

selector {
    color: value;
}

PreviousLayered Backgrounds NextCSS Text Alignment

h1 {
    color: blue;
}

Property	Description	Example
color	Sets the text color	color: red;
color	Using HEX value	color: #ff0000;
color	Using RGB value	color: rgb(255, 0, 0);
color	Using HSL value	color: hsl(0, 100%, 50%);
color	Using transparent color	color: rgba(255, 0, 0, 0.5);

CSS Text Color Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Text Color Example</title>
    <style>
        h1 {
            color: blue;
        }
        h2 {
            color: #ff6600;
        }
        p {
            color: rgb(0, 128, 0);
        }
        span {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Blue Heading</h1>
    <h2>Orange Subheading</h2>
    <p>This paragraph uses an RGB color value.</p>
    <p>This paragraph contains a <span>red highlighted text</span>.</p>
</body>
</html>

CSS Text Color

Syntax

Attributes

Example

Browser Support

Notes

Conclusion