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
Usage of color property in CSS
The color property in CSS is used to set the color of text content. It accepts various color formats including color names, hexadecimal values, RGB, and HSL values.
Syntax
color: value;
Color Value Formats
The color property accepts several formats:
- Color names: red, blue, green, etc.
- Hexadecimal: #ff0000, #00ff00, #0000ff
- RGB: rgb(255, 0, 0)
- RGBA: rgba(255, 0, 0, 0.5) with transparency
- HSL: hsl(0, 100%, 50%)
Example: Using Color Names
<html>
<head>
<style>
.blue-text { color: blue; }
.red-text { color: red; }
.green-text { color: green; }
</style>
</head>
<body>
<p class="blue-text">This text will be written in blue.</p>
<p class="red-text">This text will be written in red.</p>
<p class="green-text">This text will be written in green.</p>
</body>
</html>
Example: Using Hexadecimal Values
<html>
<head>
<style>
.custom-blue { color: #3366cc; }
.custom-orange { color: #ff6600; }
.custom-purple { color: #9933cc; }
</style>
</head>
<body>
<p class="custom-blue">Custom blue color using hex value.</p>
<p class="custom-orange">Custom orange color using hex value.</p>
<p class="custom-purple">Custom purple color using hex value.</p>
</body>
</html>
Example: Using RGB and RGBA
<html>
<head>
<style>
.rgb-text { color: rgb(255, 100, 50); }
.rgba-text { color: rgba(0, 150, 200, 0.7); }
</style>
</head>
<body>
<p class="rgb-text">RGB color: orange-red tone.</p>
<p class="rgba-text">RGBA color with 70% opacity.</p>
</body>
</html>
Comparison of Color Formats
| Format | Example | Supports Transparency | Use Case |
|---|---|---|---|
| Color Name | red, blue | No | Quick prototyping |
| Hexadecimal | #ff0000 | No | Precise colors |
| RGB | rgb(255, 0, 0) | No | Mathematical color mixing |
| RGBA | rgba(255, 0, 0, 0.5) | Yes | Colors with transparency |
Conclusion
The CSS color property provides flexible options for styling text colors. Use color names for quick testing, hexadecimal for precise colors, and RGBA when transparency is needed.
Updated on: 2026-03-15T23:18:59+05:30
197 Views
Advertisements