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 obrębie tych danych.
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, pokazujący tylko 30% kolorów, które widzi ludzkie oko. Dziękujemy CSS Color Level 4 za pomoc w ucieczce. Autorzy głównie przez Lea Verou i Chrisa Liley.
Chrome obsługuje gamę kolorów CSS Color 4 i przestrzenie kolorów. Usługi porównywania cen obsługują teraz wyświetlacze w wysokiej rozdzielczości, określając kolory z gamy HD, a także przestrzenie kolorów z różnymi specjalizacjami.
Wypróbuj tę funkcję
Przewodnik składa się z 3 części. Czytaj dalej, aby przypomnieć sobie, gdzie były kolory. Następnie przeczytaj, co się dzieje i jak zarządzać kolorami w przyszłości dzięki przejściu na format HD.
Przegląd
W obsługiwanych przeglądarkach dostępnych jest o 50% więcej kolorów. Jeśli myślisz, że 16 milionów kolorów brzmi jak dużo, poczekaj, 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 liczby kolorów, prawdopodobnie najżywszych kolorów dostępnych w wyświetlaczu, nowe przestrzenie kolorów zapewniają wyjątkowe narzędzia i metody tworzenia układó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.
Na ilustracji poniżej przedstawiono niektóre uaktualnienia miksowania.
https://codepen.io/web-dot-dev/pen/poZgXQb
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 tych dokumentów możesz 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 opisujemy poprzednie gamy kolorów. Więcej o siedmiu nowych obszarach znajdziesz w artykule Więcej kolorów i nowych przestrzeni.
Gama wzrokowa
Gama kolorów jest często porównywana z gamyą wzrokową człowieka. Uważamy, że całe oko jest widoczne dla ludzkiego oka. 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 na poziomie 4 wprowadza 12 nowych przestrzeni kolorów do wyszukiwania kolorów. 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.
Przegląd klasycznych przestrzeni kolorów {#classic-color-spaces}
Kolor 4: szereg nowych funkcji i narzędzi CSS oraz kolorów. Najpierw przypomnijmy, gdzie były kolory przed wprowadzeniem nowych funkcji.
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 przestrzenie kolorów odnoszą 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%);
}
Dalsze kroki
Poczytaj o nowych przestrzeniach kolorów, składniach i narzędziach, a potem dowiedz się, jak przejść na kolory HD.
Przestrzenie kolorów inne niż sRGB dopiero w początkowej fazie rozwoju, ale z czasem projektanci i deweloperzy mogą coraz częściej korzystać z tych przestrzeni. 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 powody, dla których uwzględniliśmy ją w specyfikacji CSS. Można zacząć od niej od mniejszej ilości, a następnie w razie potrzeby dodawać ją do specyfikacji.
Zasoby
Przeczytaj więcej artykułów o poziomie kolorów 5.
Dodatkowe materiały do przeczytania w internecie znajdziesz:
- CSS Color Module Level 4 (Moduł kolorów CSS) od W3C
CSS Color Module Level 5 (moduł kolorów CSS) od W3C
Okhsv i Okhsl: 2 nowe przestrzenie kolorów do wybierania kolorów
I narzędzia: