Kolory LCH to przyszłość w CSS?

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).

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.

Wsparcie przeglądarek