CSS Color 4 wprowadza do sieci narzędzia i funkcje do zapewniania kolorów o szerokiej gamie: kolory, funkcje manipulacyjne i lepsze gradienty.
Od ponad 25 lat, sRGB
(standardowy czerwony zielony niebieski) jest jedynym kolorem
gamut dla gradientów i kolorów CSS z przestrzenią kolorów.
w obrębie takich elementów jak rgb()
, hsl()
i szesnastkowe. Jest to najczęściej używany kolor
zakres szerokiej gamy wyświetlaczy; który jest wspólnym mianownikiem. Mamy wspaniały
przyzwyczajenie się do określania w nim kolorów.
![Najpopularniejsze formaty kolorów według procentu wystąpień.](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/the-popular-color-format-b5aab67b4d3de.png?authuser=9&hl=pl)
Ponieważ reklamy displayowe stają się coraz bardziej prezentujące się w szerokim zakresie kolorów, CSS wymaga zastosowania aby określić kolory z szerszych zakresów. Bieżące formaty kolorów nie mają języka dla szerokich zakresów kolorów.
Gdyby kod CSS nie był aktualizowany, utknąłby na zawsze w zakresach kolorów z lat 90., nigdy nie dopasować do szerokiej gamy ofert w obrazach i filmach. Ujęcia, tylko widoczne 30% kolorów, które widzi ludzkie oko. Podziękuj usłudze porównywania cen Color Level 4 za pomoc pisali głównie Lea Verou i Chris Liley.
Chrome obsługuje palety kolorów CSS Color 4 i przestrzeni kolorów. Usługi porównywania cen mogą teraz obsługiwać HD (wysoka rozdzielczość) można wybrać kolory z palety HD, a także skorzystać z przestrzeni kolorów specjalizacji.
Przekonaj się
Ten przewodnik składa się z 3 części. Czytaj dalej, aby przypomnieć sobie, gdzie użyto kolorów. Następnie: przeczytaj, gdzie znikają kolory i jak zarządzać kolorami w przyszłości, przejść na HD z kolorami HD.
Omówienie
W obsługiwanych przeglądarkach masz o 50% więcej kolorów do wyboru. Jeśli myślisz, że 16 to już miliony kolorów. Poczekaj, aż zobaczysz, ile kolorów z tych nowych miejsc. Pomyśl też o gradientach, banded, ponieważ nie było ich wystarczająco dużo dogłębna, rozwiązana też.
Oprócz większej liczby kolorów i zapewne najżywszych kolorów, jakie zapewnia wyświetlacz, nowe przestrzenie kolorów zapewniają unikalne narzędzia i metody do zarządzania systemów kolorów. Na przykład wcześniej mieliśmy HSL i jego „lekkiość” kanał, z którymi radzili sobie najlepsi twórcy stron internetowych. Teraz w CSS mamy „jasność postrzegania” LCH.
![Dwie tabele kolorów znajdują się obok siebie. Pierwsza tabela przedstawia kod HSL
tęcza o mniej więcej 10 kolorach, a obok niej kolory w skali szarości, które reprezentują
jego jasność. Druga tabela przedstawia tęczę LCH,
znacznie mniej intensywny, ale obok niej szarości są spójne.
Wskazuje to, że LCH ma stałą wartość jasności, a HSL – nie.](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/two-tables-color-are-sid-d7829619631b7.png?authuser=9&hl=pl)
Wprowadzono też pewne ulepszenia: gradienty i miksowanie. i ograniczeń interpolacji.
Poniższy obraz przedstawia niektóre z uaktualnionych funkcji miksowania.
![](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/kleavbJG5AA2namwim8y.png?authuser=9&hl=pl)
https://codepen.io/web-dot-dev/pen/poZgXQb
Problem z kolorami i internetem polega na tym, że CSS nie jest gotowy do wysokiej rozdzielczości, a wyświetlacze, które większość ludzi nosi w kieszeniach, na kolanach lub montowanych na ścianach. dzięki szerokiej gamie kolorów i wysokiej rozdzielczości. Możliwości kolorystyczne wyświetlaczy a CSS rozwija się szybciej niż CSS.
To nie tylko „więcej kolorów”. Na końcu tych dokumentów będzie można określić więcej kolorów, ulepszyć gradienty i wybrać najlepsze przestrzenie kolorów i gamy kolorów dla każdego zadania.
Czym jest gama kolorów?
Gama reprezentuje rozmiar czegoś. Wyrażenie „miliony kolorów” jest uwagi na temat palety wyświetlacza lub palety kolorów, które ma wybrać . Na ilustracji poniżej porównujemy 3 gamy kolorów, przy czym im większy rozmiar. tym więcej kolorów.
Gama kolorów może też mieć nazwę. Na przykład gra w koszykówkę, baseball albo filiżanka kawy vs. Grande; nazwa rozmiaru pomoże innym komunikacji. Znajomość nazw palet kolorów ułatwia i przyspiesza komunikację rozumieją zakres kolorów.
W tym artykule omawiamy poprzednie gamy kolorów. Przeczytasz o siedem nowych zakresów w sekcji Dostęp do większej liczby kolorów i nowych przestrzeni.
Gama wizualna
Gama kolorów jest często porównywana z gamą kolorów wizualnych. do końca który według nas widzi ludzkie oko. HVS jest często przedstawiany za pomocą diagram chromatyczności:
![Kształt buta konia wypełni się jaskrawym gradientem z pustym trójkątem pośrodku.](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-horse-shoe-shape-is-fil-c574400e794bc.png?authuser=9&hl=pl)
Najbardziej zewnętrzny kształt to ten, który widzimy jako ludzie, a trójkąt wewnętrzny
Zakres funkcji rgb()
, czyli przestrzeń kolorów sRGB.
Jak wspomnieliśmy wcześniej, przy porównywaniu rozmiarów przestrzeni reklamowej poniżej. W ten sposób branża komunikuje się na temat gamy kolorów porównując ich wyniki,
Co to jest przestrzeń kolorów?
Przestrzeń barw to aranżacje obejmujące całą paletę, definiującą kształt i metodę dostęp do kolorów. Wiele z nich to proste kształty 3D, takie jak sześciany lub walce. Ten kolor określa, które kolory są obok siebie i jak dostęp i interpolacje kolorów.
RGB jest jak prostokątna przestrzeń kolorów, w której kolory są odczytywane, określając na 3 osiach. HSL to cylindryczna przestrzeń kolorów. w których kolory są dostępne pod kątem kąta barwy i współrzędnych na 2 osiach
![Obok siebie pokazane są półwycięte kostki RGB i wycinki na walca HSL, aby pokazać, jak kolory uporządkują się w kształt w każdej przestrzeni.](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-half-cut-open-rgb-cube-53a16bc324d2a.png?authuser=9&hl=pl)
Specyfikacja poziomu 4 wprowadza 12 nowe przestrzenie kolorów do wyszukiwania kolorów. Są one uzupełnieniem 4 kolorów, Liczba wcześniej dostępnych miejsc:
Podsumowanie gamy kolorów i przestrzeni kolorów
Przestrzeń kolorów to mapowanie kolorów, dla których gama kolorów jest zakresem kolorów. Gama kolorów to suma cząstek i przestrzeni kolorów jako butelki do przechowywania tego zakresu cząstek.
Oto interaktywna wizualizacja Aleksieja Ardowa, która pokazuje, przestrzeni kolorów. Wskaż, przeciągnij i powiększaj widok w tej wersji demonstracyjnej. Zmiana przestrzeni kolorów aby zobaczyć wizualizację innych pokoi.
- Używaj gamy kolorów, aby mówić o różnych kolorach, na przykład o słabym zakresie lub wąskim. między gamutami a szeroką gamą czy szerokim zakresem.
- Stosuj przestrzenie kolorów, by rozmawiać o aranżacjach kolorów oraz o składni służącej do określania kolor, manipulowanie kolorem i interpolację.
![Sześcian wypełniona wieloma kolorowymi kropkami.](https://developer.chrome.google.cn/static/docs/css-ui/high-definition-css-color-guide/image/a-cube-filled-many-multi-2ecb2e34ca6.png?authuser=9&hl=pl)
Przegląd klasycznej przestrzeni kolorów {#classic-color-spaces}
Kolor CSS 4 obejmuje kilka nowych elementów: funkcje i narzędzia do obsługi stylów CSS i kolorów. Najpierw powtórz wcześniejsze informacje o kolorach o nowych funkcjach.
Od początku tego tysiąclecia można stosować poniższe metody we wszystkich usługach CSS
, które akceptują kolor jako wartość: szesnastkowe (liczby szesnastkowe), rgb()
, rgba()
, przez
np. hotpink
lub z takimi słowami kluczowymi
currentColor
Około 2010 r., w zależności od przeglądarki, CSS może użyć
hsl()
kolorów. Następnie w 2017 r.
wartość szesnastkowa z alfa. Tylko na koniec
Ostatnio aplikacja hwb()
zaczęła otrzymywać
obsługę w przeglądarkach.
Wszystkie te klasyczne przestrzenie kolorów odwołują się do kolorów w ramach tej samej gamy, sRGB.
HEX
Szesnastkowa przestrzeń kolorów określa R, G, B i A z argumentem szesnastkowych. Poniżej przykłady kodu pokazują wszystkie sposoby, w jakie ta składnia może określić czerwony, zielony i niebieski plusk przezroczystości.
.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 zapewnia bezpośredni dostęp do czerwonego, zielonego i niebieskiego kanału. Można podać wartość z zakresu od 0 do 255 lub jako wartość procentową od 0 do 100. Taka składnia występowała jeszcze przed normalizacją składni w , dzięki czemu możesz zobaczyć składnię przecinków i bez przecinków. Ruchoma 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,
Jedna z pierwszych przestrzeni kolorów, dzięki którym zorientujesz się w kierunku ludzkiego języka komunikacji, HSL (nasycenie i jasność) oferuje wszystkie kolory Gama sRGB bez konieczności rozpoznawania barwy czerwonego, zielonego i niebieskiego interakcje. Podobnie jak w przypadku RGB, w składni pierwotnie występowały przecinki, przecinki nie są 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
Inną przestrzenią kolorów sRGB gamą kolorów ukierunkowaną na to, jak ludzie opisują kolor, jest HWB. (odcień, biel, czerń). Autorzy mogą wybrać odcień i połączyć biały lub czarny 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
Dowiedz się więcej o nowych przestrzeniach kolorów, składni i narzędziach, a potem dowiedz się, jak przejść na kolor HD.
Przestrzeń kolorów inna niż sRGB znajduje się w internecie na wczesnym etapie rozwoju, i zwiększa się korzystanie z nich przez projektantów i deweloperów. Wiedząc, przestrzeni kolorów do opracowania systemu projektowania i paska narzędzi dla twórców. Każda przestrzeń kolorów oferuje unikalne cechy i powody, dla których do specyfikacji CSS. Można zacząć od nich w razie potrzeby.
Zasoby
Przeczytaj więcej artykułów na temat poziomu kolorów 5.
Dodatkowe materiały do przeczytania znajdziesz w internecie:
- CSS Color Module Level 4 firmy W3C
CSS Color Module Level 5 firmy W3C
Ochsw i Ochsł: dwie nowe przestrzenie kolorów do wyboru kolorów
Narzędzia: