Odkrywamy składnię kolorów relatywnych w CSS: Przestrzenie barw HSL i Lab w globalnym projektowaniu stron internetowych

Świat projektowania stron internetowych nieustannie ewoluuje, a wraz z nim narzędzia i techniki, których używamy do tworzenia atrakcyjnych wizualnie i dostępnych doświadczeń. Jednym z najbardziej ekscytujących ostatnich dodatków do CSS jest składnia kolorów relatywnych. Ta potężna funkcja pozwala manipulować kolorami bezpośrednio w CSS, tworząc dynamiczne motywy, subtelne wariacje i dostępne projekty z większą łatwością i elastycznością. Ten artykuł zagłębia się w zawiłości składni kolorów relatywnych, ze szczególnym uwzględnieniem przestrzeni kolorów HSL i Lab, oraz sposobów ich wykorzystania w projektach na całym świecie.

Czym jest składnia kolorów relatywnych w CSS?

Przed wprowadzeniem składni kolorów relatywnych, manipulowanie kolorami w CSS często wymagało użycia preprocesorów, takich jak Sass czy Less, lub polegania na JavaScript. Składnia kolorów relatywnych zmienia to, umożliwiając modyfikację istniejących kolorów bezpośrednio w regułach CSS. Dzieje się tak poprzez odwołanie się do poszczególnych komponentów koloru (takich jak odcień, nasycenie i jasność w HSL) i stosowanie do nich operacji matematycznych. Oznacza to, że można rozjaśniać, przyciemniać, nasycać, desaturować lub zmieniać odcień koloru w oparciu o jego bieżącą wartość, wszystko to bez konieczności predefiniowania wielu wariantów kolorystycznych.

Składnia opiera się na funkcji color(), która pozwala określić przestrzeń kolorów (np. hsl, lab, lch, rgb lub oklab), kolor bazowy do modyfikacji oraz pożądane zmiany. Na przykład:

.element {
 color: color(hsl red calc(h + 30) s l);
}

Ten fragment kodu bierze kolor czerwony, używa przestrzeni kolorów hsl i zwiększa odcień o 30 stopni. Litery h, s i l reprezentują odpowiednio istniejące wartości odcienia, nasycenia i jasności. Funkcja calc() jest kluczowa do wykonywania operacji matematycznych.

Dlaczego HSL i Lab?

Chociaż składnia kolorów relatywnych działa z różnymi przestrzeniami kolorów, HSL i Lab oferują wyraźne korzyści w zakresie manipulacji kolorami i dostępności. Zobaczmy dlaczego:

HSL (Odcień, Nasycenie, Jasność)

HSL to cylindryczna przestrzeń kolorów, która intuicyjnie reprezentuje kolory w oparciu o ludzką percepcję. Jest definiowana przez trzy komponenty:

Odcień: Pozycja koloru na kole barw (0-360 stopni). Czerwony zazwyczaj znajduje się przy 0, zielony przy 120, a niebieski przy 240.
Nasycenie: Intensywność lub czystość koloru (0-100%). 0% to skala szarości, a 100% to pełne nasycenie.
Jasność: Postrzegana jasność koloru (0-100%). 0% to czerń, a 100% to biel.

Zalety HSL:

Intuicyjna manipulacja: HSL ułatwia dostosowywanie kolorów w oparciu o cechy percepcyjne. Zwiększenie jasności sprawia, że kolor staje się jaśniejszy, zmniejszenie nasycenia czyni go bardziej stonowanym, a zmiana odcienia przesuwa kolor na kole barw.
Tworzenie schematów kolorów: HSL upraszcza proces tworzenia harmonijnych schematów kolorów. Można łatwo generować kolory dopełniające (odcień + 180 stopni), analogiczne (odcienie blisko siebie) lub triadyczne (odcienie oddalone o 120 stopni).
Dynamiczne motywy: HSL jest idealne do tworzenia dynamicznych motywów. Można zdefiniować kolor bazowy, a następnie użyć składni kolorów relatywnych do generowania różnych wariantów dla trybu jasnego i ciemnego.

Przykład: Tworzenie motywu ciemnego

Załóżmy, że kolorem Twojej marki jest #007bff (żywy niebieski). Możesz użyć HSL do stworzenia motywu ciemnego, który zachowuje esencję marki, będąc jednocześnie łagodniejszym dla oczu w warunkach słabego oświetlenia.

:root {
 --brand-color: #007bff;
 --brand-color-hsl: color(oklch #007bff h s l);
 --bg-color: #fff;
 --text-color: #000;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #121212; /* Ciemnoszary */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Lekko desaturowany i rozjaśniony kolor marki */
 }
}

body {
 background-color: var(--bg-color);
 color: var(--text-color);
}

.brand-button {
 background-color: var(--brand-color);
 color: #fff;
}

W tym przykładzie sprawdzamy, czy użytkownik preferuje ciemny schemat kolorów. Jeśli tak, używamy składni kolorów relatywnych, aby lekko zdesaturować i rozjaśnić kolor marki dla lepszego kontrastu na ciemnym tle. Zapewnia to spójność tożsamości marki, jednocześnie poprawiając doświadczenie użytkownika w trybie ciemnym.

Lab (Jasność, a, b)

Lab (lub CIELAB) to przestrzeń kolorów zaprojektowana tak, aby była percepcyjnie jednolita. Oznacza to, że zmiana wartości koloru odpowiada podobnej zmianie w postrzeganej różnicy kolorów, niezależnie od koloru początkowego. Jest definiowana przez trzy komponenty:

L: Jasność (0-100%). 0 to czerń, a 100 to biel.
a: Pozycja na osi zielono-czerwonej. Wartości ujemne oznaczają zieleń, a dodatnie czerwień.
b: Pozycja na osi niebiesko-żółtej. Wartości ujemne oznaczają niebieski, a dodatnie żółty.

Zalety Lab:

Percepcyjna jednolitość: Percepcyjna jednolitość Lab sprawia, że jest to idealne rozwiązanie do zadań, w których kluczowe są dokładne różnice kolorów, takich jak korekcja kolorów i sprawdzanie dostępności.
Szeroki gamut: Lab może reprezentować szerszy zakres kolorów niż RGB czy HSL.
Dostępność: Lab jest często używany w obliczeniach dostępności, aby zapewnić wystarczający kontrast kolorów między tekstem a tłem. Wytyczne WCAG (Web Content Accessibility Guidelines) używają formuły opartej na luminancji względnej, która jest ściśle związana z przestrzenią kolorów Lab.

Przykład: Poprawa kontrastu kolorów dla dostępności

Zapewnienie wystarczającego kontrastu kolorów jest kluczowe dla dostępności. Załóżmy, że masz kolor tekstu i kolor tła, które nie do końca spełniają wymóg współczynnika kontrastu WCAG AA (4.5:1). Możesz użyć Lab, aby dostosować jasność koloru tekstu, aż spełni ten wymóg.

Uwaga: Chociaż bezpośrednie manipulowanie współczynnikiem kontrastu nie jest możliwe bezpośrednio w CSS za pomocą składni kolorów relatywnych, możemy jej użyć do dostosowania jasności, a następnie skorzystać z narzędzia do sprawdzania kontrastu, aby zweryfikować wynik.

.text {
 color: var(--text-color);
 background-color: var(--bg-color);
}

:root {
 --text-color: #333;
 --bg-color: #eee;
}

/*Przykład: To nie oblicza bezpośrednio współczynnika kontrastu.*/
/*To koncepcyjny przykład dostosowywania jasności*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* Rozjaśnij tekst o 10 jednostek. Będzie to miało efekt tylko do pewnego stopnia, jeśli wartość L koloru tekstu jest bliska 100. Aby przyciemnić, należałoby odjąć*/

}

W tym przykładzie próbujemy rozjaśnić kolor tekstu, aby poprawić kontrast. Ponieważ nie możemy obliczyć współczynnika kontrastu w CSS, musimy sprawdzić wynik po modyfikacji i w razie potrzeby go dopracować.

Oklab: Ulepszenie przestrzeni Lab

Oklab to stosunkowo nowa przestrzeń kolorów, zaprojektowana w celu rozwiązania niektórych postrzeganych wad Lab. Ma na celu osiągnięcie jeszcze lepszej percepcyjnej jednolitości, co ułatwia przewidywanie, jak zmiany wartości kolorów wpłyną na postrzegany kolor. W wielu przypadkach Oklab oferuje płynniejszy i bardziej naturalny sposób dostosowywania kolorów w porównaniu do Lab, zwłaszcza w przypadku nasycenia i jasności.

Używanie Oklab ze składnią kolorów relatywnych jest podobne do używania Lab. Wystarczy określić oklab jako przestrzeń kolorów:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*Rozjaśnij kolor o 10%*/
}

Praktyczne przykłady i przypadki użycia

Składnia kolorów relatywnych z HSL i Lab otwiera szeroki wachlarz możliwości w projektowaniu stron internetowych. Oto kilka praktycznych przykładów:

Generowanie palet kolorów: Stwórz kolor bazowy, a następnie wygeneruj paletę kolorów dopełniających, analogicznych lub triadycznych przy użyciu HSL.
Wyróżnianie elementów: Rozjaśnij lub przyciemnij kolor tła elementu po najechaniu kursorem lub po uzyskaniu fokusu, aby zapewnić wizualną informację zwrotną.
Tworzenie subtelnych wariacji: Dodaj niewielką zmianę odcienia lub nasycenia, aby stworzyć głębię i zainteresowanie wizualne.
Dynamiczne motywy: Zaimplementuj tryb jasny i ciemny lub pozwól użytkownikom dostosować schemat kolorów Twojej witryny.
Ulepszenia dostępności: Dostosuj kolory, aby zapewnić wystarczający kontrast dla użytkowników z wadami wzroku.

Przykład: Generowanie palety kolorów za pomocą HSL

:root {
 --base-color: #29abe2; /* Jasnoniebieski */
 --complementary-color: color(hsl var(--base-color) calc(h + 180) s l);
 --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l);
 --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l);
 --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l);
 --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l);
}

.base {
 background-color: var(--base-color);
}

.complementary {
 background-color: var(--complementary-color);
}

.analogous-1 {
 background-color: var(--analogous-color-1);
}

.analogous-2 {
 background-color: var(--analogous-color-2);
}

.triadic-1 {
 background-color: var(--triadic-color-1);
}

.triadic-2 {
 background-color: var(--triadic-color-2);
}

Ten przykład pokazuje, jak wygenerować paletę kolorów na podstawie jednego koloru bazowego przy użyciu HSL. Możesz łatwo dostosować ten kod, aby tworzyć różne harmonie kolorystyczne i dopasować je do swoich konkretnych potrzeb projektowych.

Przykład: Tworzenie efektu hover za pomocą Lab

.button {
 background-color: #4caf50; /* Zielony kolor */
 color: #fff;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button:hover {
 background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* Lekko rozjaśnij i zwiększ wartości a i b */
}

W tym przypadku używamy Lab, aby nieznacznie rozjaśnić i przesunąć kolor w kierunku czerwieni i żółci po najechaniu kursorem, tworząc subtelną, ale zauważalną informację zwrotną dla użytkownika.

Kompatybilność z przeglądarkami i rozwiązania zastępcze

Jak w przypadku każdej nowej funkcji CSS, kompatybilność z przeglądarkami jest ważnym czynnikiem. Składnia kolorów relatywnych jest obsługiwana w większości nowoczesnych przeglądarek, w tym Chrome, Firefox, Safari i Edge. Jednak starsze przeglądarki mogą jej nie obsługiwać.

Aby zapewnić działanie witryny we wszystkich przeglądarkach, niezbędne jest zapewnienie rozwiązań zastępczych (fallbacków) dla przeglądarek, które nie obsługują składni kolorów relatywnych. Można to zrobić, używając zmiennych CSS i reguły @supports.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* Kolor zastępczy */
}

@supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) {
 :root {
 --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* Użyj składni kolorów relatywnych, jeśli jest obsługiwana */
 }
}

.highlight {
 background-color: var(--highlight-color);
}

W tym przykładzie definiujemy kolor zastępczy (#33b5e5), a następnie używamy reguły @supports, aby sprawdzić, czy przeglądarka obsługuje składnię kolorów relatywnych. Jeśli tak, aktualizujemy zmienną --highlight-color kolorem wygenerowanym za pomocą tej składni. Gwarantuje to, że użytkownicy na starszych przeglądarkach nadal zobaczą wyróżniony element, nawet jeśli nie będzie on miał dokładnie tego samego koloru, co na nowszych przeglądarkach.

Kwestie dostępności

Chociaż składnia kolorów relatywnych może być potężnym narzędziem do tworzenia atrakcyjnych wizualnie projektów, kluczowe jest uwzględnienie dostępności. Upewnij się, że tworzone kombinacje kolorów zapewniają wystarczający kontrast dla użytkowników z wadami wzroku. Używaj narzędzi takich jak WebAIM Contrast Checker, aby sprawdzić, czy Twoje kombinacje kolorów spełniają wymagania współczynnika kontrastu WCAG AA lub AAA.

Pamiętaj, że postrzeganie kolorów może się znacznie różnić między poszczególnymi osobami. Rozważ przetestowanie swoich projektów z użytkownikami, którzy mają różne rodzaje ślepoty barw lub wad wzroku, aby upewnić się, że mogą oni łatwo postrzegać i wchodzić w interakcję z Twoją witryną.

Podsumowanie

Składnia kolorów relatywnych w CSS, zwłaszcza w połączeniu z przestrzeniami kolorów HSL i Lab, to prawdziwa rewolucja dla projektantów stron internetowych. Daje ona możliwość tworzenia dynamicznych motywów, subtelnych wariacji i dostępnych projektów z większą łatwością i elastycznością. Rozumiejąc zasady HSL i Lab oraz zapewniając rozwiązania zastępcze dla starszych przeglądarek, możesz wykorzystać tę potężną funkcję do tworzenia oszałamiających wizualnie i inkluzywnych doświadczeń dla użytkowników na całym świecie.

Wykorzystaj moc składni kolorów relatywnych i wznieś swoje umiejętności w projektowaniu stron internetowych na wyższy poziom. Eksperymentuj z różnymi przestrzeniami kolorów, operacjami matematycznymi i kwestiami dostępności, aby tworzyć strony, które są zarówno piękne, jak i dostępne dla wszystkich.

Dalsza nauka

Rozumiejąc i wykorzystując składnię kolorów relatywnych w CSS, możesz tworzyć bardziej dynamiczne, dostępne i atrakcyjne wizualnie strony internetowe, które zaspokoją potrzeby globalnej publiczności. Pamiętaj, aby zawsze priorytetowo traktować dostępność i doświadczenie użytkownika podczas projektowania z użyciem kolorów.