Ten dokument jest częścią przewodnika po kolorach CSS w wysokiej rozdzielczości.
Kolor 4: szereg nowych funkcji i narzędzi CSS oraz kolorów. Ten kod Codepen pokazuje wszystkie nowe i stare składni kolorów:
Przeczytaj podsumowanie klasycznych przestrzeni kolorów.
Specyfikacja poziomu 4 wprowadziła 12 nowych przestrzeni kolorów do wyszukiwania kolorów w stosunku do 7 nowych przestrzeni kolorów, które były dostępne wcześniej:
- Liniowy sRGB
- LCH
- okLCH
- Laboratorium
- okLAB
- Displayowe P3
- Rec2020
- A98 RGB
- ProPhoto RGB
- XYZ
- XYZ d50
- XYZ d65
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() {#linear-srgb}
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
LCH wprowadza składnię, aby umożliwić dostęp do kolorów spoza gamy RGB. To pierwsze rozwiązanie, które znacznie ułatwia tworzenie kolorów wyświetlacza poza gamą kolorów. Dzieje się tak, ponieważ dowolne kolory kosmosu CIE (lch, oklch, oklab, oklab) mogą reprezentować całe spektrum 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. To specyficzna „perceptycznie liniowa”, skoncentrowana na człowieku. Chroma jest podobna do nasycenia – może wynosić 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 {#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 zostało udokumentowane przez Michaela Pointera 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.
Termin klucz-wartość: punkt bieli jest atrybutem przestrzeni kolorów, czyli w miejscu, gdzie w obrębie danej przestrzeni znajduje się prawdziwa biel. W przypadku ekranów elektronicznych najpowszechniejszym punktem bieli jest D65, czyli 6500 kelwinów. Przy konwertowaniu kolorów ważne jest, aby punkty bieli nie pasowały do temperatury kolorów (ciepła lub chłodu).
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);
}
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%));
}
Na szczęście w specyfikacji Kolor 4 znajdują się instrukcje dla przeglądarek na temat obsługi interpolacji przestrzeni kolorów. W przypadku .gradient przeglądarki zauważają różnicujące przestrzenie kolorów i używają 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 pokazuję 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ść.
Steruj 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 kreskami 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 rewelacyjnie, ale co by było, gdyby można było zapewnić 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 domyślnie przyjmuje trasę shorter, chyba że określisz dla niej 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 przykładzie odległości interpolacji barw symulowano krótszą i długą ścieżkę, aby zilustrować różnicę. Mała 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 swój unikalny kształt i układ kolorów, daje inny gradient. W poniższych przykładach przyjrzyjmy się, jak każda przestrzeń kolorów wygląda inaczej, zwłaszcza od niebieskiego do białego. Zwróć uwagę, ile z nich zmieni kolor na fioletowy w środku. Jest to tzw. zmiana barwy podczas interpolacji.
Niektóre gradienty w tych przestrzeniach są bardziej żywe od innych lub rzadziej przechodzą 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%));
}
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!
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ę 255 wewnętrznie 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
Dalsze kroki
Znasz już nowe przestrzenie kolorów i narzędzia, więc możesz przejść na kolory HD.
Bardziej żywe, spójne manipulacje i interpolacje zapewniają bardziej kolorową obsługę.
Przeczytaj więcej zasobów dotyczących kolorów w przewodniku.