Przewodnik po kolorach CSS w wysokiej rozdzielczości

CSS Color 4 udostępnia w internecie narzędzia i funkcje do obsługi kolorów o szerokim zakresie: więcej kolorów, funkcji manipulacji i lepszych gradientów.

Adam Argyle

Przez ponad 25 lat sRGB (standardowa czerwona zielona niebieska) była jedynym gamutem gradientów i kolorów w CSS, z takimi przestrzeniami barw jak rgb(), hsl() i hex. To najczęstszy mianownik dotyczący palety kolorów. Przyzwyczailiśmy się do określania w nim kolorów.

https://almanac.httparchive.org/pl/2022/css#colors

Ponieważ wyświetlacze coraz chętniej wyświetlają różne kolory, CSS potrzebuje sposobu, by określić kolory z tych szerszych zakresów. Obecne formaty kolorów nie mają języka dla szerokich zakresów kolorów.

Jeśli usługa porównywania cen nigdy nie zostanie zaktualizowana, będzie zawsze wyświetlać kolory w zakresie z lat 90. i nigdy nie będzie pasować do szerokiej gamy kolorów dostępnej w obrazach i filmach. Obraz z zawężeniem obrazu – tylko 30% kolorów widzianych przez ludzkie oko. Dziękujemy autorom Color Level 4 za pomoc w ucieczce. Głównymi autorami są Lea Verou i Chris Liley.

Chrome obsługuje gamę i przestrzenie kolorów CSS Color 4. CSS obsługuje teraz ekrany HD (o wysokiej rozdzielczości), które określają kolory z gamy różnej jakości HD, a jednocześnie oferują przestrzenie kolorów ze specjalizacjami.

Pokazano serię obrazów przechodzących z szerokiej na wąską paletę barw, aby zilustrować żywe kolory i ich efekty.
Spróbuj

Ten przewodnik składa się z 3 części. Czytaj dalej, aby dowiedzieć się, gdzie był kolor. Następnie przeczytaj, jakie zmiany czekają kolory, i dowiedz się, jak w przyszłości nimi zarządzać, przechodząc na kolor HD.

Omówienie

W obsługiwanych przeglądarkach masz o 50% więcej kolorów do wyboru. Jeśli 16 milionów kolorów wydawało Ci się dużo, poczekaj, aż zobaczysz, ile kolorów mogą wyświetlać niektóre z tych nowych przestrzeni. Pomyśl też o gradientach, które zostały zgrupowane, ponieważ nie było wystarczającej głębi bitowej. Ten problem też został rozwiązany.

Oprócz większej liczby kolorów, w tym najbardziej żywych kolorów, jakie wyświetlacz jest w stanie wyświetlić, nowe przestrzenie barw oferują unikalne narzędzia i metody zarządzania systemami kolorów oraz ich tworzenia. Na przykład wcześniej mieliśmy HSL i jego kanał „lightness”, który był najlepszym rozwiązaniem dla programistów. W CSS mamy „percepcyjną jasność” LCH.

Podgląd dla siebie na Codepen

Ponadto gradienty i mieszanie zostały ulepszone: obsługa przestrzeni barw, opcje interpolacji barwy i mniejsze paskowanie.

Poniższy obraz przedstawia niektóre ulepszenia miksowania.

Górne 2 kolory są w sRGB z kolorami sRGB. 2 dolne mieszanki kolorów są w profilu obrazu p3. Wyświetlacz p3 ma bardziej żywe kolory, a dzięki mieszankom efektu mieszanki uzyskasz czarno-biały na środku, gdzie sRGB wydaje się nieco pozbawione nasycenia, a mieszane kombinacje nie są czarno-białe.
https://codepen.io/web-dot-dev/pen/poZgXQb

Problem z kolorami i internetem polega na tym, że CSS nie obsługuje wysokiej rozdzielczości, podczas gdy wyświetlacze, które większość ludzi ma w kieszeniach, na kolanach lub zamontowane na ścianach, są wyświetlaczami o szerokim zakresie i wysokiej rozdzielczości. Możliwości kolorystyczne wyświetlaczy rozszerzały się szybciej niż CSS, a CSS nadąża za nimi.

To nie tylko „więcej kolorów”. Po przeczytaniu tych dokumentów będziesz mieć możliwość określania większej liczby kolorów, ulepszania gradientów i wybierania najlepszych przestrzeni barw oraz gamutów kolorów do poszczególnych zadań.

Co to jest przestrzeń barw?

Gama reprezentuje rozmiar czegoś. Wyrażenie „miliony kolorów” odnosi się do zakresu wyświetlacza, czyli do zakresu kolorów, z których może wybierać. Na poniższym obrazie porównano 3 gamuty. Im większy rozmiar, tym więcej kolorów.

Gama kolorów może też mieć nazwę. Jak piłka do koszykówki, baseball, filiżanka do bejsbola, filiżanka kawy vs. Grande – nazwa rozmiaru ułatwia komunikację. Poznanie tych nazw gamutów kolorów ułatwia komunikację i szybkie zrozumienie zakresu kolorów.

W tym artykule omówiliśmy poprzednie gamuty kolorów. Więcej informacji o 7 nowych gamach znajdziesz w artykule Dostęp do większej liczby kolorów i nowych przestrzeni.

Zakres barw widzialny dla człowieka

Gama kolorów jest często porównywana z gamą kolorów wizualnych, czyli z całą gamą kolorów, które naszym zdaniem widzi ludzkie oko. HVS jest często przedstawiane za pomocą schematu chromatyczności, jak w przykładzie:

Źródło: Wikipedia

Najbardziej zewnętrzny kształt to to, co widzimy jako ludzie, a wewnętrzny trójkąt to zakres funkcji rgb(), czyli przestrzeń kolorów sRGB.

Porównując rozmiary rozmaitych trójkątów, znajdziesz je poniżej. Jest to sposób, w jaki branża mówi o gamie kolorów i porównuje ją.

Czym jest przestrzeń barw?

Przestrzenie barw to uporządkowania gamutu, które określają kształt i sposób dostępu do kolorów. Wiele z nich to proste kształty 3D, np. sześciany lub cylindry. Takie rozmieszczenie kolorów określa, które kolory są obok siebie i jak będzie wyglądać dostęp do kolorów oraz ich interpolacja.

RGB to prostokątna przestrzeń kolorów, w której kolory są dostępne przez określenie współrzędnych na 3 osiach. HSL to cylindryczny model kolorów, w którym kolory są dostępne za pomocą kąta odcienia i współrzędnych na 2 osiach.

https://en.wikipedia.org/wiki/HSL_and_HSV

Specyfikacja poziomu 4 wprowadza 12 nowych przestrzeni kolorów do wyszukiwania kolorów. Dostępne są też 4 kolory:

• Hex
• RGB
• HSL
• HWB

Podsumowanie gamy kolorów i przestrzeni kolorów

Przestrzeń barw to mapowanie kolorów, a gamut to zakres kolorów. Gama kolorów to suma cząstek i przestrzeni kolorów jako butelka przeznaczona na ten zakres.

Oto interaktywna grafika Alexeya Ardova, która przedstawia przestrzenie barw. Wskaż, przeciągnij i powiększaj widok w tej wersji demonstracyjnej. Zmień przestrzeń kolorów, aby zobaczyć wizualizację innych pokoi.

• Używaj gamutów kolorów, aby mówić o zakresie kolorów, np. niskim lub wąskim zakresie w porównaniu z szerokim lub szerokim.
• Używaj przestrzeni barw, aby mówić o układzie kolorów, składni używanej do określania koloru, manipulowaniu kolorem i interpolacji kolorów.

Powyżej widać gamę sRGB cząstek dopasowaną do przestrzeni barw RGB w kostce. Źródło obrazu

Omówienie klasycznych przestrzeni kolorów {#classic-color-spaces}

CSS Color 4 zawiera wiele nowych funkcji i narzędzi do obsługi CSS i kolorów. Najpierw przypomnijmy, jak wyglądało kolorowanie przed wprowadzeniem tych nowych funkcji.

Od początku XXI w. w przypadku wszystkich właściwości CSS, które akceptują kolor jako wartość, można było używać: szesnastkowych (liczb szesnastkowych), rgb(), rgba(), nazwy, np. hotpink, lub słów kluczowych, np. currentColor.

Około 2010 r., w zależności od Twojej przeglądarki, CSS może używać kolorów hsl(). Następnie w 2017 roku pojawił się sześcian z alfa. Ostatnio przeglądarki zaczęły obsługiwać hwb().

Wszystkie te klasyczne przestrzenie kolorów odwołują się do kolorów w ramach tej samej gamy, sRGB.

HEX

Obsługa przeglądarek

• 1
• 12
• 1
• 1

Źródło

Szesnastkowy model kolorów określa wartości R, G, B i A za pomocą liczb szesnastkowych. Poniższe przykłady kodu pokazują wszystkie sposoby, w jakie ta składnia może określać plus przezroczystość koloru czerwonego, zielonego i niebieskiego.

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB

Obsługa przeglądarek

• 1
• 12
• 1
• 1

Źródło

Przestrzeń barw RGB zapewnia bezpośredni dostęp do kanałów czerwonego, zielonego i niebieskiego. Umożliwia określenie wartości od 0 do 255 lub wartości procentowej od 0 do 100. Ta składnia istniała przed wprowadzeniem normalizacji składni w specyfikacjach, więc w praktyce można spotkać składnię z przecinkiem i bez przecinka. Od teraz przecinki nie są już wymagane.

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / .5);

  --empty-channels: rgb(none none none);
}

HSL,

Obsługa przeglądarek

• 1
• 12
• 1
• 3.1

Źródło

HSL (nasycenie i jasność odcienia) to jedna z pierwszych przestrzeni kolorów dostosowanych do ludzkiego języka i komunikacji. Zawiera wszystkie kolory z zakresu sRGB, ale nie wymaga od mózgu znajomości sposobu oddziaływania na siebie kolorów czerwonego, zielonego i niebieskiego. Podobnie jak w przypadku RGB, składnia zawierała początkowo przecinki, ale od teraz nie są one już wymagane.

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

HWB

Obsługa przeglądarek

• 101
• 101
• 96
• 15

Źródło

Inną przestrzenią kolorów sRGB jest przestrzeń kolorów HWB (hue, whiteness, blackness), która opiera się na sposobie, w jaki ludzie opisują kolory. Autorzy mogą wybrać odcień i wymieszać go z białym lub czarnym, aby uzyskać pożądany kolor.

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

Dalsze kroki

Dowiedz się więcej o nowych przestrzeniach barw, ich syntaksach i narzędziach, a następnie dowiedz się, jak przejść na kolor HD.

Przestrzeń kolorów inna niż sRGB jest w internecie jeszcze mało popularna, ale z czasem zacznie być coraz częściej używana przez projektantów i programistów. Znajomość przestrzeni kolorów, na której zaprojektować system projektowania, to ważne narzędzie, które przydaje się twórcom. Każda przestrzeń kolorów ma unikalne cechy i powód, dla którego została dodana do specyfikacji CSS. Możesz zacząć od nich i w razie potrzeby dodać kolejne elementy.

Zasoby

Przeczytaj więcej artykułów na temat poziomu kolorów 5.

• Składnia kolorów względnych w CSS
• Składanka kolorów CSS

Dodatkowe informacje znajdziesz w internecie:

• CSS Color Module Level 4 firmy W3C

• CSS Color Module Level 5 firmy W3C

• Kolory LCH w CSS: co, dlaczego i jak?

• Lepsze niż Lab? Zmniejszenie zakresu: CIE Lab i OKLab

• W stronę bogatszych kolorów w internecie

• Okhsv i Okhsl: 2 nowe przestrzenie kolorów do wybierania kolorów

• Więcej informacji o barwach w Chromium (PDF)

• LCH to najlepsza przestrzeń kolorów.

• Projektowanie łatwo dostępnych systemów kolorów

• Przestrzenie kolorów, Hannah Weller

• Kolory o szerokiej gamie w CSS z Display-P3

• Przestrzeń barw CIE 1931

• Formaty kolorów w CSS

• Przestrzenie kolorów, Bartosz Ciechanowski

Narzędzia:

• afc163.github.io/color3d/
• Wizualizacja zakresu barw
• Generator żywych gradientów