Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Setting Text Color using CSS
The CSS color property is used to set the text color of HTML elements. You can specify colors using various formats including color names, hexadecimal values, RGB values, or HSL values.
Syntax
selector {
color: value;
}
Possible Values
| Value Type | Description | Example |
|---|---|---|
| Color Name | Predefined color names |
red, blue, green
|
| Hexadecimal | 6-digit hex code |
#FF0000, #00FF00
|
| RGB | Red, Green, Blue values | rgb(255, 0, 0) |
| HSL | Hue, Saturation, Lightness | hsl(0, 100%, 50%) |
Example: Using Color Names
This example demonstrates setting text color using predefined color names −
<!DOCTYPE html>
<html>
<head>
<style>
.red-text {
color: red;
}
.blue-text {
color: blue;
}
.green-text {
color: green;
}
</style>
</head>
<body>
<h1 class="red-text">Red Heading</h1>
<p class="blue-text">This paragraph has blue text.</p>
<p class="green-text">This paragraph has green text.</p>
</body>
</html>
A red heading "Red Heading", followed by a blue paragraph and a green paragraph appear on the page.
Example: Using Hexadecimal Values
This example shows how to use hexadecimal color codes −
<!DOCTYPE html>
<html>
<head>
<style>
.orange-text {
color: #FF8C00;
}
.purple-text {
color: #9932CC;
}
.navy-text {
color: #000080;
}
</style>
</head>
<body>
<h2 class="orange-text">Orange Heading</h2>
<p class="purple-text">This text is purple using hex code.</p>
<p class="navy-text">This text is navy blue.</p>
</body>
</html>
An orange heading, purple paragraph, and navy blue paragraph are displayed with their respective colors.
Example: Using RGB Values
This example demonstrates RGB color values −
<!DOCTYPE html>
<html>
<head>
<style>
.rgb-red {
color: rgb(255, 0, 0);
}
.rgb-custom {
color: rgb(128, 64, 192);
}
</style>
</head>
<body>
<p class="rgb-red">This text uses RGB red color.</p>
<p class="rgb-custom">This text uses a custom RGB color.</p>
</body>
</html>
A red paragraph and a purple-pink paragraph are displayed using RGB color values.
Conclusion
The CSS color property provides flexible options for setting text colors. Choose the format that best suits your needs: color names for simplicity, hex codes for precision, or RGB/HSL for programmatic control.
Updated on: 2026-03-15T13:40:35+05:30
625 Views
Advertisements