Home 〉 CSS Tutorials 〉 CSS Colors Explained – HEX, RGB, RGBA, HSL, HSLA with Examples
CSS Colors Explained - HEX, RGB, RGBA, HSL, HSLA with Examples !
CSS Colors Explained - HEX, RGB, RGBA, HSL, HSLA with Examples !
Want to know about how to apply colors in CSS?
This tutorial covers various color formats in CSS, including HEX codes, RGB, RGBA, HSL, and HSLA. Understand the differences between these formats and learn how to use them to style your web elements effectively.
Introduction
Color is one of the most important aspects of web design. In CSS, you can apply colors using several different formats. In this guide, we’ll cover all major a CSS color types — step by step — with examples and meanings.
Types of CSS Color Values
- Color Names (e.g. 'red', 'blue')
- HEX Colors (e.g. '#ff0000')
- RGB Colors (e.g. 'rgb(255, 0, 0)')
- RGBA Colors (e.g. 'rgba(255, 0, 0, 0.5)')
- HSL Colors (e.g. 'hsl(0, 100%, 50%)')
Color Names
CSS supports over 140 named colors.
html code 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.color-name {
color: red;
}
</style>
</head>
<body>
<p class="color-name">This text is red using a color name.</p>
</body>
</html>
output 📌
This text is red using a color name.
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.
Explanation:
Just type the color name directly. Easy to remember, but limited to predefined options.
HEX Colors
HEX codes are written as '#RRGGBB'.
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.hex-color {
color: #00ff00;
}
</style>
</head>
<body>
<p class="hex-color">This text is green using a HEX code.</p>
</body>
</html>
output 📌
This text is green using a HEX code.
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.
Explanation:
'#00ff00' means 0 red, 255 green, and 0 blue.
RGB Colors
RGB stands for Red, Green, Blue.
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.rgb-color {
color: rgb(0, 0, 255);
}
</style>
</head>
<body>
<p class="rgb-color">This text is blue using RGB.</p>
</body>
</html>
output 📌
This text is blue 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.
Explanation:
Each value ranges from 0 to 255. RGB gives you more control than named colors.
RGBA Colors
Same as RGB, but with an alpha (transparency) value.
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.rgba-color {
background-color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<p class="rgba-color">This has a red background with 50% transparency.</p>
</body>
</html>
output 📌
This has a red background with 50% transparency.
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.
Explanation:
'a' stands for **alpha** — controls opacity (0 is transparent, 1 is fully opaque).
HSL Colors
HSL stands for Hue, Saturation, Lightness.
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.hsl-color {
color: hsl(120, 100%, 50%);
}
</style>
</head>
<body>
<p class="hsl-color">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.
Explanation:
- '120' is the hue (0 = red, 120 = green, 240 = blue)
- Saturation is color intensity (0% to 100%)
HSLA Colors
HSL with alpha for transparency.
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.hsla-color {
background-color: hsla(240, 100%, 50%, 0.3);
}
</style>
</head>
<body>
<p class="hsla-color">This has a transparent blue background using HSLA.</p>
</body>
</html>
output 📌
This has a transparent blue background using HSLA.
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.
Explanation:
HSLA is helpful when you want colors based on hue and control transparency too.
Conclusion
CSS offers many flexible ways to apply colors to your designs. Whether you use color names, HEX, RGB, or HSL, each method has its own use case.
Use:
- Named colors for simplicity.
- HEX for design precision.
- RGB/RGBA for dynamic styling.
- HSL/HSLA for better visual control and animations.
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
Related Topics:
- CSS Background Property with Examples - Learn Background Color, Image, Repeat, Size
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
Frequently Asked Questions (FAQs) - CSS Colors
1. What is the most used color format in CSS?
HEX and RGB are the most commonly used formats in modern web design.
2. What’s the difference between RGB and RGBA?
RGBA includes an alpha value for transparency, while RGB does not.
3. Can I use color names in all browsers?
Yes, standard color names are supported in all major browsers.
4. What is the best format for creating transparent backgrounds?
Use RGBA or HSLA for transparency control.
5. Which is better: HEX or RGB?
Both are fine. HEX is shorter; RGB gives more flexibility in scripts and dynamic changes.