Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Notacja HSL

środa,

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ść.
Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły