Przewodnik po kolorach CSS w wysokiej rozdzielczości

CSS Color 4 wprowadza do sieci narzędzia i funkcje do zapewniania kolorów o szerokiej gamie: kolory, funkcje manipulacyjne i lepsze gradienty.

Adam Argyle

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.

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

.

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.

Seria obrazów z przejściem między szerokim a wąskim kolorem ilustrujących żywe kolory i efekty ich zastosowania.
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.

Wyświetl podgląd dla siebie w Codepen

.

Wprowadzono też pewne ulepszenia: gradienty i miksowanie. i ograniczeń interpolacji.

Poniższy obraz przedstawia niektóre z uaktualnionych funkcji miksowania.

Dwie największe kombinacje kolorów są wyświetlane w sRGB w kolorach sRGB. Dwie dolne kombinacje kolorów są w obszarze Display p3. Display p3 ma więcej żywe kolory i mieszaniny dają efekt czerni i bieli pośrodku, w których sRGB wygląda na trochę nienasycone, a mieszanki pośrodku wyniki nie są czarno-białe.
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:

Źródło: Wikipedia

.

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

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

.

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:

• Kod szesnastkowy
• RGB
• HSL
• HWB

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ę.

.

. Powyżej widać zakres sRGB cząstek w przestrzeni kolorów kostki RGB. Źródło obrazu

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

Obsługa przeglądarek

• 1
• 12
• 1
• 1

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 1
• 1

Źródło

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,

Obsługa przeglądarek

• 1
• 12
• 1
• 3,1

Źródło

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

Obsługa przeglądarek

• Poradnik
• Poradnik
• 96
• 15

Źródło

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.

• Względna składnia kolorów CSS
• Składanka kolorów CSS

Dodatkowe materiały do przeczytania 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?

• Lepiej niż w laboratorium? Redukcja gamut: CIE Lab & OKLab

• Dąż do bogatszych kolorów w internecie

• Ochsw i Ochsł: dwie nowe przestrzenie kolorów do wyboru kolorów

• Dąż do bogatszych kolorów w Chromium (PDF)

• LCH to najlepsza przestrzeń kolorów.

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

• Przestrzenie kolorów, Hannah Weller

• Szeroka gama kolorów w CSS z Display-P3

• Przestrzeń kolorów CIE 1931

• Formaty kolorów w CSS

• Przestrzenie kolorów, Bartosz Ciechanowski

Narzędzia:

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