Home 〉 CSS Tutorials 〉 CSS color Property Tutorial with Examples - Learn Text Color in CSS
CSS color Property Tutorial with Examples - Learn Text Color in CSS !
CSS color Property Tutorial with Examples - Learn Text Color in CSS !
How do you change the text color of HTML elements using CSS?
This tutorial explains the `color` property in CSS, teaching you how to apply different text colors using various color formats. Learn how to enhance the readability and aesthetics of your web content.
CSS 'color' Property - Complete Beginner-Friendly Guide with Examples
The 'color' property in CSS is used to change the text color of HTML elements. It's one of the most basic and commonly used CSS properties.
Let's walk through everything step by step.
CSS 'color' Syntax
Syntax ✍
selector {
color: value;
}
You can use:
- Color names (e.g. red, blue)
- Hex codes (e.g. #ff0000)
- RGB values
- RGBA values (adds transparency)
CSS color with Examples
Using Color Name
html code 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: red;
}
</style>
</head>
<body>
<p class="text">This text is red.</p>
</body>
</html>
output 📌
This text is red.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Use predefined color names like 'red', 'blue', 'green', etc.
Using Hex Code
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: #3498db;
}
</style>
</head>
<body>
<p class="text">This text uses hex color #3498db.</p>
</body>
</html>
output 📌
This text uses hex color #3498db.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Hex codes are six-digit color values starting with '#'. It's great for design precision.
Using RGB
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: rgb(255, 165, 0);
}
</style>
</head>
<body>
<p class="text">This text is orange using RGB.</p>
</body>
</html>
output 📌
This text is orange using RGB.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
RGB stands for Red, Green, Blue. Each value ranges from 0 to 255.
Using RGBA (With Transparency)
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<p class="text">This text is black with 60% opacity.</p>
</body>
</html>
output 📌
This text is black with 60% opacity.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
RGBA adds the alpha value for opacity from 0 (transparent) to 1 (opaque).
Using HSL
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: hsl(120, 100%, 40%);
}
</style>
</head>
<body>
<p class="text">This text is green using HSL.</p>
</body>
</html>
output 📌
This text is green using HSL.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
HSL stands for Hue, Saturation, and Lightness. Easy for adjusting light or dark variations.
Related Tips
- Use 'color' for text, and 'background-color' for element background.
- Make sure text color contrasts well with background for better readability.
Conclusion
The 'color' property in CSS is simple yet powerful. Whether you're using basic names or advanced formats like RGBA and HSL, mastering text color lets you control the visual design of your content. Practice using different formats to see what works best in your designs.
Suggested Topics:
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
- HTML Class & ID Attribute Explained with Examples | Use Multiple Classes and IDs in One Tag
- CSS Syntax and Selectors Explained with Examples | Beginners Guide
Related Topics:
- CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
- CSS background-color Tutorial with Examples - Learn Easily
Frequently Asked Questions (FAQs)
What does the CSS 'color' property do?
It changes the text color of an HTML element.
Can I use any color name?
Yes. CSS supports over 140 color names like red, green, blue, orange, etc.
What's the difference between 'color' and 'background-color'?
'color' changes text, while 'background-color' changes the element's background.
What's RGBA used for?
RGBA lets you set color with transparency, helpful for subtle text or overlays.
Which color format is best?
Use hex for design consistency, RGB for full control, RGBA for transparency, and HSL for advanced color tuning.