3. Kolory CSS

W CSS kolory można wyrażać na wiele sposobów, np. za pomocą słów kluczowych, notacji szesnastkowej RGB (zwanej też heksadecymalną), czy kilku typów notacji funkcyjnej. W tym rozdziale znajduje się opis różnych metod definiowania kolorów w CSS oraz objaśnienie paru najważniejszych pojęć związanych z barwami i ich opisami w specyfikacjach.

Do najważniejszych pojęć związanych z definiowaniem kolorów w CSS, których znajomość pozwala dokładnie zrozumieć wszystkie opisy barw, zaliczają się kanał alfa, przestrzeń barw, koło barw, paleta barw, gamut oraz RGB.

Kanał alfa (ang. alpha channel)

Dodatkowy składnik definicji koloru, który określa poziom jego przezroczystości. Jego wartość może być wyrażona za pomocą liczby całkowitej lub ułamkowej albo procentowo. Przedziały wartości to 0–1.0 lub 0–100%. Wartość 0 oznacza całkowitą przezroczystość, a wartość 1.0 lub 100% oznacza całkowity brak przezroczystości. W CSS wartość kanału alfa zawsze jest podawana jako ostatni element definicji koloru.

Przestrzeń barw (ang. color space)

Ustandaryzowany model barw postrzeganych przez ludzkie oko. Obecnie najbardziej rozpowszechnioną przestrzenią barw jest model sRGB, który odwzorowuje około 30% barw światła widzialnego. Oprócz niego istnieje wiele innych przestrzeni barw, np. HSB, Lab itd.

Koło barw (ang. color wheel)

Poglądowy model przedstawiający sposób mieszania się kolorów, na którym ukazane jest cykliczne przechodzenie kolorów, zaczynając od barwy fioletowej (najmniejsza długość fal promieniowania widzialnego), w kolejne kolory z widma promieniowania widzialnego zgodnie z ruchem wskazówek zegara. Poniżej jest pokazane koło barw przestrzeni sRGB:

Źródło ilustracji: 8 leaf-clover, praca własna, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=113344793

Paleta barw (ang. color palette)

Zbiór kolorów, jakie można uzyskać w określonym środowisku.

Gamut (ang. gamut)

Procent pokrycia przez urządzenie przestrzeni barw, tzn. określenie jaką część danej przestrzeni dane urządzenie jest w stanie zaprezentować. Na przykład w opisach monitorów można znaleźć informacje typu „Gamut: Adobe RGB 99%” – to znaczy, że dany monitor jest w stanie odwzorować 99% barw należących do przestrzeni Adobe RGB.

RGB (ang. red, green, blue – czerwony, zielony, niebieski)

Trzy podstawowe barwy, z których poprzez mieszanie w odpowiednich proporcjach uzyskuje się wszystkie inne barwy reprezentowane przez dane urządzenie.

W specyfikacjach CSS w opisach własności wartości kolorów są oznaczane symbolem <color>, tzn. jego obecność w opisie wartości oznacza, że dana własność przyjmuje dowolną obsługiwaną przez CSS definicję koloru jako wartość.

Poniżej znajduje się lista dostępnych metod definiowania kolorów w CSS:

• Słowa kluczowe
• Notacja heksadecymalna (szesnastkowa)
• Notacja funkcyjna
  • Przestrzeń barw sRGB: hsl(), hwb(), rgb()
  • Przestrzeń barw CIE Lab: lab()
  • Przestrzeń barw LCH: lch()
  • Przestrzeń barw Oklab: oklab()
  • Przestrzeń barw Oklch: oklch()
  • Inne przestrzenie barw: color()
    • srgb-linear
    • display-p3
    • a98-rgb
    • prophoto-rgb
    • rec2020
    • xyz, xyz-d50, xyz-d65
• Zmieszanie dwóch kolorów: color-mix()

Słowa kluczowe

W CSS dostępne są trzy grupy słów kluczowych służących do określania kolorów. Najliczniejszą z nich stanowią nazwy kolorów, ale dodatkowo można używać tzw. kolorów systemowych oraz dwóch specjalnych słów kluczowych. Poniżej znajduje się opis ich wszystkich.

Nazwy kolorów CSS

Lista nazw kolorów w CSS jest bardzo długa. Ich zaletą jest to, że są czytelniejsze w kodzie źródłowym od innych sposobów zapisu. Na przykład nazwa koloru pink wygląda o wiele bardziej przyjaźnie niż jej odpowiednik w szesnastkowej notacji RGB #FFC0CB. Z kolei wadą nazw kolorów jest to, że ich liczba jest ograniczona i reprezentują one tylko bardzo niewielki podzbiór barw, jakich można używać w CSS.

Poniższa tabela zawiera wykaz nazw kolorów dostępnych w CSS wraz z ich próbkami.

W specyfikacjach CSS nazwy kolorów są oznaczane symbolem <named-color>.

Kolory systemowe CSS

Słowa kluczowe kolorów systemowych odnoszą się do różnych domyślnych ustawień na stronie internetowej zdefiniowanych przez użytkownika, przeglądarkę lub system operacyjny i dlatego zazwyczaj można je znaleźć w domyślnych arkuszach stylów przeglądarek internetowych. Reagują one także na zmiany trybu przeglądarki między jasnym i ciemnym.

Ponadto w odniesieniu do kolorów systemowych należy pamiętać o tym, że przeglądarka może działać w tzw. trybie wymuszania kolorów (ang. forced colors). Został on wprowadzony w celu zwiększenia dostępności stron internetowych dla użytkowników z wadami wzroku – niektóre z takich osób najlepiej rozpoznają tekst, kiedy tworzy on odpowiedni kontrast z tłem (po to właśnie między innymi istnieje tryb o wysokim kontraście w systemie Windows).

Tryb wymuszania kolorów chroni użytkowników z wadami wzroku przed zmianą ich własnych ustawień lub ustawień standardowego trybu o wysokim kontraście, którego używają, przez arkusze stylów autora strony, ponieważ ignoruje on ustawienia kolorów niektórych własności CSS zdefiniowanych przez autora.

Aby dostosować swój arkusz stylów do działania w trybie wymuszania kolorów, można użyć zapytania o media forced-colors:

@media (forced-colors: active) {
  ...
}

Za pomocą tego zapytania sprawdzamy, czy aktywny jest tryb wymuszania kolorów i jeśli tak, to odpowiednio dostosowujemy nasze reguły CSS.

Poniższa tabela zawiera wykaz dostępnych kolorów systemowych w CSS.

Słowa kluczowe transparent i currentcolor

W CSS dostępne są dwa dodatkowe słowa kluczowe kolorów: transparent i currentcolor.

Słowo kluczowe transparent reprezentuje kolor przezroczysty i jest odpowiednikiem wartości rgba(0,0,0,0).

Słowo kluczowe currentcolor reprezentuje wartość własności color danego elementu. Jest ono wartością początkową niektórych własności CSS, na przykład border-color czy text-emphasis-color, a więc za jego pomocą można sterować domyślnym ustawieniem tych własności.

Przestrzeń barw sRGB

Kolor w przestrzeni barw sRGB reprezentują trzy wartości, określające odpowiednio udział koloru czerwonego (ang. red), zielonego (ang. green) i niebieskiego (ang. blue) w kolorze wynikowym. W CSS są dostępne cztery metody definiowania kolorów w tej przestrzeni:

• Funkcje rgb() i rgba()
• Notacja szesnastkowa (heksadecymalna)
• Fukcje hsl() i hsla()
• Funkcja hwb()
• Słowa kluczowe nazw kolorów
• Słowo kluczowe transparent

Dwie ostatnie metody z tej listy zostały opisane powyżej, a poniżej znajduje się zwięły opis pozostałych.

Funkcje rgb() i rgba()

Funkcja CSS rgb() umożliwia zdefiniowanie koloru przez bezpośrednie określenie każdego ze składników RGB oraz ewentualnie dodatek wartości kanału alfa (określającego poziom przezroczystości) na końcu, po ukośniku, np.:

color: rgb(4 92 37 / 50%);

Składnia funkcji rgb():

rgb(R G B [/ alfa]);

Opis parametrów:

• R, G i B: składowe czerwona, zielona i niebieska. Wartością każdej z nich może być liczba całkowita lub ułamkowa z przedziału od 0 do 255 lub wartość procentowa z przedziału od 0 do 100%. Typów wartości nie można mieszać, tzn. wszystkie wartości muszą być typu liczbowego lub procentowego.
• alfa: opcjonalny składnik określający poziom przezroczystości koloru. Jego wartością może być liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa. Wartość 1 jest równoważna z wartością 100% i oznacza ona całkowity brak przezroczystości. Brak tego parametru oznacza jego ustawienie na 100%.

Funkcja rgba() jest starą wersją składni, która przyjmuje takie same parametry, jak funkcja rgb().

Ponadto dla zachowania zgodności wstecznej obsługiwana jest także stara wersja składni funkcji rgb(), w której parametry są rozdzielane przecinkami. Na przykład:

color: rgb(4, 92, 37, 50%);

Notacja szesnastkowa (heksadecymalna)

Notacja szesnastkowa, podobnie jak funkcje rgb() i rgba(), posługuje się systemem RGB. W jej przypadku kolory definiuje się za pomocą liczb szesnastkowych (heksadecymalnych). Choć bywa krytykowana za brak intuicyjności, wciąż jest bardzo często używana. Jej dokładniejszy opis znajduje się w Kursie HTML i CSS w podrozdziale Notacja szesnastkowa.

Funkcje hsl() i hsla()

Metoda RGB, mimo że bardzo rozpowszechniona, jest uważana za mało intuicyjną i trudną do zrozumienia przez człowieka. Dlatego opracowano kilka innych systemów definiowania kolorów, które mają na celu ułatwić dobór kolorów projektantom stron internetowych.

Do tej grupy należy między innymi notacja HSL (ang. hue, saturation, lightness – barwa, nasycenie, jasność), w której kolory definiuje się także za pomocą trzech składników, ale są to: barwa, nasycenie i jasność, np.:

color: hsl(143deg 91.7% 18.8% / 50%);

Składnia funkcji hsl():

hsl(H S L [/ alfa]);

Opis parametrów:

• H: liczba całkowita lub ułamkowa albo wartość kąta określająca punkt na kole barw przestrzeni sRGB. Liczba jest traktowana jako wartość kąta w stopniach.
• S: wartość procentowa określająca poziom nasycenia. Wartość 100% oznacza pełne nasycenie (żywy kolor), a 0 oznacza całkowity brak nasycenia (szarość).
• L: wartość procentowa określająca poziom jasności. Wartość 100% oznacza biel, 0 oznacza czerń, a 50% oznacza „normalną jasność”.
• alfa: opcjonalny składnik określający poziom przezroczystości koloru. Jego wartością może być liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa. Wartość 1 jest równoważna z wartością 100% i oznacza całkowity brak przezroczystości. Brak tego parametru oznacza jego ustawienie na 100%.

Funkcja hsla() jest starą wersją składni, która przyjmuje takie same parametry, jak funkcja hsl().

Ponadto dla zachowania zgodności wstecznej obsługiwana jest także stara wersja składni funkcji hsl(), w której parametry są rozdzielane przecinkami. Na przykład:

color: hsl(143deg, 91.7%, 18.8%, 50%);

Funkcja hwb()

Metoda HWB (ang. hue, whiteness, blackness – barwa, białość, czarność) jest podobna do HSL i również powstała, aby ułatwić definiowanie kolorów projektantom. W metodzie tej także kolor określa się przez podanie trzech wartości: barwy, poziomu bieli oraz poziomu czerni, np.:

hwb(142.5, 2%, 64% / 60%)

Składnia funkcji hwb():

hwb(H W B [/ alfa]);

Opis parametrów:

• H: liczba całkowita lub ułamkowa albo wartość kąta określające punkt na kole barw przestrzeni sRGB. Liczba jest traktowana jako wartość kąta w stopniach.
• W: wartość procentowa określająca poziom bieli. Wartość 0 oznacza brak bieli, a 100% – pełną biel.

• B: wartość procentowa określająca poziom czerni. Wartość 0 oznacza brak czerni, a 100% – pełną czerń.

• alfa: opcjonalny składnik określający poziom przezroczystości koloru. Jego wartością może być liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa. Wartość 1 jest równoważna z wartością 100% i oznacza całkowity brak przezroczystości. Brak tego parametru oznacza jego ustawienie na 100%.

Przestrzeń barw CIE Lab

Przestrzeń barw CIE Lab (spotykana jest też forma zapisu CIE L*a*b) to przestrzeń, która została znormalizowana przez Międzynarodową Komisję Oświetleniową (fr. Comission Internationale de l’Eclairage – CIE) w 1967 roku. Reprezentuje ona cały zakres kolorów widzianych przez ludzkie oko.

W przestrzeni tej definicja barwy składa się z trzech składowych: L (ang. lightness – jasność lub luminancja), a – barwa z zakresu od zieleni do magenty oraz b – barwa z zakresu od niebieskiej do żółtej.

W CSS kolory w przestrzeni barw CIE Lab można definiować za pomocą funkcji lab(), np.:

color: lab(33.5917% -36.8321 24.8525 / 60%);

Składnia funkcji lab():

lab(L a b [/ alfa]);

Opis parametrów:

• L: liczba całkowita lub ułamkowa z przedziału od 0 do 100 albo wartość procentowa z przedziału od 0 do 100% określająca poziom jasności. Wartość 0 odpowiada czerni, a wartość 100 (lub 100%) reprezentuje biel.
• a: liczba całkowita lub ułamkowa z przedziału od -125 do 125 albo wartość procentowa z przedziału od -100% do 100% określająca miejsce na osi a w przestrzeni barw Lab, która reprezentuje zakres barw od zielonej do magenty.
• b: liczba całkowita lub ułamkowa z przedziału od -125 do 125 albo wartość procentowa z przedziału od -100% do 100% określająca miejsce na osi b w przestrzeni barw Lab, która reprezentuje zakres barw od niebieskiej do żółtej.
• alfa: opcjonalny składnik określający poziom przezroczystości koloru. Jego wartością może być liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa. Wartość 1 jest równoważna z wartością 100% i oznacza całkowity brak przezroczystości. Brak tego parametru oznacza jego ustawienie na 100%.

Przestrzeń barw LCH

Przestrzeń barw LCH (ang. Luminance, Chroma, Hue) to kolejny model reprezentujący zakres kolorów postrzeganych przez ludzkie oko. Jest to model cylindryczny.

Do definiowania kolorów w tej przestrzeni służy funkcja lch(), która wykorzystuje tę samą oś jasności, co funkcja lab(), ale dodatkowo określa chromatyczność (C) i barwę (H) za pomocą współrzędnych polarnych, np.:

color: lch(33.5917 44.4326 145.9904 / 50%)

Składnia funkcji lch():

lch(L C H [/ alfa]);

Opis parametrów:

• L: liczba całkowita lub ułamkowa z przedziału od 0 do 100 albo wartość procentowa z przedziału od 0 do 100% określająca poziom jasności CIE. Wartość 0 odpowiada czerni, a wartość 100 (lub 100%) reprezentuje biel.
• C: liczba całkowita lub ułamkowa albo wartość procentowa, gdzie 0% oznacza 0, a 100% oznacza 150, określająca chromatyczność (w uproszczeniu „ilość koloru”). Minimalna użyteczna wartość wynosi 0. Maksymalna wartość jest teoretycznie nieograniczona, ale w praktyce nie przekracza 230.
• H: liczba całkowita lub ułamkowa albo wartość kątowa określająca kąt barwy.
• alfa: opcjonalny składnik określający poziom przezroczystości koloru. Jego wartością może być liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa. Wartość 1 jest równoważna z wartością 100% i oznacza całkowity brak przezroczystości. Brak tego parametru oznacza jego ustawienie na 100%.

Przestrzeń barw Oklab

Przestrzeń barw Oklab ma na celu naśladować sposób postrzegania kolorów przez ludzkie oko. Jest ona szersza od przestrzeni RGB, a jej gamut obejmuje kolory P3. Wśród jej najczęstszych zastosowań wymienia się przekształcanie obrazów na skalę szarości bez zmiany luminancji, modyfikację nasycenia kolorów bez zmiany barwy i luminancji oraz tworzenie płynnych gradientów.

Do definiowania kolorów w przestrzeni barw Oklab w CSS służy funkcja oklab(), która wykorzystuje kartezjański układ współrzędnych w tej przestrzeni, a więc osie a oraz b, np.:

color: oklab(41.5% -24.75% 14.75% / 50%)

Składnia funkcji oklab():

oklab(L a b[ / alfa])

Opis parametrów:

• L: liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa z przedziału od 0 do 100%. Wartość 0 odpowiada 0% (czerń), a wartość 1 odpowiada 100% (biel). Ten parametr określa jasność postrzeganą (ang. perceived lightness).
• a: liczba całkowita lub ułamkowa albo wartość procentowa z przedziału od -100% do 100%. Wartości -100% odpowiada wartość liczbowa -0.4, a wartości 100% odpowiada wartość liczbowa 0.4, ale można używać także wartości liczbowych spoza tego przedziału referencyjnego, choć w praktyce nie wychodzi się poza ±0,5. Ten parametr określa miejsce na osi a, czyli przesunięcie od zieleni ku czerwieni.
• b: liczba całkowita lub ułamkowa albo wartość procentowa z przedziału od -100% do 100%. Wartości -100% odpowiada wartość liczbowa -0.4, a wartości 100% odpowiada wartość liczbowa 0.4, ale można używać także wartości liczbowych spoza tego przedziału referencyjnego, choć w praktyce nie wychodzi się poza ±0,5. Ten parametr określa miejsce na osi b, czyli przesunięcie od niebieskiego do żółtego.
• alfa: opcjonalny składnik określający poziom przezroczystości koloru. Jego wartością może być liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa. Wartość 1 jest równoważna z wartością 100% i oznacza całkowity brak przezroczystości. Brak tego parametru oznacza jego ustawienie na 100%.

Przestrzeń barw Oklch

Oklch to kolejny model definowania kolorów dodany w module kolorów CSS4, który bazuje na ludzkiej percepcji. Do definiowania kolorów w tym modelu służy funkcja oklch(), np.:

color: oklch(41.5% 28.75% 148.95% / 50%);

Składnia funkcji oklch():

oklch(L C H [/ alfa])

Opis parametrów:

• L: liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa z przedziału od 0 do 100%. Wartość 0 odpowiada 0% (czerń), a wartość 1 odpowiada 100% (biel). Ten parametr określa jasność postrzeganą (ang. perceived lightness).
• a: liczba całkowita lub ułamkowa albo wartość procentowa z przedziału od 0% do 100%. Wartości 0% odpowiada wartość liczbowa 0, a wartości 100% odpowiada wartość liczbowa 0.4. Najmniejsza przydatna w praktyce wartość wynosi 0, a maksymalna wartość jest teoretycznie nieograniczona, chociaż w praktycznych zastosowaniach nie przekracza 0.5 (wartość ujemna jest skracana do zera). Ten parametr określa chromatyczność (czyli w uproszczeniu mówiąc „ilość koloru”).
• b: wartość kąta barwy. Różni się od analogicznej wartości funkcji hsl() i lch() sposobem odwzorowania barw na kąty. 0deg (podobnie jak 360deg, 720deg itd.) wskazuje na dodatnią stronę osi a (w kierunku fioletowoczerwonego), 90deg wskazuje na dodatnią stronę osi b (w kierunku musztardowożółtego), 180deg wskazuje na ujemną stronę osi a (w kierunku zielonawoniebieskiego), a 270deg wskazuje na ujemną stronę osi b (w kierunku jasnoniebieskiego).
• alfa: opcjonalny składnik określający poziom przezroczystości koloru. Jego wartością może być liczba całkowita lub ułamkowa z przedziału od 0 do 1 albo wartość procentowa. Wartość 1 jest równoważna z wartością 100% i oznacza całkowity brak przezroczystości. Brak tego parametru oznacza jego ustawienie na 100%.

Inne przestrzenie barw

Większość opisanych funkcji kolorów operuje w obrębie przestrzeni barw sRGB. Dlatego w CSS4 wprowadzono funkcję color(), która umożliwia korzystanie także z kilku innych przestrzeni barw. Dzięki temu projektant może definiować kolory np. w szerokiej przestrzeni barw Display-P3 albo standardowo używanej przez fotografów przestrzeni Rec.2020.

Składnia funkcji color():

color(przestrzeńbarw p1 p2 p3 [/ alfa])

Opis parametrów:

• przestrzeńbarw: identyfikator określający jedną z kilku dostępnych przestrzeni barw: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 oraz xyz-d65. Od wybranej przestrzeni zależy, jakie wartości mogą przyjmować następne parametry.
• p1, p2, p3: wartości definicji koloru w określonej przestrzeni barw.
• alfa: opcjonalny składnik określający poziom przezroczystości koloru.

Na przykład:

color: color(display-p3 0.1517 0.35504 0.17038);

Połączenie dwóch kolorów

W module kolorów CSS5 wprowadzono funkcję color-mix(), za pomocą której można zmieszać dwa kolory w określonych proporcjach i w wybranej przestrzeni barw, aby uzyskać nowy kolor, np.:

color-mix(in oklab shorter hue, green 60%, red);

Składnia funkcji color-mix():

color-mix(metoda, kolor1[ p1], kolor2[ p2])

Opis parametrów:

• metoda: metoda interpolacji kolorów w określonej przestrzeni barw. Ta wartość składa się z dwóch członów, z których drugi jest opcjonalny. Pierwszy człon (in przestrzeńbarw) określa przestrzeń barw, w której mają być mieszane kolory.

  Drugi człon określa algorytm interpolacji kolorów. Składa się on ze słowa shorter, longer, increasing lub decreasing oraz słowa hue.

• kolor1, kolor2: wartości kolorów do zmieszania zdefiniowane w dowolny sposób.
• p1, p2: wartość procentowa określająca udział danej barwy w kolorze wynikowym.

Wystarczy zdefiniować jeden z tych parametrów, a drugi zostanie obliczony automatycznie przez odjęcie go od 100%, np.: jeśli parametr p1 ma wartość 30%, to wartość parametru p2 wyniesie 100% – 30% czyli 70%.

Jeśli żaden z tych parametrów nie zostanie określony, to każdemu z nich zostanie nadana wartość 50%.

Jeśli natomiast suma wartości p1 i p2 jest mniejsza od 100%, to ich wartości są normalizowane do 100% wg następujących wzorów: p1 = p1 / (p1 + p2) i p2 = p2 / (p1 + p2).

Sprawdzanie obsługi przestrzeni barw

Aby sprawdzić, czy dana przeglądarka obsługuje interesującą nas przestrzeń barw, możemy użyć zapytania o media color-gamut, np.:

@media (color-gamut: p3) {
p {
    color(display-p3 0.1517 0.35504 0.17038);
  }
}

Dostępne są trzy wartości przestrzeni barw, których można używać w teście: srgb, p3 i rec2020.