CSS Color 4 udostępnia w internecie szeroki zakres narzędzi i możliwości związanych z kolorami: więcej kolorów, funkcje manipulacji i lepsze gradienty.
Od ponad 25 lat sRGB (standardowy czerwony zielony zielony) jest jedyną gałązką gradientów i kolorów CSS, a jej przestrzeń dostępna jest np. w formacie rgb(), hsl() czy szesnastkowym. Jest to najczęstsza gama kolorów
na wyświetlaczach, która jest wspólnym mianownikiem. Przyzwyczailiśmy się do określania kolorów w ramach tej gamy.
W miarę jak wyświetlacze mogą pokazywać szeroki zakres kolorów, CSS potrzebuje sposobu na określanie kolorów z tych szerszych zakresów. Obecne formaty kolorów nie obsługują szerokich zakresów kolorów.
Gdyby CSS nie był aktualizowany, utknąłby w zakresie kolorów z lat 90. i nigdy nie pasował do szerokiego zakresu ofert dostępnych na obrazach i w filmach. Uwięziony, pokazywany tylko 30% kolorów, które widzi ludzkie oko. Dziękujemy CSS Color Level 4 za pomoc w ucieczce z tej pułapki. Autorzy głównie przez Lea Verou i Chrisa Liley.
Od Chrome w wersji 111 obsługiwane są gamy i przestrzenie kolorów CSS Color 4. Teraz przeglądarka Safari obsługuje usługę display-p3 od 2016 r. Usługi porównywania cen obsługują teraz wyświetlacze HD (o wysokiej rozdzielczości), określając kolory z gamy gamut HD, a także przestrzenie kolorów z określonymi specjalizacjami. Z tego przewodnika dowiesz się, jak zacząć korzystać z nowego świata kolorów.
Wypróbuj tę funkcję
W obsługiwanych przeglądarkach dostępnych jest o 50% więcej kolorów. Wydawało Ci się, że 16 milionów kolorów to tyle. Zaczekaj, aż zobaczysz, ile kolorów może pokazać się w nowych przestrzeniach. Pomyślcie też o gradientach, które pasowały do pasów z powodu zbyt małej ilości bitów.
Oprócz większej ilości kolorów, prawdopodobnie najbardziej żywych kolorów wyświetlacza, nowe przestrzenie kolorów zapewniają wyjątkowe narzędzia i metody tworzenia systemów kolorów i zarządzania nimi. Wcześniej mieliśmy na przykład HSL i kanał „Lightness”, który okazał się najlepszy dla programistów. Teraz w CSS mamy „perceptualną jasność” firmy LCH.
Gradienty i mieszanie są też udoskonalone: obsługa przestrzeni kolorów, opcje interpolacji kolorów i mniej pasków. Poniższy przykład przedstawia niektóre uaktualnienia mieszania. Dwie górne mieszaniny kolorów są w sRGB. Dwie dolne mieszanki kolorów są w Display p3. Wyświetlacz P3 ma bardziej żywe kolory, a mieszaniny dają pełną czerń i biel w środku. Miejsca, w których sRGB wygląda na nieco nienasycone, a miksy pośrodku to niepełne czarne lub białe wyniki.
https://codepen.io/web-dot-dev/pen/poZgXQb
W tym przewodniku omówimy, gdzie jest kolor, gdzie się on pojawia oraz jak CSS umożliwi deweloperom stron internetowych zarządzanie kolorem.
Przegląd
Problem z kolorami i internetem polega na tym, że CSS nie jest gotowy w wysokiej rozdzielczości, a wyświetlacze, które większość ludzi ma w kieszeniach, na nogach lub montowanych na ścianach, są gotowe w wysokiej rozdzielczości. Możliwości kolorów wyświetlaczy pojawiły się szybciej niż CSS, ale CSS nadąża za zmianami.
To nie tylko „więcej kolorów”. Po zakończeniu tego artykułu dowiesz się, jak określić więcej kolorów, ulepszyć gradienty oraz wybrać najlepsze przestrzenie i gamy kolorów dla każdego zadania.
Czym jest gama kolorów?
Gama reprezentuje rozmiar czegoś. Wyrażenie „miliony kolorów” to komentarz na temat gamy wyświetlacza lub zakresu kolorów do wyboru. Na ilustracji poniżej porównano 3 gamy kolorów, a im większy rozmiar, tym więcej kolorów.
Gama kolorów też może mieć nazwę. Może to być np. różnica między piłką nożną a piłkarzykiem czy filiżanką kawy z dużą aurą i dużym rozmiarem. Nazwa rozmiaru ułatwia użytkownikom komunikację. Znajomość nazw gamy kolorów ułatwia komunikowanie się i szybkie interpretowanie różnych kolorów.
W tym artykule omówimy 7 nowych zakresów, z których każdy jest szerszy niż sRGB, i opisujemy ich różne funkcje, aby ułatwić Ci wybór:
Gama wzrokowa
Gama kolorów jest często porównywana z gamyą wzrokową człowieka, która według nas jest w stanie dostrzec całe oko. HVS jest często przedstawiana za pomocą schematu chromatyczności:
Najbardziej zewnętrzny kształt jest widoczny dla ludzi, a wewnętrzny trójkąt to zakres funkcji rgb(), czyli przestrzeń kolorów sRGB.
Tak jak widać powyżej trójkąty, porównamy ich rozmiary. Jest to sposób komunikacji i porównywania gamy kolorów.
Czym jest przestrzeń kolorów?
Przestrzenie kolorów to układy gamy, które tworzą kształt oraz sposób dostępu do kolorów. Wiele z nich to proste kształty 3D, takie jak sześciany lub walce. Ta aranżacja kolorów określa, które kolory są obok siebie, oraz sposób, w jaki działa dostęp do kolorów i ich interpolacja.
RGB to prostokątna przestrzeń kolorów, w której dostęp do kolorów można uzyskać po określeniu współrzędnych na 3 osiach. HSL to walcowa przestrzeń kolorów, w której kolory są dostępne na podstawie kąta odcienia i współrzędnych na 2 osiach
Specyfikacja poziomu 4 wprowadza 12 nowych przestrzeni kolorów, które pozwalają wyszukiwać kolory spośród 7 udostępnionych wcześniej:
- Liniowy sRGB
- LCH
- okLCH
- Laboratorium
- okLAB
- Displayowe P3
- Rec2020
- A98 RGB
- ProPhoto RGB
- XYZ
- XYZ d50
- XYZ d65
Są one uzupełnieniem 4 przestrzeni kolorów, które były wcześniej dostępne:
Podsumowanie Gama kolorów i przestrzeni kolorów
Przestrzeń barw to przyporządkowanie kolorów, w ramach której gama kolorów to zakres kolorów. Gama kolorów to zbiór cząstek i przestrzeń kolorów jako butelka do przechowywania tego zakresu cząstek.
Oto interaktywna wizualizacja, której autorem jest Alexey Ardov, która przedstawia przestrzenie kolorów. Wskaż, przeciągnij i powiększ widok w tej wersji demonstracyjnej. Zmień przestrzeń kolorów, aby zobaczyć wizualizację innych przestrzeni.
- Używaj gatunków kolorów, aby dyskutować o różnych kolorach, np. niskim lub wąskim zakresie w porównaniu z wysokim lub szerokim.
- Używaj przestrzeni kolorów, aby mówić o układach kolorów, składni stosowanej do określania koloru, manipulowaniu kolorem i interpolacji koloru.
Jak uzyskać dostęp do większej liczby kolorów, nowych spacji i wyników debugowania
Kolor 4: szereg nowych funkcji i narzędzi CSS oraz kolorów. Najpierw przypomnijmy, gdzie były kolory przed wprowadzeniem nowych funkcji. Następnie omówienie nowych przestrzeni kolorów, składni i narzędzi.
Następujący program Codepen pokazuje razem wszystkie nowe i stare składni kolorów:
Przegląd klasycznych przestrzeni kolorów
Od początku XXI wieku można używać tych właściwości CSS, które akceptują kolor jako wartość: rgb()rgba()hotpinkcurrentColor
Około 2010 roku, w zależności od tego, jakiej przeglądarki używasz, CSS może używać kolorów hsl(). Następnie w 2017 r. pojawiła się funkcja szesnastkowa z alfa. Dopiero niedawno usługa hwb() zaczęła obsługiwać przeglądarki.
Wszystkie te klasyczne przestrzenie kolorów odwołują się do kolorów w ramach tej samej gamy, czyli sRGB.
Szesnastkowy
Wartość szesnastkowa kolorów określa R, G, B i A przy użyciu liczb szesnastkowych. Poniższe przykłady kodu ilustrują wszystkie sposoby, w jakie ta składnia może określać kolor czerwony, zielony i niebieski oraz przezroczystość.
.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,
Przestrzeń kolorów RGB obejmuje bezpośredni dostęp do kanałów czerwonego, zielonego i niebieskiego. Możesz podać wartość z zakresu od 0 do 255 lub procentowo od 0 do 100. Taka składnia była dostępna, zanim w specyfikacjach pojawiła się normalizacja składni, dlatego po prostu stosują się do niej przecinki i bez przecinków. 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% / 50%);
--empty-channels: rgb(none none none);
}
HSL,
HSL (nasycenie i jasność barw) to jedna z pierwszych przestrzeni kolorów, która pozwala lepiej zrozumieć ludzki język i komunikację. Zapewnia wszystkie kolory z gamy sRGB, nie wymagając przy tym mózgu, aby oddziaływać na czerwony, zielony i niebieski. Podobnie jak w przypadku RGB, pierwotnie definicja również miała w składni przecinki, ale 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
Kolejna przestrzeń kolorów sRGB ukierunkowana na to, jak ludzie opisują kolor, to HWB (odcień, biel, czerń). Autorzy mogą wybrać odcień i zmieszać ze sobą biel lub czerń, aby znaleźć odpowiedni 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%);
}
Poznaj nowe przestrzenie kolorów w internecie
Poniższe przestrzenie kolorów dają dostęp do większej gamy kolorów niż sRGB. Przestrzeń kolorów wyświetlacza p3 oferuje prawie dwa razy więcej kolorów niż RGB, podczas gdy w rec2020 jest ich prawie dwa razy więcej niż w standardzie P3. Tuż sporo kolorów!
Funkcja color()
Nowej funkcji color() można używać w przypadku dowolnej przestrzeni kolorów, która określa kolory za pomocą kanałów R, G i B. color() najpierw przyjmuje parametr przestrzeni kolorów, a następnie serię wartości kanałów dla RGB i opcjonalnie część alfa.
Wiele nowych przestrzeni kolorów korzysta z tej funkcji, ponieważ funkcje specjalistyczne, takie jak rgb, srgb, hsl, hwb itp., stają się coraz dłuższe, dzięki czemu przestrzeń kolorów może być parametrem.
Zalety
- Znormalizowana przestrzeń dostępu do przestrzeni kolorów korzystających z kanałów RGB.
- Możliwość skalowania w górę do dowolnej przestrzeni kolorów RGB o szerokim zakresie.
Wady
- Nie działa z HSL, HWB, LCH, okLCH ani okLAB
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB za pomocą funkcji color()
Ta przestrzeń kolorów oferuje te same funkcje co rgb(). Dodatkowo zawiera on ułamki dziesiętne z zakresu od 0 do 1 używane dokładnie tak jak 0%–100%.
Zalety
- Prawie wszystkie wyświetlacze obsługują zakres tej przestrzeni kolorów.
- Pomoc dotycząca narzędzi do projektowania.
Wady
- Niezauważalnie liniowy (jak np.
lch()) - Brak szerokiej gamy kolorów.
- Gradienty często przechodzą przez martwą strefę.
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
Liniowy sRGB za pomocą funkcji color()
Ta liniowa alternatywa dla RGB oferuje przewidywalną intensywność kanałów.
Zalety
- Bezpośredni dostęp do kanałów RGB przydaje się np. w silnikach gier czy pokazach świetlnych.
Wady
- Nie jest postrzegany jako liniowy.
- Na krawędziach jest czarny i biały.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Gradienty zostały szczegółowo omówione później, ale szybko można zobaczyć, jak czarno-białe są gradienty srgb i linear-srgb, które ilustrują różnice między nimi:
LEK
Pierwsza część tego posta omawiająca składnię dostępu do kolorów spoza zakresu RGB. Jest to również pierwsza usługa, która bardzo ułatwia realizację gamy kolorów wyświetlacza. Dzieje się tak, ponieważ dowolne kolory kosmosu CIE (lch, oklch, lab, oklab) mogą reprezentować całe widmo kolorów widocznych dla człowieka.
Ta przestrzeń kolorów jest modelowana na podstawie wzroku człowieka i oferuje składnię, która pozwala określić m.in. te kolory. Kanały LCH to jasność, kolor i barwa. Odcień jest kątem, na przykład w HSL i HWB. Jasność jest wartością z zakresu od 0 do 100. Nie jest tak jednak jak w przypadku HSL, jest to szczególny, „perceptutycznie liniowy” światło skupiony na człowieku. Chroma jest podobna do nasycenia – może się mieścić w przedziale od 0 do 230, ale jest nieograniczona technicznie.
Zalety
- Przewidywalna manipulacja kolorami dzięki percepcyjności, przeważnie liniowa (patrz oklch).
- Wykorzystuje znane kanały.
- Często ma żywe gradienty.
Wady
- Łatwo wychodzisz z szerokiej gamy.
- W rzadkich przypadkach gradient może wymagać dostosowania punktu środkowego, by zapobiec zmianie barwy.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
MODUŁ
Kolejna przestrzeń kolorów zapewniająca dostęp do gamy CIE, ponownie z wymiarem postrzeganej jasności (L). Oceny A i B w laboratorium to unikalne osie ludzkiego rozpoznawania barw: czerwony-zielony i niebiesko-żółty. Gdy A ma wartość dodatnią, dodaje czerwony, a gdy jest mniejszy, dodaje zielony. Gdy podasz liczbę dodatnią, B doda wartość żółtą, a wartości ujemne – w kierunku niebieskiego.
Zalety
- Idealnie spójne gradienty.
- Wysoki zakres dynamiczny.
Wady
- Potencjał zmiany odcienia.
- Trudno powiedzieć autorowi lub odgadnąć kolor podczas odczytywania wartości.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
Ta przestrzeń kolorów jest korektyw według LCH. Podobnie jak LCH (LCH) nadal reprezentuje liniową jasność, C – barwa, a H – barwę.
To dość znajome rozwiązanie, jeśli zdarzyło Ci się już pracować z HSL lub LCH. Wybierz kąt na kole kolorów dla efektu H oraz stopień jasności i ciemności, dostosowując wartość L. Następnie mamy efekt chromatyzujący, który nie jest nasycony. Są one dosyć podobne, z tym że korekta jasności i kolorów zwykle występuje parami. Poza tym łatwo jest poprosić o wysokie nasycenie, które wykraczają poza docelową gamę kolorów.
Zalety
- Odcienie niebieskiego i fioletowego to żaden niespodzianka.
- Perspektywnie liniowa jasność.
- Wykorzystuje znane kanały.
- Wysoki zakres dynamiczny.
- Ma nowoczesny selektor kolorów – marka Evil Martians.
Wady
- Łatwo wychodzisz z szerokiej gamy.
- Nowe i stosunkowo nieodkryte.
- Za mało selektorów kolorów.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
Ten obszar został poprawiony w LAB. Uznaje się, że jest to przestrzeń zoptymalizowana pod kątem jakości przetwarzania obrazu, co w przypadku CSS oznacza jakość gradientów i manipulacji funkcjami kolorów.
Zalety
- Domyślna przestrzeń na animacje i interpolacje.
- Perspektywnie liniowa jasność.
- Bez zmiany odcienia jak w laboratorium.
- Idealnie spójne gradienty.
Wady
- Nowe i stosunkowo nieodkryte.
- Za mało selektorów kolorów.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Sieć reklamowa P3
Przestrzeń barw i gama wyświetlaczy P3 stały się popularne od czasu, gdy Apple obsługiwał je na iMacu od 2015 roku. Firma Apple również od 2016 roku obsługiwała protokół display-p3 na stronach internetowych w ramach CSS, czyli o 5 lat przed każdą inną przeglądarką. Jeśli używasz przestrzeni kolorów sRGB, jest to świetna przestrzeń do pracy przy przenoszeniu stylów do wyższego zakresu dynamicznego.
Zalety
- Świetna obsługa, uznawana za podstawę w przypadku wyświetlaczy HDR.
- O 50% więcej kolorów niż w przypadku sRGB.
- Narzędzia deweloperskie zapewniają doskonały selektor kolorów.
Wady
- Z czasem zostaną one przekroczone przez przestrzenie Rec2020 i CIE.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 wchodzi w skład produkcji UHDTV (telewizorów ultrawysokiej rozdzielczości), oferując szeroką gamę kolorów do wykorzystania w rozdzielczości 4K i 8K. Rec2020 to kolejny obszar oparty na podświetleniu RGB większy niż w przypadku wyświetlacza P3, ale nie tak powszechny jak Display P3.
Zalety
- Kolory Ultra HD.
Wady
- (jeszcze niezbyt częste) wśród konsumentów.
- Rzadko się one pojawiają w urządzeniach mobilnych lub tabletach.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB
Format A98 RGB (skrót od Adobe 1998 RGB) został stworzona przez firmę Adobe i umożliwia korzystanie z większości kolorów osiągalnych na drukarkach CMYK. Oferuje więcej kolorów niż sRGB, zwłaszcza w odcieniach cyjanowych i zielonych.
Zalety
- Większe niż przestrzenie kolorów sRGB i Display P3.
Wady
- To nie jest wspólna przestrzeń, w której pracują projektanci treści cyfrowych.
- Niewiele osób przenosi palety z CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProPhoto – RGB
Ta szeroka gama kolorów stworzona przez Kodak oferuje niezwykle szeroki zakres kolorów podstawowych i minimalne zmiany odcienia przy zmianie jasności. Twierdzi również, że pokrywa 100% rzeczywistych kolorów powierzchni, co opisał Michael Pointer w 1980 r.
Zalety
- Minimalna zmiana odcienia przy zmianie jasności.
- Żywe kolory podstawowe.
Wady
- Około 13% oferowanych kolorów jest wymyślonych, co oznacza, że nie mieści się w ich spektrum widzialnym dla człowieka.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
Przestrzeń kolorów CIE XYZ obejmuje wszystkie kolory, które są widoczne dla osoby ze średnio wzrokiem. Dlatego jest używany jako standardowy odniesienie do innych przestrzeni kolorów. Y to luminancja, X i Z to możliwe kolory w obrębie podanej luminancji.
Różnica między modelami d50 i d65 stanowi punkt bieli, gdzie model d50 używa punktów bieli z d50, a d65 – punktu bieli D65.
Zalety
- Dostęp linearny oświetleniowy ma przydatne zastosowania.
- Doskonałe do fizycznego mieszania kolorów.
Wady
- Nie są postrzegane jako liniowy, jak lch, oklch, lab i oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Niestandardowe przestrzenie kolorów
Specyfikacja CSS Color 5 również zawiera ścieżkę do uczenia przeglądarki niestandardowej przestrzeni kolorów. Jest to profil ICC, który informuje przeglądarkę, jak rozpoznać kolory.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Po wczytaniu możesz uzyskać dostęp do kolorów z tego profilu niestandardowego za pomocą funkcji color() i określić dla niego wartości kanału.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Interpolacja kolorów
Przejście z jednego koloru na drugi dotyczy animacji, gradientów i mieszania kolorów. To przejście jest zwykle określone jako kolor początkowy i końcowy, gdzie przeglądarka ma się między nimi interpolować. Interpolacja w tym przypadku oznacza generowanie serii między kolorami w celu utworzenia płynnego przejścia zamiast przejścia błyskawicznego.
W przypadku gradientu interpolacja składa się z serii kolorów wzdłuż kształtu. Animacja zmienia się w serię kolorów na przestrzeni czasu.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Dzięki gradientowi kolory pośrednie są wyświetlane jednocześnie:
Nowości w interpolacji kolorów
Dzięki dodaniu nowych gamy i przestrzeni kolorów pojawiają się nowe opcje interpolacji. Zmiana koloru in hsl z niebieskiego na biały znacznie różni się od sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Nie widzisz demonstracji Codepen?
Co się stanie, jeśli przejdziesz z koloru w jednej przestrzeni do koloru w zupełnie innej:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Nie widzisz demonstracji Codepen?
Na szczęście w specyfikacji Kolor 4 znajdują się instrukcje dla przeglądarek na temat obsługi interpolacji przestrzeni kolorów. W powyższym przypadku .gradient przeglądarki zauważą rozróżniające przestrzenie kolorów i użyją domyślnej przestrzeni kolorów oklab.
Może się wydawać, że przeglądarka użyje lch jako przestrzeni kolorów, ponieważ jest to pierwszy kolor, ale tak nie jest. Dlatego pokazujemy drugi gradient porównawczy .lch. Gradient .lch jest gradientem z przestrzeni kolorów lch.
Mniej pasów dzięki 16-bitowemu kolorowi
Do tej pory wszystkie kolory były zapisywane w jednej 32-bitowej liczbie całkowitej, która reprezentuje wszystkie 4 kanały: czerwony, zielony, niebieski i alfa. Jest to 8 bitów na kanał i 2^ 24 możliwych kolorów (z pominięciem kanału alfa). 2 ^ 24 = 16 777 216, „miliony kolorów”.
Po zastosowaniu tego koloru każdy kanał ma własną liczbę zmiennoprzecinkową (4 16-bitowe wartości zmiennoprzecinkowe). To 64-bitowa część danych, co daje znacznie ponad miliony kolorów.
Ta zmiana jest niezbędna do obsługi koloru HD. Zwiększa to ilość informacji o kolorach, które można zapisać, co ma przyjemny efekt uboczny – oznacza, że przeglądarka może wykorzystać więcej kolorów w gradiencie.
Gradientowe pasy mają miejsce, gdy kolor jest niewystarczający do utworzenia gładkiego gradientu i „paski” koloru stają się widoczne. Stosowanie pasów na ekranie jest znacznie zmniejszane przez przejście na wyższą rozdzielczość.
Sterowanie interpolacją
Najkrótsza odległość między dwoma punktami jest zawsze linią prostą. Dzięki interpolacji kolorów przeglądarki domyślnie wybierają krótszą trasę. Przeanalizujmy scenariusz, w którym w cylindrze kolorów HSL znajdują się 2 punkty. Gradient uzyskuje swoje kroki koloru, podróżując wzdłuż linii między dwoma punktami.
linear-gradient(to right, #94e99c, #e06242)
Widok z góry na walcę HSL z linią między granicami kolorów
Powyższa linia gradientu przechodzi prosto między kolorem zielonym a czerwonym i przebiega przez środek przestrzeni kolorów. Powyższe informacje pomagają w zrozumieniu problemu, ale nie pokazują dokładnie, co się dzieje. Oto gradient w Codepen. Pośrodku wyraźnie nie jest on biały, jak pokazano na przykładzie.
Środkowy obszar gradientu stracił jednak swój intensywność. Dzieje się tak, ponieważ najżywsze kolory znajdują się na krawędzi kształtu przestrzeni kolorów, a nie w środku, w pobliżu której znajduje się interpolacja. Strefa ta jest często nazywana „strefą martwą”. Jest kilka sposobów, aby to naprawić lub obejść.
Określ więcej poziomów gradientu, aby uniknąć martwej strefy
Metodą unikania obecnie martwej strefy jest dodanie do gradientu dodatkowych ograniczników barw, które celowo kierują interpolacją tak, aby utrzymać się w pełnych zakresach kolorów w przestrzeni kolorów. Można tu obejść ten problem, bo dodatkowe przystanki pomagają go ominąć.
Erik Kennedy oferuje narzędzie gradientu, które oblicza za Ciebie dodatkowe ograniczenia kolorów, aby pomóc Ci uniknąć martwej strefy nawet w przestrzeniach kolorów, które skłaniają do grawitacji. Po użyciu tej funkcji przekazanie tych samych kolorów z pierwszego przykładu, ale zmianę interpolacji kolorów na HSL, daje to taki efekt:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Widok z góry na walcę HSL z zakrzywioną linią i 9 stopniami kolorów
W przypadku punktów pośrednich interpolacja nie jest już linią prostą, lecz krzywą wokół martwej strefy, pomagając utrzymać nasycenie, uzyskując w efekcie znacznie intensywniejszy gradient.
Narzędzie działa świetnie, ale co by było, gdybyście mogli mieć podobną lub większą kontrolę bezpośrednio w CSS?
Kierowanie interpolacji kolorów
W kolorze 4 dodaliśmy możliwość kontrolowania strategii interpolacji barw, która zapewnia nowy sposób obchodzenia (:wink:) martwej strefy. Weź pod uwagę kąt barwy i rozważ gradient dwustopniowy, który tylko zmieni kąt, zmieniając na przykład odcień z 140deg na 240deg.
Interpolacja odcienia: krótsza lub dłuższa
Gradient będzie domyślnie korzystać z trasy shorter, chyba że określisz dla niego trasę longer. Opcje interpolacji odcieni kierują kąt obrotu, na przykład mówiąc użytkownikowi, że powinien skręcać w lewo, a nie w prawo (hej, Zoolander):
W powyższym wizualnym przykładzie odległości interpolacji barw symulowano krótszą i długą ścieżkę, aby zilustrować różnicę. Krótka odległość ma mniej odcieni, ponieważ została pokonana przez najmniejszą możliwą odległość.
Interpolacja barwna zwiększająca lub zmniejszająca
W kolorze 4 są jeszcze dwie strategie interpolacji barw, ale są one stosowane tylko w cylindrycznej przestrzeni kolorów. Przy pozostawieniu 2 kolorów z poprzednich przykładów wizualizacja pokazuje teraz, jak działa zwiększanie i zmniejszanie.
Powyższy kod Codepen wykorzystał ColorJS, aby zademonstrować oczekiwany wynik. Kod CSS, który osiągniesz taki sam efekt bez biblioteki JavaScriptu, to:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Aby zakończyć interpolację barw, przygotowaliśmy zabawną zabawę, w której możesz zmieniać odcień z 2 stopni i obserwować efekty wyboru interpolacji barw oraz wpływ przestrzeni kolorów na wyniki gradientu. Efekty mogą być bardzo różne. Potraktuj to jak 4 nowe sztuczki, które właśnie pojawiły się na Twoim pasku narzędzi.
Gradienty w różnych przestrzeniach kolorów
Każda przestrzeń kolorów, ze względu na jej unikalny kształt i układ kolorów, daje inny gradient. Przyjrzyj się przykładom poniżej, zwłaszcza w przypadku haseł „niebieski na biały”. Przyjrzyj się, jak każda przestrzeń kolorów radzi sobie z tą różnicą. Zwróć uwagę, ile z nich ma kolor fioletowy w środku. Jest to tzw. „zmiana barwy” podczas interpolacji.
Nie widzisz demonstracji Codepen?
Pokazany obraz to tylko jeden z wielu przykładów z Codepen. Warto wypróbować podgląd Canary lub Safari Tech Preview, aby się o tym przekonać.
Niektóre gradienty w tych przestrzeniach będą bardziej żywe od innych lub będą rzadziej przechodzić przez martwe strefy.
Pokoje takie jak lab pakują kolory ze sobą w sposób zoptymalizowany pod kątem nasycenia, w przeciwieństwie do pokoi, w których człowiek pisze kolory – tak jak hwb().
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
Powyższa analiza demograficzna jest subtelna, ale pokazuje bardziej spójną interpolację z laboratorium. Składnia modułu lab nie jest jednak łatwa do odczytania. W przypadku RGB lub hsl występują liczby ujemne. Mamy dobrą wiadomość: możemy użyć hwb, by zachować znajomą składnię, ale poprosić o całkowitą interpolację gradientu w innej przestrzeni kolorów, np. oklab.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Nie widzisz demonstracji Codepen?
W tym przykładzie użyto tych samych kolorów w hwb, ale określamy przestrzeń kolorów na potrzeby interpolacji na hwb lub oklab. hwb to doskonała przestrzeń kolorów dla intensywnych, ale potencjalnie niewidocznych stref martwych i jasnych punktów (zobacz przykład w przypadku błękitnego punktu). Ta funkcja jest bardzo fajna, bo możesz wypróbować kilka różnych przestrzeni kolorów,
aby zobaczyć, który gradient podoba Ci się najbardziej.
Oto program Codepen, który eksperymentuje z gradientami i przestrzeniami kolorów oraz udostępnia strategie mieszania i dopasowania, aby zbadać dostępne możliwości. Nawet przejście z czerni do bieli jest inne w każdej przestrzeni kolorów!
Nie widzisz demonstracji Codepen?
Ograniczanie zakresu gamut
Istnieją sytuacje, w których kolor może prosić o coś spoza zakresu. Weź pod uwagę ten kolor:
rgb(300 255 255)
Maksymalna wartość kanału koloru w przestrzeni kolorów rgb to 255, a tutaj określono 300 dla czerwonego. Co się dzieje Ograniczanie zakresu gamut.
Ograniczanie ma miejsce, gdy dodatkowe informacje są po prostu usuwane. 300 stanie się wewnętrznie 255 dla silnika kolorów. Kolor został zamknięty w odpowiednim miejscu.
Wybieranie przestrzeni kolorów
Wiele osób po zapoznaniu się z przestrzenią barw i ich efektami czuje się przytłoczona i chce wiedzieć, którą z nich wybrać. W moich badaniach i doświadczeniach nie uważam za jedną przestrzeń kolorów jako jedną przestrzeń dla wszystkich moich zadań. W każdym z nich są momenty, w których przynosi pożądane rezultaty.
Gdyby tylko było jedno najlepsze miejsce, nie byłoby tak wiele nowych miejsc.
Mogę jednak powiedzieć, że miejsca CIE – lab, oklab, lch i oklch to moje pierwsze miejsca. Jeśli wynik nie będzie satysfakcjonujący, sprawdzę
inne pokoje. W przypadku mieszania kolorów i tworzenia gradientów zgadzam się z domyślnym wyborem specyfikacji oklab. Jeśli chodzi o systemy kolorów i ogólne kolory interfejsu, wolę oklch.
Oto kilka artykułów, w których użytkownicy podzielili się swoimi zaktualizowanymi strategiami kolorystycznymi w związku z nowymi przestrzeniami barw i funkcjami. Np. Andrey Sitnik wzięł wszystko pod uwagęoklch i być może przekona Cię do zrobienia tego samego:
- OKLCH w CSS: dlaczego zrezygnowaliśmy z RGB i HSL – Andrey Sitnik
- Color Formats Autor: Josh W. Comeau
- OK, OKLCH, autor: Chris Coyier
Migracja do koloru CSS HD
Istnieją 2 główne strategie aktualizowania koloru projektu internetowego pod kątem obsługi wyświetlaczy o szerokiej gamie:
Wyraźna degradacja
Wykorzystaj nową przestrzeń kolorów i pozwól przeglądarce i systemowi operacyjnemu określić, jaki kolor wyświetlać w zależności od możliwości wyświetlacza.Stopniowe ulepszanie
Za pomocą@supportsi@mediamożesz ocenić możliwości przeglądarki użytkownika i jeśli zostaną spełnione warunki, podaj kolory z szerokiej gamy.
Jeśli przeglądarka nie rozpoznaje koloru display-p3:
color: red;
color: color(display-p3 1 0 0);
Jeśli przeglądarka rozpoznaje kolor display-p3:
color: red;
color: color(display-p3 1 0 0);
Każda z nich ma swoje wady i zalety. Oto krótka lista wad i zalet:
Proste pogorszenie
- Zalety:
- Najprostszą trasą.
- Przeglądarka musi zmapować lub ograniczyć zakres do sRGB, jeśli nie ma szerokiego zakresu, więc odpowiedzialność za to ponoszą przeglądarka.
- Wady
- Przeglądarka może dopasować zakres lub gamę kolorów do koloru, który Ci się nie podoba.
- Przeglądarka może nie rozpoznać żądania koloru i całkowicie się nie udać. Można to jednak ograniczyć, określając kolor dwukrotnie, umożliwiając kaskadzie przejście do poprzedniego rozpoznawanego koloru.
Stopniowe ulepszanie
- Zalety:
- Większa kontrola dzięki zarządzanej wierności kolorów.
- Strategia dodawania, która nie ma wpływu na bieżące kolory.
- Wady
- Musisz zarządzać 2 oddzielnymi składniami kolorów.
- Musisz zarządzać 2 oddzielnymi zakresami kolorów.
Sprawdzam obsługę gamy i przestrzeni kolorów
Przeglądarka umożliwia sprawdzenie obsługi szerokiej gamy funkcji i składni kolorów z kodów CSS i JavaScript. Nie udostępniamy dokładnej gamy kolorów określonych przez użytkownika. W ten sposób zapewniamy uogólnioną odpowiedź, która pozwala zachować prywatność. Dostępna jest jednak dokładna obsługa przestrzeni kolorów, ponieważ nie zależy od możliwości sprzętu użytkownika, takich jak gamut.
Zapytania dotyczące pomocy w zakresie kolorów
Poniższe przykłady kodu umożliwiają sprawdzenie zakresu kolorów na wyświetlaczu użytkownika.
Sprawdzam w usłudze porównywania cen
Najmniej szczegółowe zapytanie do zespołu pomocy to zapytanie o media dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Pytania o media color-gamut można zadawać w przybliżeniu, a także w innych przypadkach:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Możesz też przesłać 2 dodatkowe zapytania o media w związku z kontaktem z zespołem pomocy:
Sprawdzanie na podstawie JavaScriptu
W przypadku JavaScriptu funkcję window.matchMedia() można wywołać i przekazać do oceny zapytanie o multimedia.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Powyższy wzorzec można skopiować do pozostałych zapytań o media.
Zapytania dotyczące obsługi przestrzeni kolorów
Poniższe przykłady kodu sprawdzają przeglądarkę użytkownika odwiedzającego i wybór przestrzeni kolorów, z którymi chce pracować.
Sprawdzam w usłudze porównywania cen
Indywidualną pomoc dotyczącą przestrzeni kolorów można uzyskać, wysyłając zapytanie @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Sprawdzanie na podstawie JavaScriptu
W przypadku JavaScriptu funkcję CSS.supports() można wywołać i przekazać parę właściwość-wartość, aby sprawdzić, czy przeglądarka ją rozpozna.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Łączenie testów dotyczących sprzętu i analizowania
Czekając na wdrożenie nowych funkcji kolorów przez każdą przeglądarkę, warto sprawdzić zarówno sprzęt, jak i możliwości analizy kolorów. Najczęściej używam tego podczas stopniowego poprawiania kolorów do wysokiej rozdzielczości:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Debugowanie koloru za pomocą Narzędzi deweloperskich w Chrome
Zaktualizowaliśmy Narzędzia deweloperskie w Chrome i zawierają nowe narzędzia, które ułatwiają programistom tworzenie, konwertowanie i debugowanie kolorów HD.
Zaktualizowano selektor kolorów
Selektor kolorów obsługuje teraz wszystkie nowe przestrzenie kolorów. Pozwala autorom na interakcję z wartościami kanału tak, jak byli byli.
Granice gamuta
Dodano również linię gamutu, rysując linię między gamutami Srgb i Display-P3. Wyraźnie widać gamę kolorów, w których znajduje się wybrany kolor.
Pomoże to autorom wizualnie odróżnić kolory HD od kolorów w innych.
Jest on szczególnie przydatny podczas pracy z funkcją color() i nowymi przestrzeniami kolorów, ponieważ pozwalają one wyświetlać kolory zarówno w jakości innej niż HD, jak i HD. Jeśli chcesz sprawdzić gamy kolorów, otwórz selektor kolorów i zobacz.
Konwertuję kolory
Od wielu lat są w stanie przekonwertować kolory z obsługiwanych formatów, takich jak hsl, hwb, rgb i hex. shift + click na kwadratowej próbce kolorów w panelu Style, aby wykonać tę konwersję. Nowe narzędzia do określania kolorów nie tylko cyklicznie przenoszą konwersje, ale także generują wyskakujące okienko, w którym autorzy mogą wybrać właściwą konwersję.
Podczas konwersji ważne jest, aby wiedzieć, czy została przycięta w celu dopasowania do przestrzeni. W Narzędziach deweloperskich znajdziesz teraz ikonę ostrzeżenia o skonwertowanym kolorze, która informuje o tym klipie.
Więcej informacji o funkcji debugowania CSS w Narzędziach deweloperskich znajdziesz w najnowszym ogłoszeniu.
Podsumowanie
Przestrzenie kolorów inne niż sRGB są w początkowej fazie rozwoju, ale myślę, że z czasem projektanci i deweloperzy mogą zauważyć wzrost ich użycia. Wiedza na przykład o tym, w jakiej przestrzeni kolorystycznego stworzyć system projektowania, to bardzo ważne narzędzie dla twórców. Każda przestrzeń kolorów ma unikalne cechy i powód, dla którego uwzględniliśmy ją w specyfikacji CSS. Można zacząć od nich i w razie potrzeby dodać je do specyfikacji.
Baw się tymi kolorowymi zabawkami. Większa energia, spójność manipulacji i interpolacji oraz ogólnie bardziej barwne wrażenia.
Materiały dodatkowe
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/