Kolory HSL w CSS

Wprowadzenie

Model HSL opisuje kolor jako odcień (hue), nasycenie (saturation) i jasność (lightness).

---

Teoria / Wyjaśnienia

• Składnia: hsl(kat, nasycenie, jasnosc).
  • kąt (0–360) – odcień na kole barw,
  • nasycenie (%) – intensywność koloru,
  • jasność (%) – jak bardzo kolor jest jasny.
• Przykłady:
  • hsl(0, 100%, 50%) – czerwony,
  • hsl(120, 100%, 50%) – zielony,
  • hsl(240, 100%, 50%) – niebieski.

---

Praktyczne przykłady

Przykład

<p style="color: hsl(0, 100%, 50%);">Czerwony (HSL).</p>
<p style="color: hsl(200, 80%, 40%);">Chlodny niebieski (HSL).</p>
<p style="background-color: hsl(50, 100%, 50%);">Zolte tlo (HSL).</p>

---

Ćwiczenie

1. Zbuduj palete kolorow dla swojej strony przy uzyciu HSL.
2. Zmieniaj tylko jasnosc i nasycenie, aby tworzyc spokrewnione odcienie.
3. Zapisz kilka kombinacji, ktore dobrze do siebie pasuja.