Dostęp do większej liczby kolorów i nowych przestrzeni

Ten dokument jest częścią przewodnika po kolorach CSS w wysokiej rozdzielczości.

Kolor CSS 4 obejmuje kilka nowych elementów: funkcje i narzędzia do obsługi stylów CSS i kolorów. Poniższy kodpen pokazuje wszystkie nowe i starej składni kolorów:

Przeczytaj podsumowanie klasycznej przestrzeni kolorów.

Specyfikacja level 4 wprowadza 12 nowe przestrzenie kolorów do wyszukiwania kolorów, spośród 7 nowych palet kolorów udostępnionych wcześniej:

• Liniowa sRGB
• LCH
• okLCH
• LAB
• okLAB
• Display p3
• Rec2020
• A98 RGB
• ProPhoto RGB
• XYZ
• XYZ D50
• XYZ D65

Poznaj nowe przestrzenie kolorów w internecie

Poniższe przestrzenie kolorów zapewniają dostęp do większej gamy przestrzeni niż sRGB. Przestrzeń kolorów display-p3 obejmuje prawie 2 razy więcej kolorów niż RGB, natomiast Rec2020 oferuje prawie dwa razy więcej niż display-p3. Co za kolor!

Funkcja color()

Nowy color() tej funkcji można użyć dla dowolnej przestrzeni kolorów, która określa kolory z użyciem R, G i B kanałów. Funkcja color() pobiera najpierw parametr przestrzeni kolorów, a potem ciąg dla RGB i opcjonalnie niektórych kanałów alfa.

Wiele nowych przestrzeni kolorów korzysta z tej funkcji, ponieważ wyspecjalizowanych funkcji takich jak rgb, srgb, hsl, hwb itd., szybko rozwijał się łatwiej jest określić przestrzeń kolorów jako parametr.

Zalety

• Znormalizowana przestrzeń umożliwiająca dostęp do przestrzeni kolorów, które korzystają z kanałów RGB.
• Możliwość skalowania w górę do dowolnej, szerokiej gamy przestrzeni kolorów RGB.

Wady

• Nie działa w przypadku HSL, HWB, LCH, okLCH i 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 obejmuje te same funkcje co rgb(). Dodatkowo umożliwia ułamki dziesiętne z zakresu od 0 do 1, np. od 0% do 100%.

Zalety

• Prawie wszystkie wyświetlacze obsługują zakres tej przestrzeni kolorów.
• Obsługa narzędzi do projektowania.

Wady

• Nie jest percepcyjnie liniowy (tak jak lch())
• Brak kolorów o szerokiej gamie.
• Gradienty często przechodzą przez strefę martwą.

.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() {#linear-srgb}

Ta liniowa alternatywa dla RGB umożliwia przewidywalne natężenie kanałów.

Zalety

• Bezpośredni dostęp do kanałów RGB, co przydaje się przy np. silnikach gier czy pokazach świetlnych.

Wady

• Format nie jest percepcyjnie liniowy.
• Czerń i biel są wypełnione po brzegach.

.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 omawiamy szczegółowo w dalszej części tego artykułu. ale szybko można zobaczyć odcienie czarnego do białego srgb i linear-srgb. gradientu, aby zilustrować różnice:

LCH

LCH wprowadza składnię umożliwiającą dostęp do kolorów spoza zakresu RGB. To także Po pierwsze, bardzo ułatwiają tworzenie treści kolor wyświetlacza. To dlatego, że wszystkie kolory przestrzeni CIE (lch, oklch, lab, oklab) może reprezentować całe spektrum kolorów widocznych dla człowieka.

Ta przestrzeń kolorów jest wzorowana na ludzkim widzu i zapewnia składnię, aby określić dowolny z tych kolorów i nie tylko. Kanały LCH to „lekki” akcent, barwę i barwę. Odcień to kąt, jak w przypadku HSL i HWB. Jasność jest wartością od 0 do 100. To specjalny „percepcyjnie liniowy”, ukierunkowany na człowieka jego jasność. Chroma jest podobna do nasycenia. może wynosić od 0 do 230, ale jest technicznie nieograniczone.

Zalety

• Przewidywalna manipulacja kolorami dzięki temu, że jest postrzegana jako liniowa, głównie (patrz: oklch).
• Wykorzystuje znane kanały.
• Często mają żywe gradienty.

Wady

• Łatwo otworzyć się na świat.
• W rzadkich przypadkach gradient może wymagać korekty punktu środkowego, aby 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 stworzona z myślą o dostępie do palety CIE, również z perspektywą wymiarem jasności liniowej (L). A i B w LAB reprezentują unikalne osie funkcji ludzkie widzenie kolorów: czerwono-zielony i niebiesko-żółty. Gdy A ma wartość dodatnią dodaje czerwony i zielony, gdy jest poniżej 0. Gdy B otrzymuje liczbę dodatnią zostanie dodany żółty, a wartości ujemne – niebieski.

Zalety

• Wyraźnie spójne gradienty.
• Wysoki zakres dynamiczny.

Wady

• Potencjał zmiany odcieni.
• Trudno odczytać wartości przy użyciu autora lub odgadnąć kolor.

.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 korektowa w przypadku LCH. Podobnie jak LCH, (L) nadal odzwierciedla percepcyjnie liniową jasność, C dla barwy i H – odcień.

Jeśli masz doświadczenie w pracy z tym obszarem, wydaje Ci się, że jest ono znajome HSL lub LCH. Wybierz kąt na kole kolorów dla H, wybierz jasność lub poziom ciemności, dostosowując L. Potem mamy barwę zamiast nasycenia. Prawie identyczne, z tą różnicą, że dostosowywanie jasności i zabarwienia występują parami. W przeciwnym razie można łatwo poprosić o wysokie kolory, poza docelową gamą.

Zalety

• Bez niespodzianek przy pracy z odcieniami niebieskim i fioletowym.
• Postrzegana liniowa jasność.
• Wykorzystuje znane kanały.
• Wysoki zakres dynamiczny.
• Ma nowoczesny selektor kolorów – firma Evil Martians.

Wady

• Łatwo otworzyć się na świat.
• 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 służy do korekty w laboratorium. Jest to przestrzeń zoptymalizowana pod kątem jakości przetwarzania obrazu, która w kodzie CSS oznacza gradienty i jakość manipulowania funkcjami kolorów.

Zalety

• Domyślna przestrzeń na animacje i interpolacje.
• Postrzegana liniowa jasność.
• Brak zmiany barw jak w laboratorium.
• Wyraźnie 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);
}

Display P3

Przestrzeń gama i przestrzeń kolorów wyświetlacza P3 stały się popularne od czasu wprowadzenia obsługi przez Apple na komputerach iMac od 2015 r. Od 2016 r. firma Apple obsługuje także format display-p3 na stronach internetowych za pomocą CSS, 5 niż w innych przeglądarkach. Jeśli to sRGB, będzie to świetny kolor. aby rozpocząć pracę w miarę przenoszenia stylów do wyższego zakresu dynamicznego.

Zalety

• Świetna obsługa, uważana za podstawę dla wyświetlaczy HDR.
• O 50% więcej kolorów niż sRGB.
• Narzędzia deweloperskie oferują świetny selektor kolorów.

Wady

• Z czasem zostanie przekroczona przez spacje 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 jest częścią ruchu na rzecz UHDTV (telewizji ultrawysokiej rozdzielczości), zapewniając szeroki zakres kolorów do wykorzystania w rozdzielczości 4K i 8K. Rec2020 to kolejny Gama oparta na RGB, większa niż w przypadku Display-P3, ale niezbyt powszechna jak konsument w sieci reklamowej P3.

Zalety

• Kolory Ultra HD.

Wady

• Rzadko (jeszcze) wśród konsumentów.
• Rzadko spotykane w urządzeniach mobilnych i 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 {#a98-rgb}

A98 RGB to skrót od Adobe 1998 RGB, który powstał z myślą o obsłudze większości które są dostępne w drukarkach CMYK. Oferuje więcej kolorów niż sRGB. w odcieniach turkusowego i zielonego.

Zalety

• Większe niż sRGB i przestrzenie kolorów Display P3.

Wady

• To nietypowa przestrzeń, w której pracują projektanci treści cyfrowych.
• Niewielu użytkowników 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

Stworzona przez Kodak przestrzeń o szerokiej gamie o wyjątkowo szerokiej gamie kolorów podstawowych kolory i minimalne przesunięcia barw przy zmianie jasności. Zapewnia również, że 100% rzeczywiste kolory powierzchni jak opisał Michael Pointer w 1980 roku.

Zalety

• Minimalne zmiany odcieni po zmianie jasności.
• Żywe kolory główne.

Wady

• Około 13% oferowanych kolorów jest imaginary, czyli są poza zakresem widoczności 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 widoczne dla osoby o wzroku. Właśnie dlatego ten kolor jest używany jako standardowe odniesienie do innych kolorów. spacje. Y to luminancja, X i Z to możliwe chromaty w obrębie danej wartości Y luminancja.

Różnica między d50 a d65 to punkt bieli, gdzie d50 ma symbol d50. punkty bieli, a d65 – punkt bieli d65.

Kluczowe hasło: Punkt bieli to atrybut przestrzeni kolorów, w którym Parametr true biały istnieje w spacji. W przypadku ekranów elektronicznych D65 to punkt bieli i skrót od 6500 kelwinów. Ważne są kolory, konwersja punktów bieli dopasowujących się do temperatury barwowej (ciepła lub chłodności) nie ma wpływu na dane.

Zalety

• Dostęp liniowy łagodny ma przydatne zastosowania.
• Idealne do fizycznego mieszania kolorów.

Wady

• Nie są postrzegane liniowo, 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 zawiera też ścieżkę do uczenia przeglądarki niestandardowej przestrzeni kolorów. Jest to profil ICC, który informuje przeglądarkę, jak aby ustalić kolory.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Po załadowaniu uzyskaj dostęp do kolorów z tego profilu niestandardowego za pomocą funkcji color() i określ dla niego wartości kanału.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Interpolacja kolorów

Przechodzenie z jednego koloru na drugi występuje w animacji, gradientach i mieszaniem kolorów. Przejście to zazwyczaj określane jest jako kolor początkowy i kolor końcowy, w którym przeglądarka będzie interpolować między nimi. Interpolacja oznacza w tym przypadku wygenerowanie szeregu kolorów, aby płynne przejście, a nie natychmiastowe.

W przypadku gradientu interpolacja to seria kolorów wzdłuż kształtu. Na Jest to seria kolorów w czasie.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

Gdy zastosujesz gradient, kolory pomiędzy kolorami są pokazywane jednocześnie:

Nowości w interpolacji kolorów

Nowe palety kolorów i przestrzenie kolorów dla wielu opcji interpolacji. Zmienianie koloru in hsl z niebieskiego na biały co bardzo 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);
}

A co się stanie, jeśli przejdziesz z koloru w jednej przestrzeni na kolor w zupełnie inną przestrzeń.

.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%));
}

Na szczęście dla Ciebie Kolor 4 zawiera instrukcje dla przeglądarek dotyczące obsługi tych zmiennych i interpolacje przestrzeni kolorów. W przypadku tego zasobu (.gradient) przeglądarki zauważają różnice przestrzeni kolorów i użyj domyślnej przestrzeni kolorów oklab.

Może się wydawać, że przeglądarka używałaby przestrzeni kolorów lch, ponieważ jest to pierwszy kolor, ale już nie. Dlatego wyświetlam drugi gradient porównawczy. .lch Gradient .lch jest gradientem z przestrzeni kolorów LCH.

Mniej pasów dzięki 16-bitowej palecie kolorów

Zanim ten kolor zaczął działać, wszystkie kolory były zapisywane jako jedna 32-bitowa liczba całkowita jako reprezentują wszystkie cztery kanały, czerwonym, zielonym, niebieskim i alfa. Oznacza to 8-bitową szybkość transmisji bitów. kanału i 2^ 24 możliwych kolorów (bez kanału alfa). 2 ^ 24 = 16 777 216, „miliony kolorów”.

Po ustawieniu koloru cztery 16-bitowe wartości zmiennoprzecinkowe każdy kanał ma we własnym towarzystwie, zamiast być zwarty. To łącznie 64 bity danych, w wyniku którego zmienia się znacznie więcej niż miliony kolorów.

Jest to wymagane do obsługi kolorów HD. Zwiększa to ilość koloru które mogą być przechowywane, co ma korzystny efekt uboczny polegający na więcej kolorów do wykorzystania w gradientie przez przeglądarkę.

Paski gradientowe pojawiają się, gdy kolorów jest za mało, aby utworzyć płynny gradient. i „paski” staje się widoczny. Pasma są wyraźnie złagodzone przez wybrać kolor do wyższej rozdzielczości.

.

Kontroluj interpolację

Najkrótsza odległość między dwoma punktami jest zawsze linią prostą. Kolorowe z interpolacją, przeglądarki domyślnie biorą pod uwagę krótszą trasę. Przeanalizuj scenariusz w którym w walce kolorów HSL są 2 punkty. Gradient uzyskuje kolorów, przechodząc wzdłuż linii między dwoma punktami.

linear-gradient(to right, #94e99c, #e06242)

.

Powyższa linia gradientu przebiega prosto między zielonoszarym a czerwonym przechodząc przez środek przestrzeni kolorów. Powyższe to nie do końca wiadomo, co się dzieje. Oto gradient w poniższym Codepen, ale nie jest biały pośrodku, co pokazało przykładowa demonstracja.

Środkowy obszar gradientu stracił jednak siłę. Dzieje się tak, ponieważ najżywsze kolory są na krawędziach przestrzeni kolorów, a nie na w miejscu, w którym dotarła interpolacja. Jest to tzw. „strefa martwa”. OK to kilka sposobów na rozwiązanie tego problemu.

Określenie większej liczby przystanków gradientu, by uniknąć martwej strefy

Metoda unikania martwej strefy jest obecnie stosowana w aby celowo utrzymać interpolację w w żywych zakresach przestrzeni kolorów. Jest to dosłownie obejście, dodatkowe przystanki pomagają ominąć strefę martwą.

Istnieje narzędzie gradientu opracowane przez Erika Kennedy'ego, które oblicza dodatkowy kolor. zatrzymuje się, aby unikać martwej strefy, nawet w przestrzeniach barwnych, nie będą w niej oddziaływać. Użycie go przez przekazanie kolorów z pierwszego przykładu. ale zmiana interpolacji kolorów na HSL powoduje następujący efekt:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

.

Dzięki prowadzonym punktom zatrzymania interpolacja nie jest już linią prostą. krzywa wokół strefy martwej, pomagając utrzymać nasycenie ze znacznie bardziej intensywnym gradientem.

Narzędzie jest świetne, ale co, jeśli masz podobne lub lepsze bezpośrednio z CSS?

Kierowanie interpolacji kolorów

Kolor 4 pozwala kontrolować strategię interpolacji barw. został dodany i stanowi nowy sposób obchodzenia (:wink:) martwej strefy. Pomyśl o odcieniu użyć dwustopniowego gradientu, który zmienia tylko kąt na przykład z 140deg na 240deg.

Krótsza lub dłuższa interpolacja barw

Gradient domyślnie przyjmuje shorter skieruje ją, chyba że określony przez Ciebie, tak aby uwzględniał longer. Odcień opcje interpolacji określają obrót kąta, na przykład w lewo zamiast w prawo (hej, Zoolander):

W przykładzie odległości interpolacji barw krótka ścieżka symulację długiej ścieżki w celu zilustrowania różnicy. Na niewielkim dystansie mieliśmy mniej barw między nim, ponieważ przebyły się one po najmniejszej odległości ale jest to możliwe, gdy odległość pokonała więcej odcieni.

Zwiększanie lub zmniejszanie interpolacji barw

Dostępne są jeszcze dwie strategie interpolacji barw w Kolorie 4, ale są one przeznaczone wyłącznie dla zdjęć walcowych przestrzeni kolorów. Pozostając przy dwóch kolorach z poprzednich przykładów, pokazuje teraz, jak działa zwiększanie i zmniejszanie.

W powyższym Codepen wykorzystano ColorJS do zademonstrowania oczekiwany wynik. Kod CSS, który należy napisać, aby osiągnąć ten sam efekt bez Biblioteka JavaScript będzie wyglądać tak:

.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, oto zabawny plac zabaw, gdzie możesz zmienić rozmycie między 2 barwami i efekt wyboru interpolacji barwnej a także jak przestrzenie kolorów zmieniają wyniki gradientu. Efekty mogą być bardzo różne different; To 4 nowe sztuczki, które dodaliśmy do paska narzędzi kolorów.

Gradienty w różnych przestrzeniach kolorów

Każda przestrzeń kolorów, ze względu na swój unikalny kształt i układ kolorów, skutkuje innego gradientu. W poniższych przykładach przyjrzyjmy się, jak każda przestrzeń kolorów robić to inaczej, szczególnie w przypadku koloru niebieskiego do białego. Zwróć uwagę, ile staje się fioletowy w środku, nazywa się to zmianą barw podczas interpolacji.

Niektóre gradienty w tych przestrzeniach są jaśniejsze od innych lub mniej się rozmieszczają. przez strefy martwe. W pokojach takich jak lab kolory grupowane są optymalnie pod kątem nasycenia. w przeciwieństwie do przestrzeni przeznaczonych dla ludzi do zapisywania kolorów, takich 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 prezentacja, chociaż subtelna w wynikach, daje większą spójność. i interpolacja z laboratorium. Jednak składnia modułu nie jest łatwa do odczytania, liczby ujemne, które są bardzo nieznane w przypadku identyfikatorów RGB lub hsl. Dobra wiadomości, możemy użyć polecenia hwb dla znajomej składni, ale prosimy o dodanie gradientu całkowicie interpolowane w innej przestrzeni kolorów, takiej jak 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%));
}

W tym przykładzie zastosowano te same kolory co whwb, ale określa przestrzeń kolorów dla z interpolacją do HWB lub Oklab. hwb to świetna przestrzeń do wysokich kolorów niewyraźne, ale możliwe jest też martwe strefy lub jasne punkty (zobacz cyjanowy punkt najpopularniejszy przykład). Oklab znakomicie nadaje się do tworzenia percepcyjnie liniowych gradientów liniowych, nasyconych. Możesz wypróbować tę funkcję w kilku różnych kolorach, aby wyświetlić gradient, który najbardziej Ci odpowiada.

Oto Codepen eksperymentujący z gradientami i przestrzeniami kolorów, mieszaniem aby odkryć nowe możliwości. Nawet przejście od czarnego jest inna w każdej przestrzeni barw.

Ograniczanie zakresu gamuta

W niektórych sytuacjach kolor może prosić o dostęp do treści spoza palety. Rozważ następujący kolor:

rgb(300 255 255)

Maksymalna wartość dla kanału kolorów w przestrzeni kolorów rgb wynosi 255, a tutaj Oznaczenie 300 zostało oznaczone na czerwono. Co się dzieje Ograniczanie zakresu gamuta.

Dokonywanie ściszania danych polega na usuwaniu dodatkowych informacji. 300 zmienia wartość na 255 do silnika kolorów. Kolor został zablokowany w tym miejscu.

Wybieranie przestrzeni kolorów

Po usłyszeniu o tej przestrzeni kolorów i jej efektach wiele osób przytłoczony i chcą wiedzieć „którą” wyboru. Z moich badań Nie widzę jednej przestrzeni kolorów jako tej samej dla wszystkich zadań. Każdy są momenty, w których osiągają pożądany rezultat.

Gdyby istnieje jedna najlepsza przestrzeń, nie byłoby tylu nowych miejsc,

Mogę jednak powiedzieć, że spacje CIE – lab, oklab, lch i oklch – są moimi miejsc, od których warto zacząć. Jeśli wyniki nie będą zgodne z oczekiwaniami, spróbuję testować inne pokoje. Za mieszanie kolorów i tworzenie gradientów zgadzam się domyślna specyfikacja to oklab. Jeśli chodzi o systemy kolorów i ogólne kolory interfejsu użytkownika, to oklch

Oto kilka artykułów, w których użytkownicy podzielili się swoim nowym kolorem z uwzględnieniem nowych przestrzeni kolorów i funkcji. Na przykład: Andrzej Sitnik postarali się Cię zainwestować w oklch, być może teraz Wasza firma chce zrobić to samo:

1. OKLCH w CSS: dlaczego przeszliśmy z RGB i HSL Andrzej Sitnik
2. Formaty kolorów autor: Josh W. Comeau
3. OK, OKLCH, Chris Coyier

Dalsze kroki

Znasz już teraz nowe przestrzenie kolorów i narzędzia przejść na kolor HD.

Większa wyrazistość, spójne manipulacje i interpolacje oraz ogólny aby były bardziej kolorowe.

Przeczytaj więcej zasobów dotyczących kolorów. z przewodnika.