HTML Text Color with CSS
Use the CSS color property to set the color of HTML text. The old <font color> element may still render in legacy pages, but it is obsolete and should not be used in new HTML.
<p class="notice">This text is blue.</p>
<style>
.notice {
color: #003080;
}
</style>You can choose colors with names such as red, hexadecimal values such as #003080, RGB values such as rgb(0 48 128), or HSL values such as hsl(218 100% 25%). The HTML color chart can help when selecting values.
Using the CSS color Property Top ↑
The color property sets an element's foreground text color. Descendant text normally inherits that color unless another rule overrides it.
<style>
.message {
color: green;
}
</style>
<p class="message">Registration completed successfully.</p>Common CSS Color Formats Top ↑
| Format | Example | Use |
|---|---|---|
| Named color | color: red; | Readable built-in color names |
| HEX | color: #003080; | Common web color notation |
| RGB | color: rgb(0 48 128); | Red, green and blue channels |
| HSL | color: hsl(218 100% 25%); | Hue, saturation and lightness |
Named Colors Top ↑
<style>
#my_container {
color: red;
}
</style>See font colors using color keywords.
HEX Colors Top ↑
<style>
#my_container {
color: #ff80ff;
}
</style>See font colors using HEX values.
RGB Colors Top ↑
RGB specifies red, green and blue channels. In the familiar 8-bit form, each channel ranges from 0 to 255.
<style>
#my_container {
color: rgb(219 89 74);
}
</style>See font colors using RGB values.
HSL Colors Top ↑
HSL describes a color by hue, saturation and lightness. It can be convenient when you want to adjust how vivid or light a color appears.
<style>
.heading {
color: hsl(218 100% 25%);
}
</style>Different Colors in the Same Line Top ↑
Wrap only the text that needs a different color in a semantic inline element such as <span>, then style each class with CSS.
<p>
<span class="green-text">Here is a</span> line of text
<span class="red-text">with different colors</span>.
</p>
<style>
.green-text { color: green; }
.red-text { color: red; }
</style>Legacy <font color> Markup Top ↑
<font> element is obsolete and non-conforming in modern HTML. Browsers may still display old pages that use it, but new code should use CSS.You may encounter markup like this when maintaining older pages:
<!-- Legacy example: do not use in new HTML -->
<font color="#003080">Legacy colored text</font>The modern equivalent is:
<span class="legacy-replacement">Colored text</span>
<style>
.legacy-replacement { color: #003080; }
</style>Color and Accessibility Top ↑
Choose text and background colors with enough contrast for comfortable reading. Also avoid using color as the only way to communicate meaning. For example, an error message can use red text, but it should also include clear wording or another cue that identifies it as an error.
When a color is reused across a site, define it in a stylesheet rather than repeating inline styles. This makes design changes and contrast improvements easier to maintain.
Common Mistakes Top ↑
Using <font color> in new HTML Top ↑
Use the CSS color property instead. The old <font> element is obsolete.
Using color alone to communicate meaning Top ↑
Add text, icons or other understandable cues so users do not need to distinguish a specific color to understand the content.
Choosing low-contrast combinations Top ↑
A technically valid CSS color can still be difficult to read against its background. Check contrast before publishing.
Changing every element with inline styles Top ↑
Reusable CSS classes are usually easier to maintain than repeating style="color:..." throughout the HTML.
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
Use the CSS color property, for example p { color: blue; }.
No. The font element is obsolete in modern HTML. Use CSS for text color, font family and font size.
Yes. CSS supports named colors, HEX, RGB, HSL and several other color formats.
Wrap that part in an appropriate inline element such as span and apply a CSS class to it.
No. Text must also have sufficient contrast against its background, and color should not be the only cue used to communicate important meaning.
Type of fonts Font tag
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
