9.1 Ways to Specify Color in CSS
Color plays a crucial role in web design and development. CSS provides several methods to specify colors, allowing developers to create attractive and intuitive interfaces. Below, we'll look at various ways to specify colors in CSS, including color models, transparency, gradients, and standard color functions.
Ways to specify color in CSS:
- Named colors
- Hexadecimal colors
- RGB and RGBA
- HSL and HSLA
- Gradients
- Transparency
9.2 RGB Color Model
The RGB (Red Green Blue) model defines color by mixing red, green, and blue colors. Each color is assigned a value from 0 to 255.
One byte can hold 256 values: from 0 to 255. 0 is the minimum value, 255 is the maximum.
Syntax:
color: rgb(255, 0, 0); /* Red */
color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */
Example:
body {
background-color: rgb(240, 248, 255); /* Background color: aliceblue */
}
9.3 HEX Color Model
HEX (Hexadecimal) represents color using hexadecimal values. Each value (RR, GG, BB) can range from 00 to FF.
One byte can hold 256 values: from 0 to 255. But when written in hex, they range from 0 — minimum value, to FF — maximum value.
Syntax:
color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */
Example:
h1 {
color: #4CAF50; /* Green */
}
9.4 HSL Color Model
HSL (Hue, Saturation, Lightness) represents color as a hue, saturation, and lightness. Hue is measured in degrees (0-360), saturation and lightness are measured in percentages (0%-100%).
Syntax:
color: hsl(0, 100%, 50%); /* Red */
color: hsl(120, 100%, 50%); /* Green */
color: hsl(240, 100%, 50%); /* Blue */
Example:
p {
color: hsl(210, 100%, 50%); /* Blue */
}
9.5 Transparency: RGBA and HSLA
To add transparency to colors, use the RGBA and HSLA models. These models add a fourth parameter — the alpha channel (Alpha), which determines the level of transparency from 0 (fully transparent) to 1 (fully opaque).
1. RGBA (Red, Green, Blue, Alpha):
Syntax:
color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
color: rgba(0, 255, 0, 0.3); /* Semi-transparent green */
color: rgba(0, 0, 255, 0.7); /* Semi-transparent blue */
Example:
div {
background-color: rgba(255, 99, 71, 0.6); /* Semi-transparent tomato */
}
2. HSLA (Hue, Saturation, Lightness, Alpha):
Syntax:
color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */
color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
color: hsla(240, 100%, 50%, 0.7); /* Semi-transparent blue */
Example:
span {
color: hsla(210, 100%, 50%, 0.8); /* Semi-transparent blue */
}
GO TO FULL VERSION