środa, 2023-12-27

CSS: Notacja HSL

Notacja HSL (Hue, Saturation, Lightness – odcień, nasycenie, jasność) w kaskadowych arkuszach stylów jest alternatywnym sposobem definiowania kolorów. Pozwala ona na łatwiejsze dostosowywanie i zmianę barw, opierając się na bardziej intuicyjnym podejściu do kolorów, niż w przypadku RGB oraz umożliwia łatwiejsze znalezienie harmonijnych kombinacji kolorów.

Format HSL

Notacja hsl() składa się z trzech wartości:

1. Hue (odcień): Reprezentuje kolor na kołowym modelu barw. Jego wartość jest określana w stopniach od 0 do 360°, gdzie każda wartość odpowiada innemu kolorowi (np. 0° lub 360° to czerwony, 120° to zielony, 240° to niebieski).
2. Saturation (nasycenie): Określa intensywność koloru. Jest to procent od 0% (całkowity brak koloru, szarość) do 100% (pełne nasycenie koloru).
3. Lightness (jasność): Określa, jak jasny jest kolor. 0% oznacza czarny, 100% biały, a 50% to pełny, czysty kolor.

Przykłady użycia

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

.hsl-green {
    background-color: hsl(120, 100%, 50%); /* Zielony */
}

.hsl-blue {
    background-color: hsl(240, 100%, 50%); /* Niebieski */
}

.hsl-light-blue {
    background-color: hsl(210, 100%, 75%); /* Jasny niebieski */
}

.hsl-dark-green {
    background-color: hsl(120, 100%, 25%); /* Ciemny zielony */
}

Palety kolorów HSL

Palety kolorów HSL są niesamowicie przydatne w projektowaniu, ponieważ pozwalają na tworzenie spójnych i estetycznie atrakcyjnych zestawów kolorów. Model HSL ułatwia rozumienie relacji między kolorami i ich modyfikację. W dalszej części znajdziesz kilka przykładów sposobów na tworzenie palet kolorów HSL.

1. Paleta monochromatyczna
   • Tworzenie: Wybierz jeden odcień (Hue) i zmieniaj nasycenie (Saturation) oraz jasność (Lightness) aby uzyskać różne warianty tego samego koloru.
   • Przykład: hsl(30, 100%, 50%), HSL(30, 80%, 60%), hsl(30, 60%, 70%)
2. Paleta analogowa
   • Tworzenie: Wybierz kolory, które są obok siebie na kole barw HSL. Zwykle różnią się one odcieniem o 30° do 60°.
   • Przykład: hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(90, 100%, 50%)
3. Paleta komplementarna
   • Tworzenie: Wybierz dwa kolory leżące naprzeciwko siebie na kole barw HSL (odcienie różniące się o 180°).
   • Przykład: hsl(30, 100%, 50%), hsl(210, 100%, 50%)
4. Paleta trójkolorowa
   • Tworzenie: Wybierz trzy kolory równomiernie rozmieszczone na kole barw (odcienie różniące się o 120°).
   • Przykład: hsl(30, 100%, 50%), hsl(150, 100%, 50%), hsl(270, 100%, 50%)
5. Paleta złożona (Split-Complementary)
   • Tworzenie: Oprócz koloru głównego, wybierz dwa dodatkowe, które są przybliżone do jego koloru komplementarnego.
   • Przykład: hsl(30, 100%, 50%), hsl(210, 100%, 30%), hsl(210, 100%, 70%)

Jak tworzyć palety?

• Aby zachować spójność, utrzymuj stałe nasycenie i jasność dla wszystkich kolorów w palecie, zmieniając tylko odcień.
• Zadbaj o odpowiedni kontrast między kolorami, szczególnie gdy są używane do tekstu i tła.
• Nie bój się eksperymentować z różnymi kombinacjami, aby znaleźć idealne dopasowanie dla swojego projektu.

Podsumowanie

• Odcień (Hue): Koło barw pozwala na łatwe wybieranie kolorów. Na przykład, przesunięcie odcienia o 30° może dać bardzo zbliżony, ale lekko różniący się kolor.
• Nasycenie i Jasność: Dzięki regulacji tych dwóch parametrów można uzyskać szeroki zakres odcieni tego samego koloru, od bardzo jasnych i subtelnych po ciemne i intensywne.
• Intuicyjność: HSL jest często postrzegany jako bardziej intuicyjny niż RGB, zwłaszcza w kwestii dostosowywania barw i odcieni.
• Palety kolorów: HSL ułatwia tworzenie harmonijnych palet kolorów, ponieważ odcień można łatwo zmieniać, utrzymując stałe nasycenie i jasność.