Retour au cours

Lesson 18: Advanced Color: HSL and Transparency (Opacity)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

18. Advanced Color: HSL and Transparency

Beyond RGB, CSS offers powerful color models like HSL, which are often preferred for their readability and ease of manipulation.

HSL (Hue, Saturation, Lightness)

HSL describes colors in a way that is more intuitive to humans than RGB:

  1. Hue (0-360): The actual shade of the color (e.g., 0/360 is Red, 120 is Green, 240 is Blue).
  2. Saturation (0%-100%): How vibrant the color is (0% is grayscale, 100% is full color).
  3. Lightness (0%-100%): How bright the color is (0% is black, 100% is white, 50% is 'true' color).

HSLA adds the Alpha channel (opacity).

css /* Format: HSL(Hue, Saturation, Lightness) / .vibrant-blue { color: hsl(220, 80%, 45%); / Medium deep blue */ }

/* A light, muted green with 75% opacity */ .semi-transparent { background-color: hsla(100, 30%, 80%, 0.75); }

Advantage: Changing the saturation or lightness of an HSL color is easy without affecting the hue, making it perfect for creating color palettes (e.g., creating a lighter hover state).

The Opacity Property

The opacity property sets the transparency level for the entire element, including its content, children, and background.

  • Value ranges from 0.0 (fully transparent/invisible) to 1.0 (fully opaque).

css .faded-element { background-color: black; opacity: 0.5; /* The black background AND the text inside will be 50% transparent */ }

Note: If you only want the background to be transparent and the text to remain solid, always use rgba() or hsla(), not the global opacity property.