CSS color-mix()

Adam Argyle

Funkcja CSS color-mix() umożliwia mieszanie kolorów w dowolnej z obsługiwanych przestrzeni kolorów bezpośrednio z CSS.

Obsługa przeglądarek

• 111
• 111
• 113
• 16.2

Źródło

Przed color-mix(), aby przyciemnić, rozjaśnić lub pozbawić koloru obrazu, deweloperzy używali preprocesorów CSS lub calc() na kanałach kolorów.

Przed zmianą w SCSS

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass wykonał świetną pracę, wyprzedzając specyfikację kolorów CSS. Nie było jednak do tej pory prawdziwego sposobu mieszania kolorów w CSS. Aby uzyskać zbliżony wynik, musisz wykonać obliczenia wartości kolorów częściowych. Oto skrócony przykład tego, jak obecnie CSS może symulować mieszanie:

Wcześniej w przypadku HSL

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() wprowadza do CSS możliwość mieszania kolorów. Deweloperzy mogą wybrać przestrzeń barw, w której będą mieszać kolory, oraz określić, jak dominujący ma być każdy z nich.

Po

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

Właśnie tego chcemy. Elastyczność, wydajność i w pełni funkcjonalne interfejsy API. pokochaj,

Łączenie kolorów w CSS

CSS działa w świecie wielu przestrzeni kolorów i gamutów kolorów, dlatego podanie przestrzeni kolorów do zmieszania nie jest opcjonalne. Co więcej, różnorodność przestrzeni barw może drastycznie zmienić efekty ich mieszania, dlatego znajomość efektów przestrzeni kolorów pomoże Ci osiągnąć zamierzone efekty.

Aby zapoznać się z tą funkcją w sposób interaktywny, skorzystaj z tego narzędzia color-mix(): - sprawdź, jaki efekt daje każda przestrzeń barw. – Poznaj efekty interpolacji odcieni podczas mieszania w przestrzeni barw cylindrycznej (lch, oklch, hsl i hwb). – Zmień kolory, które są mieszane, klikając jeden z 2 górnych pól kolorów. – Użyj suwaka, aby zmienić współczynnik mieszania. – wygenerowany kod color-mix() CSS dostępny na dole.

Mieszanie w różnych przestrzeniach kolorów

Domyślna przestrzeń kolorów do mieszania (i gradientów) to oklab. Zapewnia spójne wyniki. Możesz też określić alternatywne przestrzenie kolorów, aby dostosować miks do swoich potrzeb.

Weźmy na przykład black i white. Przestrzeń barw, w której są mieszane, nie będzie miała aż tak dużego znaczenia, prawda? Błąd.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

Wypróbuj wersję demonstracyjną

To bardzo wymierne efekty!

Innym przykładem są blue i white. Wybrałem ten przykład, ponieważ w tym przypadku kształt przestrzeni barw może wpływać na wyniki. W tym przypadku większość przestrzeni barwowych staje się fioletowa, gdy przechodzi z białego na niebieski. Pokazuje też, że oklab to niezawodna przestrzeń barw do mieszania, która najbardziej odpowiada oczekiwaniom większości użytkowników w przypadku mieszania bieli i niebieskiego (bez fioletu).

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Wypróbuj wersję demonstracyjną

Poznanie efektów przestrzeni barw za pomocą color-mix() to świetna wiedza, która przydaje się również do tworzenia gradientów. Składnia Color 4 umożliwia też określenie przestrzeni kolorów dla gradientów, w których gradient pokazuje mieszankę kolorów w danym obszarze.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

Wypróbuj wersję demonstracyjną

Jeśli zastanawiasz się, która przestrzeń barw jest „najlepsza”, to nie ma jednej takiej przestrzeni. Dlatego jest tak wiele opcji. Nie wynaleziono też nowych przestrzeni kolorów (patrz oklch i oklab), gdyby jedna z nich była „najlepsza”. Każdy kolor może mieć swój moment, w którym może zabłysnąć i stać się właściwym wyborem.

Jeśli na przykład chcesz uzyskać żywy efekt, użyj hsl lub hwb. W poniższej prezentacji 2 żywe kolory (purpurowy i limonkowy) są zmieszane ze sobą, a kolory hsl i hwb dają żywy efekt, natomiast s Przed i oklab dają kolory nienasycone.

Wypróbuj wersję demonstracyjną

Jeśli zależy Ci na spójności i subtelności, użyj oklab. W tej prezentacji, która łączy niebieski i czarny, hsl i HWB dają zbyt żywe i zmieniające się kolory, a srgb i oklab dają ciemniejszy odcień niebieskiego.

Wypróbuj wersję demonstracyjną

Poświęć 5 minut na zabawę w color-mix(), testując różne kolory i pokoje. Dzięki temu zaczniesz poznawać zalety każdego pokoju. Wraz z uwzględnianiem możliwości przestrzeni barw w interfejsach użytkownika będziemy też publikować więcej wskazówek dotyczących tych przestrzeni.

Dostosowywanie metody interpolacji odcieni

Jeśli wybierzesz mieszanie cylindrycznej przestrzeni kolorów, czyli zasadniczo dowolnej przestrzeni kolorów z kanałem barw h, który akceptuje kąt, możesz określić, czy interpolacja to shorter, longer, decreasing i increasing. Więcej informacji znajdziesz w przewodniku po kolorach HD.

Uwaga: jeśli przestrzeń barw jest cylindryczna, na stronie color-mix() pojawi się dodatkowy menu wyboru. Możesz odtworzyć ten efekt, aby zobaczyć, jak wpływa on na miks.

Oto ten sam przykład przejścia od koloru niebieskiego do białego, ale tym razem tylko w cylindrycznych przestrzeniach z różnymi metodami interpolacji odcieni.

Wypróbuj wersję demonstracyjną

Oto kolejny kod Codepen, który ułatwia wizualizację interpolacji odcienia, ale w tym przypadku dotyczy on gradientów. Mam nadzieję, że pomoże Ci to zrozumieć, jak każda przestrzeń barw wytwarza wynik mieszania, gdy określona jest interpolacja odcienia.

Ostrzeżenie: podanie metody interpolacji odcienia dla niecylindrycznej przestrzeni barw jest błędem składniowym w color-mix().

Mieszanie z różnymi składniami kolorów

Dotychczas mieszaliśmy głównie kolory o nazwach w CSS, np. blue i white. Mieszanie kolorów CSS jest gotowe do łączenia kolorów, które pochodzą z 2 różnych przestrzeni kolorów. To kolejny powód, dla którego warto określić przestrzeń kolorów na potrzeby mieszania, ponieważ pozwala to ustawić wspólną przestrzeń na wypadek, gdyby oba kolory nie były w tej samej przestrzeni.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

W poprzednim przykładzie wartości hsl i display-p3 zostaną przekonwertowane na oklch, a następnie mieszane. Bardzo fajne i elastyczne.

Dostosowywanie proporcji mieszania

Nie jest prawdopodobne, aby za każdym razem, gdy mieszasz kolory, chciałeś użyć równych ilości każdego z nich, jak to miało miejsce w większości dotychczasowych przykładów. Mamy dobrą wiadomość: dostępna jest składnia określająca, jaka część każdego koloru powinna być widoczna w miksie.

Na początek podajemy przykłady miksów, które są równoważne (i zgodnie ze specyfikacją):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

Myślę, że te przykłady dobrze ilustrują skrajne przypadki. Pierwszy zestaw przykładów pokazuje, że wartość 50% nie jest wymagana, ale można ją podać opcjonalnie. Ostatni przykład pokazuje ciekawy przypadek, gdy proporcje przekraczają 100% po zsumowaniu. Są one wtedy odpowiednio ograniczane do łącznej wartości 100%.

Zwróć też uwagę, że jeśli tylko jeden kolor określa współczynnik, zakłada się, że drugi ma wartość 100%. Oto kilka dodatkowych przykładów ilustrujących to zachowanie.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

Te przykłady obrazują 2 reguły:1. Gdy wartości przekraczają 100%, są one ograniczane i równomiernie rozkładane. 1. Jeśli podano tylko jeden współczynnik, drugi kolor zostanie ustawiony na wartość 100 mniej niż ten współczynnik.

Ostatnia zasada jest nieco mniej oczywista. Co się stanie, gdy dla obu kolorów podasz wartości procentowe, ale nie sumują się one do 100%?

color-mix(in lch, purple 20%, plum 20%)

Ta kombinacja color-mix() zapewnia przejrzystość, 40% przejrzystość. Jeśli współczynniki nie dają w sumie 100%, uzyskany mix nie będzie nieprzezroczysty. Żaden z nich nie będzie w pełni wymieszany.

Zagnieżdżanie: color-mix()

Podobnie jak w przypadku wszystkich innych elementów CSS, zagnieżdżanie jest obsługiwane prawidłowo i zgodnie z oczekiwaniami. Funkcje wewnętrzne zostaną najpierw rozwiązane i zwrócą swoje wartości do kontekstu nadrzędnego.

color-mix(in lch, purple 40%, color-mix(plum, white))

Możesz umieścić dowolną ilość treści, aby osiągnąć zamierzony efekt.

Tworzenie jasnego i ciemnego schematu kolorów

Twórzmy schematy kolorów z pomocą color-mix().

podstawowy schemat kolorów,

W tym przykładzie CSS jasny i ciemny motyw jest tworzony na podstawie szesnastkowego koloru marki. Jasny motyw tworzy 2 ciemnoniebieskie kolory tekstu i bardzo jasny biały kolor powierzchni tła. Następnie w zapytaniu o multimedia z preferencją ciemnego motywu nowym właściwościom niestandardowym przypisujesz nowe kolory, aby tło było ciemne, a kolor tekstu jasny.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

Wszystko to jest możliwe dzięki połączeniu białego lub czarnego z kolorem marki.

Schemat kolorów dla średnio zaawansowanych

Można to rozwinąć, dodając więcej niż jasny i ciemny motyw. W tym przykładzie zmiany w grupie radiowo-wybieraniowej aktualizują atrybut w tagu HTML [color-scheme="auto"], co umożliwia selektorom warunkowe stosowanie motywu kolorów.

W tym demonstracyjnym filmie dla średnio zaawansowanych użytkowników pokazano też technikę motywu kolorystycznego, w której wszystkie kolory motywu są wymienione w elementach :root. Dzięki temu łatwo je zobaczyć i w razie potrzeby dostosować. Później w arkuszu stylów możesz używać zmiennych zgodnie z ich definicją. Dzięki temu nie musisz szukać w arkuszu stylów manipulacji kolorami, ponieważ wszystkie są zawarte w początkowym bloku :root.

Więcej interesujących zastosowań

Ana Tudor przygotowała świetne demo z kilkoma przypadkami użycia do zapoznania się z tematem:

Debugowanie funkcji color-mix() za pomocą Narzędzi deweloperskich

Narzędzia deweloperskie w Chrome świetnie obsługują color-mix(). Rozpoznaje i wyróżnia składnię, tworzy podgląd miksu obok stylu na panelu Stylów i umożliwia wybór alternatywnych kolorów.

W Narzędziach deweloperskich będzie to wyglądać mniej więcej tak:

Życzę wam udanego miksowania!