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
Przeczytaj także

CSS Container Queries już działa!
Container Queries już działa! Zapowiedzi potwierdziły się i mamy już możliwość korzystania z tego rozwiązania w najnowszych, stabilnych wersjach przeglądarek.

Nowa składnia media query w CSS
Budowanie nowoczesnego designu strony powinno być oparte o poprawne wypełnienie ekranu treścią i przedstawienie jej w efektowny sposób. Z pomocą przychodzi nam tutaj technika zwana @media query.

Piszemy chat Facebooka w CSS
Każdy użytkownik posiadający konto w popularnym serwisie społecznościowym Facebook zna to okienko. Mowa tutaj oczywiście o oknie wiadomości z innym użytkownikiem. Dzisiaj postaram się pokazać, jak zbudować taki czat w czystym CSS, bez zbędnych kombinacji. Zapraszam do lektury.