LBweb Łukasz Bącik

#frontendowe spojrzenie na tworzenie stron www

Komentarze: 0

Kolory LCH to przyszłość w CSS?

Jednostki kolorów LCH są to nowe jednostki kolorów CSS, które są częścią specyfikacji CSS Color Level 4. Dają one dużo większe możliwości niż np. HEX czy RGB.

Co to za format?

Otóż kolory LCH są funkcją składającą się z trzech parametrów określającą sam kolor + czwarty parametr definiujący kanał alfa (przezroczystość).

Wykorzystanie LCH zapowiada się bardzo ciekawie i obiecująco, jeśli chodzi o jakość gradientów, np. conic-gradient.

Wraz z rozpoczęciem prac nad modułem 4 kolorów w CSS rozpoczęto prace nad nowymi jednostkami, które będą w stanie lepiej oddać jakość kolorów na nowoczesnych rodzajach ekranów.

Zatem przejdźmy do omówienia składowych formatu LCH.

color: lch(80%, 75%, 180deg);

Lightness (jasność)

Pierwszy z parametrów funkcji LCH określa jasność koloru. Wartości procentowe mogą być w przedziale od 0% (całkowicie czarny) do 100% (całkowicie biały).

jasność koloru wyrażona w procentach

Chroma (intensywność)

Parametr ten określa intensywność koloru. Im wyższa wartość, tym bardziej intensywny kolor. Wartości od 0, teoretycznie nie mają ograniczenia maksymalnego, ponieważ zależne jest to od typu ekranu urządzenia. Przykładem mogą tu być ekrany OLED lub Retina, które zapewnią dużo wyższą intensywność kolorów niż standardowe ekrany LCD.

HUE (barwa)

Trzeci z parametrów funkcji LCH określa konkretny odcień danego koloru. Wartości podajemy wyrażone w stopniach, od 0 do 360. Możemy to „zwizualizować” patrząc na obraz poniżej.

Alpha (opcjonalnie)

Ostatni (dodatkowy) parametr określa stopień transparentności koloru, począwszy od 0 (całkowicie przezroczysty) do 1 (pełny kolor). Można wyrażać to liczbowo (0-1) lub procentowo (0-100).

Wyższość nad innymi formatami

Chcąc pokazać wyraźną różnicę posłużę się tutaj przykładem gradientu wykonanego za pomocą 4 modeli barwowych.

porównanie gradientów w różnych modelach kolorów | źródło

Wsparcie przeglądarek

Póki co (styczeń 2023) jest słabo, bo tylko Safari oficjalnie wspiera kolory LCH.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *