21 grudnia 2022 • 6 min. czytania

Dlaczego użyć HSL w następnym systemie projektowania?

W tym wpisie przyjrzymy się różnym formatom kolorów. Porównamy najpopularniejsze dostępne w języku CSS: wartości hex, RGB i HSL. Dlaczego używać tego ostatniego?

Zaktualizowano: 21 grudnia 2022

Nie wiem czy wiesz, ale większość twojego mózgu odpowiedzialna jest za przetwarzanie wizualnych informacji. Mojego też. Większość naczelnych jest wzrokowcami. Połowa mózgu makaka królewskiego jest poświęcona widzeniu. Nasze oczy i mózgi tworzą wyrafinowane narzędzie, które pozwala wykrywać głębię, ruch i kolor. Kolor jest zaskakująco istotny dla naszego zrozumienia rzeczywistości. Spójrz na ten przykład.

Który element się wyróżnia? Ten o innym kolorze. Kolory mogą dzielić i łączyć, wyróżniać i ukrywać. Kontrastujące wartości mają tendencję do przyciągania uwagi, a kombinacja pobliskich odcieni zmiękcza poróżnienie elementów.

Wszystkie kolory są przyjaciółmi swoich sąsiadów i kochankami swoich przeciwieństw.

— Marc Chagall

Podstawowe elementy systemu projektowania

Tak jak przetwarzanie wizualne jest dużą częścią naszych mózgów, kolory są dużą częścią naszych systemów projektowania. Spędziłem więcej czasu wybierając kolory do mojej strony niż chciałbym przyznać. Ale po długich dywagacjach, eksperymentach i testach dostępności, wybrałem kilka kolorów. Moja paleta 1.0 była prosta. Zawierała kilka wartości hex dla tła, tekstów i głównego koloru z dwoma odcieniami. Moment - hex, co to takiego?

Kolory w sieci

Aby lepiej to zrozumieć, cofnijmy się na chwilę. Prawdopodobnie wiesz, że ekran na który patrzysz składa się z pikseli. Standardowy ekran Full HD (1920x1080) ma ich 2 073 600. Każdy piksel składa się z trzech mini diod LED: czerwonej, zielonej i niebieskiej. Tak, jest to uproszczenie, ale wystarczające.

W Internecie możemy je kontrolować za pomocą języka CSS. CSS wspiera wiele różnych formatów kolorów: wartości hex, rgb(), hsl(), rgba(), hsla(), nazwane kolory - lista jest długa. Ja skupię się na pierwszych trzech.

Wartości hex

Jak wspomniałem, na początku użyłem wartości hex. “Heksadecymalny kolor” jest prawdopodobnie najpopularniejszym sposobem deklarowania kolorów w Internecie. Heksadecymalny system jest podobny do standardowego systemu decymalnego, ale zamiast dziesięciu cyfr (0 - 9), używa ich szesnaście (0 - F). Litery reprezentują numery 10 - 15. W tej metodzie, kolejne cyfry heksadecymalne reprezentują każdy z podstawowych kolorów - czerwony, zielony i niebieski (które nazywane są kanałami). Kolory zatem mogą wyglądać tak.

CSS
1:root {
2  /* #RRGGBB */
3  --blue: #0000ff;
4  --black: #000000;
5  --yellow: #ffff00;
6}

Możesz kontrolować kolory zmieniając przypisaną im liczbę. Możesz stworzyć całą paletę mieszając i łącząc te podstawowe kolory - zupełnie jak na lekcji plastyki w klasie podstawowej. “Tak, jasne, ale w podstawówce nie potrzebowałem tego hexa-czegoś”.

RGB

Jeżeli nie podoba ci się system heksadecymalny, istnieje inny sposób deklarowania kolorów w CSS - RGB. Fundamentalnie działa w ten sam sposób - kontrolujesz każdy podstawowy kolor przy pomocy liczb. Jednakże zamiast używać heksadecymalnego systemu, używasz standardowego systemu decymalnego. Każdy kanał może przyjąć wartość od 0 do 255. Żeby być precyzyjnym - możesz utworzyć 16 777 216 kolorów. Jest specjalna metoda CSS do deklarowania kolorów w ten sposób.

CSS
1:root {
2  /* rgb(red, green, blue) */
3  --blue: rgb(0, 0, 255);
4  --black: rgb(0, 0, 0);
5  --yellow: rgb(255, 255, 0);
6}

Jest on trochę wygodniejszy niż wartości hex, bo przywykliśmy do systemu decymalnego. Nie jest on jednak intuicyjny. Nasz mózg nie postrzega tak kolorów. Gdy patrzysz na konkretny kolor, nie dzielisz go na czerwony, zielony i niebieski. I tu właśnie wchodzi HSL.

HSL

Ten format różni się znacząco od dwóch poprzednich. Jego nazwa jest również akronimem, ale oznacza: odcień (hue), nasycenie (saturation) i jasność (lightness). HSL działa podobnie do tego, jak my postrzegamy kolory - manipulując nimi przy pomocy nasycenia i jasności.

Wartość odcienia ustawia kolor. Kolory umieszczone są wokół koła, a każdy stopień koresponduje z innym odcieniem. Dlatego ta wartość może się wahać od 0 do 360. Wybrany kolor będzie bazą, którą możemy modyfikować za pomocą nasycenia i jasności.

Wartość nasycenia, opisuje w procentach, jak bardzo nasycony jest kolor. 0% oznacza, że będzie on szary. 100% wyświetla najbardziej żywą wersję danego odcienia. Całkowicie nasycony niebieski będzie niczym Serce Oceanu - naszyjnik Rose.

Wartość jasności opisuje intensywność oświetlenia. Ta wartość jest również wyrażana w procentach. 0% będzie wyglądał jak czarny, a 100% jak biały. Podobnie jak w prawdziwym życiu - gdy brakuje światła, wszystko wydaje się czarne.

W języku CSS również istnieje funkcja dla formatu HSL. Możemy odtworzyć kolory z naszych przykładów wykorzystując HSL.

CSS
1:root {
2  /* hsl(hue, saturation, lightness) */
3  --blue: hsl(240, 100, 50);
4  --black: hsl(0, 0, 0);
5  --yellow: hsl(60, 100, 50);
6}

Kolory w naszych przykładach są “czyste” dla uproszczenia, więc nasycenie wynosi 100%. Jednakże, zwykle chcemy je trochę zmiękczyć, bo mogą się wydawać nieprzyjemne dla oka.

Dlaczego używać HSL?

Zmiękczanie koloru wykorzystując HSL jest proste - wystarczy, że zmniejszysz nasycenie. Zmienianie jasności koloru jest porównywalnie proste. Wyobraź sobie typowy scenariusz - masz przycisk z kilkoma stanami: domyślny, hover, focus. Chcesz, aby jego kolor był ciemniejszy dla hover i focus. Osiągnięcie takiego efektu wykorzystując wartości hex wymagałoby ręcznego łączenia i testowania lub generowania odcieni koloru. Wykorzystując wartości hex, nadal nie byłoby jednak jasne, jak bardzo kolory się różnią. Wykorzystując HSL, możesz ustawić odcień i nasycenie, a następnie możesz nim manipulować procentami jasności. Różnica pomiędzy kolorami jest dostrzegalna na pierwszy rzut oka.

Jest to kolejna zaleta formatu HSL. Możesz z łatwością stopniować kolory. Wyobraź sobie sytuację, że twój design system się rozrasta i potrzebujesz więcej odcieni - dodanie ich jest proste. W moim przykładzie, zmienne CSS reprezentują kolejne warianty koloru.

CSS
1:root {
2  --color-primary-hue: 204;
3  --color-primary-saturation: 42%;
4  --color-primary: var(--color-primary-hue), var(--color-primary-saturation);
5  --color-primary-70: hsl(var(--color-primary), 57%);
6  --color-primary-60: hsl(var(--color-primary), 47%);
7  --color-primary-50: hsl(var(--color-primary), 37%);
8  --color-primary-40: hsl(var(--color-primary), 27%);
9  --color-primary-30: hsl(var(--color-primary), 17%);
10}

Zdjęcie poniżej pokazuje jak te kolory się wyświetlają.

Powyższy fragment kodu pokazuje siłę deklarowania zmiennych wykorzystując HSL - kompozycję. Możesz ustawić odcień i nasycenie jako zmienne i użyć ich ponownie w wielu miejscach. I to jest kod zgodny z zasadą DRY! Jestem zaskoczony, że to napiszę, ale powiedzmy, że nie lubimy już niebieskiego. Posłuchaliśmy Amy Winehouse i wracamy do czerni. Zmiana kolorów w naszym fragmencie kodu jest tak prosta, jak zmiana jednej liczby - nasycenia (na 0%)!

Podsumowanie

Jeżeli planujesz stworzyć system projektowania, rozważ użycie formatu HSL zamiast domyślnego RGB. Jest on bardziej intuicyjny i ułatwia skalowanie. HSL również pozwala na kompozycję i kalkulacje na kolorach. Jest to prawdopodobnie mój ostatni post w tym roku, zatem - wesołych świąt! Życzę wam wielu prezentów w czerwonych pudełkach, pod zieloną choinką przystrojoną niebieskimi lampkami 🎄