Author
CSS Color is a property used to set the color of text, borders, backgrounds, and other elements on a web page. Colors can be represented in different formats: HEX, RGB, HSL, or by predefined keywords.
HEX Color Values
Definition: HEX (hexadecimal) colors are six-digit codes representing a combination of red, green, and blue (RGB). Each pair of digits ranges from 00 to FF (0–255 in decimal).
Format: #RRGGBB
Example:
p {
color: #ff5733; /* Orange-red color */
}
Advbantages :
#ff5733).#ffcc00 as #fc0.RGB Color Values
Definition: RGB colors define colors using the red, green, and blue components. Each component can have a value from 0 to 255.
Format: rgb(red, green, blue)
Example:
p {
color: rgb(255, 87, 51);
}
Advanced: RGBA adds an alpha channel for transparency.
p {
color: rgba(255, 87, 51, 0.5); /* 50% transparent orange-red */
}
Advantages:
HSL Color Values
Definition: HSL (Hue, Saturation, Lightness) represents colors in a way that is closer to how humans perceive color.
Format: hsl(hue, saturation%, lightness%)
Example:
p {
color: hsl(14, 100%, 60%);
}
Advantages:
Tip: You can also use HSLA to add transparency:
p {
color: hsla(14, 100%, 60%, 0.7); /* 70% opacity */
}
Color Keywords
Definition: CSS also supports named colors, which are predefined color keywords.
Example:
h1 {
color: darkgreen;
}
Advantages:
Limitations:
Comparing Color Types
| Color Type | Syntax Example | Advantages | Use Case |
|---|---|---|---|
| HEX | #ff5733 |
Compact, widely supported | Branding, exact colors |
| RGB | rgb(255, 87, 51) |
Precise, easy to adjust | Dynamic colors, transparency with RGBA |
| HSL | hsl(14, 100%, 60%) |
Human-friendly, easy lightness/saturation | Color palettes, gradients, responsive design |
| Keyword | darkgreen |
Easy, readable | Quick styling or prototypes |
CSS Colors Example with HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Colors Example</title>
<style>
/* HEX Colors */
h1 {
color: #ff5733; /* Bright orange-red */
}
/* RGB Colors */
h2 {
color: rgb(0, 128, 255); /* Blue text */
}
/* RGBA Colors (with transparency) */
p {
color: rgba(255, 87, 51, 0.8); /* Semi-transparent orange-red */
background-color: rgba(0, 0, 0, 0.1); /* Light transparent background */
padding: 10px;
}
/* HSL Colors */
span {
color: hsl(120, 60%, 40%); /* Dark green text */
font-weight: bold;
}
/* HSLA Colors */
div.overlay {
background-color: hsla(210, 50%, 50%, 0.5); /* Semi-transparent blue */
padding: 15px;
margin: 10px 0;
}
/* Color Keywords */
a {
color: darkorange; /* Keyword color for links */
text-decoration: none;
font-weight: bold;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0; /* HEX fallback for background */
}
</style>
</head>
<body>
<h1>HEX Color Example</h1>
<h2>RGB Color Example</h2>
<p>RGBA Color Example: This paragraph uses <span>semi-transparent text</span> over a transparent background.</p>
<div class="overlay">
HSLA Color Example: Semi-transparent blue box using HSLA.
</div>
<p>Color Keywords Example: <a href="#">Click Here</a> for more info.</p>
</body>
</html>Output :
