Day 2 - CSS Colors
Colors can be specified in CSS using different formats: Names, HEX codes, RGB, RGBA, and HSL.
1. Named Colors
CSS supports 140+ standard color names (e.g., red,
blue, coral).
Code:
/* CSS */
.named-red {
background-color: red;
}
.named-blue {
background-color: blue;
}
.named-green {
background-color: green;
}
/* HTML */
<div class="named-red">Red</div>
.named-red {
background-color: red;
}
.named-blue {
background-color: blue;
}
.named-green {
background-color: green;
}
/* HTML */
<div class="named-red">Red</div>
Output:
Red
Blue
Green
2. Hexadecimal Colors (#RRGGBB)
A hex code starts with a hash (#) followed by 6
characters (0-9, A-F).
- RR (Red), GG (Green), BB (Blue)
- 00 is the darkest (0), FF is the brightest (255)
Code:
/* CSS */
.hex-tomato {
background-color: #ff5733;
}
.hex-green {
background-color: #33ff57;
}
.hex-blue {
background-color: #3357ff;
}
.hex-tomato {
background-color: #ff5733;
}
.hex-green {
background-color: #33ff57;
}
.hex-blue {
background-color: #3357ff;
}
Output:
#ff5733
#33ff57
#3357ff
3. RGB Colors (Red, Green, Blue)
Uses the rgb(red, green, blue) function. Each parameter
uses a number between 0-255.
Code:
/* CSS */
.rgb-coral {
background-color: rgb(255, 99, 71);
}
.rgb-sea {
background-color: rgb(60, 179, 113);
}
.rgb-coral {
background-color: rgb(255, 99, 71);
}
.rgb-sea {
background-color: rgb(60, 179, 113);
}
Output:
rgb(255, 99, 71)
rgb(60, 179, 113)
rgb(100, 149, 237)
4. RGBA Colors (Alpha Channel)
Same as RGB, but with an Alpha channel (0.0 to 1.0) for transparency.
- 0.0 = Fully Transparent (Invisible)
- 1.0 = Fully Opaque (Solid)
Code:
/* CSS */
/* Solid */
.rgba-100 {
background-color: rgba(255, 0, 0, 1.0);
}
/* Semi-transparent */
.rgba-60 {
background-color: rgba(255, 0, 0, 0.6);
}
/* Very transparent */
.rgba-30 {
background-color: rgba(255, 0, 0, 0.3);
}
/* Solid */
.rgba-100 {
background-color: rgba(255, 0, 0, 1.0);
}
/* Semi-transparent */
.rgba-60 {
background-color: rgba(255, 0, 0, 0.6);
}
/* Very transparent */
.rgba-30 {
background-color: rgba(255, 0, 0, 0.3);
}
Output:
rgba(255, 0, 0, 1.0)
rgba(255, 0, 0, 0.6)
rgba(255, 0, 0, 0.3)
5. HSL (Hue, Saturation, Lightness)
Uses the hsl(hue, saturation%, lightness%) function.
- Hue: Degree on the color wheel (0=Red, 120=Green, 240=Blue).
- Saturation: 0% (Gray) to 100% (Full Color).
- Lightness: 0% (Black) to 100% (White).
Code:
/* CSS */
.hsl-red {
background-color: hsl(0, 100%, 50%);
}
.hsl-green {
background-color: hsl(120, 100%, 50%);
}
.hsl-blue {
background-color: hsl(240, 100%, 50%);
}
.hsl-red {
background-color: hsl(0, 100%, 50%);
}
.hsl-green {
background-color: hsl(120, 100%, 50%);
}
.hsl-blue {
background-color: hsl(240, 100%, 50%);
}
Output:
hsl(0, 100%, 50%)
hsl(120, 100%, 50%)
hsl(240, 100%, 50%)