🎯 Learning Objectives

By the end of this lesson, students will understand:

Different color formats

1️⃣ CSS Colors

Color Formats

Format	Example	Notes
Name	`red`, `green`, `blue`	Basic colors
HEX	`#ff0000`	Very common
RGB	`rgb(255, 0, 0)`	Red, Green, Blue
RGBA	`rgba(255,0,0,0.5)`	Same + transparency
HSL	`hsl(0, 50%, 50%)`	Hue, Saturation, Lightness

1️⃣ Color Name

.box {
  background-color: red;
}

2️⃣ HEX Color

Full HEX (6 digits)

.box {
  background-color: #ff0000;
}

Short HEX (3 digits)

.box {
  background-color: #f00; /* same as #ff0000 */
}

3️⃣ RGB (Red, Green, Blue)

.box {
  background-color: rgb(255, 0, 0);
}

4️⃣ RGBA (RGB + Transparency / Alpha Channel)

.box {
  background-color: rgba(255, 0, 0, 0.5); /* 0.5 = 50% transparent */
}

5️⃣ HSL (Hue, Saturation, Lightness)

.box {
  background-color: hsl(0, 100%, 50%); /* red */
}

6️⃣ HSLA (HSL + Transparency)