CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
CSS Colors
The color property in CSS is used to define the text color, text decoration color, and even the border color of HTML elements.
Syntax
selector {
color: value;
}
Example:
/* Set paragraph text color to dark green */
p {
color: darkgreen;
}
Color by Name
CSS supports named colors like blue , red , green , purple , black , white , and many more.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: teal;
}
</style>
</head>
<body>
<h2>Welcome to Learn With Arshyan</h2>
</body>
</html>
Color using Hexadecimal (#RRGGBB)
A hex code start with # followed by 6 characters representing red, green, and blue.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #1E90FF; /* Dodger Blue */
}
h2 {
color: #FF69B4; /* Hot Pink */
}
h3 {
color: #228B22; /* Forest Green */
}
</style>
</head>
<body>
<h1>Arshyan’s Courses</h1>
<h2>Explore New Skills</h2>
<h3>Grow Your Career</h3>
</body>
</html>
RGB – Red, Green, Blue
PGB values range from 0 to 225 for each color channel.
selector {
color: rgb(red, green, blue);
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: rgb(100, 100, 255); /* Light Blue */
}
</style>
</head>
<body>
<p>Learn With Arshyan – Let's Start Coding!</p>
</body>
</html>
RGBA – RGB with Opacity
RGBA adds an alpha value (opacity) from 0 (transparent) to 1 (opaque).
selector {
color: rgba(red, green, blue, alpha);
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: rgba(0, 128, 0, 0.6); /* Semi-transparent green */
}
</style>
</head>
<body>
<h2>Transparent Learning with Arshyan</h2>
</body>
</html>
HSL – Hue, Saturation, Lightness
HSL stands for:
- Hue (0-360): Color type (e.g., red, blue, green)
- Saturation (0%-100%): Color intensity
- Lightness (0%-100%): Lightness or darkness
selector {
color: hsl(hue, saturation, lightness);
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: hsl(150, 80%, 45%); /* Vibrant green */
}
</style>
</head>
<body>
<h1>Design Bright with Arshyan!</h1>
</body>
</html>
HSLA – HSL with Opacity
HSLA is HSL + alpha channel for transparency.
selector {
color: hsla(hue, saturation, lightness, alpha);
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: hsla(300, 70%, 50%, 0.5); /* Semi-transparent purple */
}
</style>
</head>
<body>
<p>Learning Never Looked So Soft</p>
</body>
</html>
Quick Tips
- Used named colors for quick styling.
- Prefer hex or RGB/HSL for precise control.
- Use RGBA or HSLA to create transparency effects.
- Color accessibility matters: ensure good contrast between text and background.