CSS color-mix()

Adam Argyle

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

Zanim pojawiła się funkcja color-mix(), deweloperzy używali preprocesorów CSS lub calc() w kanałach kolorów, aby przyciemnić, rozjaśnić lub odbarwić kolor.

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

Sass wykonał świetną pracę, wyprzedzając specyfikację CSS dotyczącą kolorów. Nie było jednak prawdziwego sposobu na mieszanie kolorów w CSS. Aby się do tego zbliżyć, trzeba było wykonywać obliczenia na podstawie częściowych wartości kolorów. Oto uproszczony przykład tego, jak CSS może symulować mieszanie kolorów:

.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 kolor w mieszance.

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

O to nam chodzi. Elastyczność, moc i w pełni funkcjonalne interfejsy API. pokochaj,

Mieszanie kolorów w CSS

CSS działa w świecie wielu przestrzeni barw i gam kolorów, dlatego określenie przestrzeni barw do mieszania nie jest opcjonalne. Ponadto różne przestrzenie barw mogą radykalnie zmienić wyniki mieszania, dlatego znajomość efektów przestrzeni barw pomoże Ci uzyskać potrzebne rezultaty.

Aby zapoznać się z interaktywnym wprowadzeniem, wypróbuj to narzędzie color-mix(): - Poznaj efekty każdej przestrzeni barw. - Poznaj efekty interpolacji odcieni podczas mieszania w cylindrycznej przestrzeni barw (lch, oklch, hsl, i hwb). - Zmień mieszane kolory, klikając dowolne z 2 górnych pól kolorów. - Użyj suwaka, aby zmienić proporcje mieszania. - Wygenerowany kod CSS color-mix() jest dostępny u dołu.

Mieszanie w różnych przestrzeniach barw

Domyślną przestrzenią barw do mieszania (i gradientów) jest oklab. Zapewnia ona spójne wyniki. Możesz też określić alternatywne przestrzenie barw, aby dostosować mieszankę do swoich potrzeb.

Weźmy na przykład kolory black i white. Przestrzeń barw, w której są mieszane, nie będzie miała 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);

Ma to duży wpływ.

Weźmy na przykład kolory blue i white. Wybrałem je specjalnie, ponieważ jest to przypadek, w którym kształt przestrzeni barw może wpływać na wyniki. W tym przypadku większość przestrzeni barw przechodzi w fiolet, gdy przechodzimy od bieli do niebieskiego. Pokazuje to też, jak oklab jest niezawodną przestrzenią barw do mieszania, ponieważ jest najbliższa oczekiwaniom większości osób dotyczącym 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);

Poznanie efektów przestrzeni barw za pomocą color-mix() to świetna wiedza, która przyda się też do tworzenia gradientów too. Składnia koloru 4 umożliwia też określanie przestrzeni barw w gradientach, w których gradient pokazuje mieszankę na obszarze przestrzeni.

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

Jeśli zastanawiasz się, która przestrzeń barw jest „najlepsza”, to nie ma takiej. Dlatego jest tak wiele opcji. Gdyby jedna z nich była „najlepsza”, nie wymyślano by nowych przestrzeni barw (np. oklch i oklab). Każda przestrzeń barw może mieć wyjątkowy moment, w którym będzie najlepszym wyborem.

Jeśli na przykład chcesz uzyskać żywy efekt mieszania, użyj HSL lub HWB. W poniższej wersji demonstracyjnej mieszane są 2 żywe kolory (magenta i limonka). HSL i HWB dają żywy efekt, a sRGB i oklab – nasycone kolory.

Jeśli chcesz uzyskać spójność i subtelność, użyj oklab. W poniższej wersji demonstracyjnej, w której mieszane są niebieski i czarny, HSL i HWB dają zbyt żywe i przesunięte odcienie, a sRGB i oklab – ciemniejszy niebieski.

Poświęć 5 minut na zabawę z color-mix() playground i testowanie różnych kolorów i przestrzeni, a zaczniesz wyczuwać zalety każdej przestrzeni. Spodziewaj się też więcej wskazówek dotyczących przestrzeni barw, ponieważ wszyscy dostosowujemy się do ich potencjału w interfejsach użytkownika.

Dostosowywanie metody interpolacji odcieni

Jeśli zdecydujesz się na mieszanie w cylindrycznej przestrzeni barw, czyli w dowolnej przestrzeni barw z kanałem odcieni h, który akceptuje kąt, możesz określić, czy interpolacja ma być shorter, longer, decreasing, czy increasing. Więcej informacji znajdziesz w tym przewodniku po kolorach HD.

Oto ten sam przykład mieszania niebieskiego z białym, ale tym razem tylko w przestrzeniach cylindrycznych z różnymi metodami interpolacji odcieni.

Oto kolejny Codepen, który stworzyłem, aby pomóc w wizualizacji interpolacji odcieni, ale konkretnie w przypadku gradientów. Uważam, że pomoże Ci to zrozumieć, jak każda przestrzeń barw tworzy wynik mieszania, gdy określona jest interpolacja odcieni. Przeanalizuj go.

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

Do tej pory mieszaliśmy głównie nazwane kolory CSS, takie jak blue i white. Mieszanie kolorów CSS jest gotowe do mieszania kolorów z 2 różnych przestrzeni barw. Jest to kolejny powód, dla którego ważne jest określenie przestrzeni barw do mieszania, ponieważ ustawia ona wspólną przestrzeń, gdy 2 kolory nie znajdują się w tej samej przestrzeni.

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

W poprzednim przykładzie kolory hsl i display-p3 zostaną przekonwertowane na oklch, a następnie zmieszane. Całkiem fajne i elastyczne.

Dostosowywanie proporcji mieszania

Jest mało prawdopodobne, że za każdym razem, gdy mieszasz kolory, chcesz uzyskać równe części każdego koloru, jak pokazano w większości dotychczasowych przykładów. Dobra wiadomość: istnieje składnia, która pozwala określić, ile każdego koloru ma być widoczne w wynikowej mieszance.

Na początek tego tematu podaję próbkę mieszanek, które są równoważne (i pochodzą ze specyfikacji):

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

Uważam, że te przykłady dobrze ilustrują przypadki brzegowe. Pierwszy zestaw przykładów pokazuje, że 50% nie jest wymagane, ale można je opcjonalnie określić. Ostatni przykład pokazuje ciekawy przypadek, w którym proporcje przekraczają 100%, gdy są dodawane do siebie. Są one równomiernie ograniczane do 100%.

Zwróć też uwagę, że jeśli tylko jeden kolor określa proporcje, przyjmuje się, że drugi kolor stanowi resztę do 100%. Oto kilka dodatkowych przykładów, które pomogą zilustrować 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 ilustrują 2 reguły: 1. Gdy proporcje przekraczają 100%, są one ograniczane i równomiernie rozdzielane. 1. Gdy podana jest tylko 1 proporcja, drugi kolor jest ustawiany na 100 minus ta proporcja.

Ostatnia reguła jest nieco mniej oczywista. Co się stanie, jeśli dla obu kolorów podasz wartości procentowe, które nie sumują się do 100%?

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

Ta kombinacja color-mix() powoduje przezroczystość, czyli przezroczystość 40%. Gdy proporcje nie sumują się do 100%, wynikowa mieszanka nie będzie nieprzezroczysta. Żaden z kolorów nie będzie w pełni zmieszany.

Zagnieżdżanie color-mix()

Podobnie jak w przypadku całego CSS, zagnieżdżanie jest obsługiwane prawidłowo i zgodnie z oczekiwaniami. Funkcje wewnętrzne będą rozwiązywane jako pierwsze i zwracają swoje wartości do kontekstu nadrzędnego.

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

Możesz zagnieżdżać tyle, ile potrzebujesz, aby uzyskać oczekiwany rezultat.

Tworzenie jasnego i ciemnego schematu kolorów

Stwórzmy schematy kolorów za pomocą color-mix().

Podstawowy schemat kolorów

W poniższym CSS na podstawie koloru marki w formacie szesnastkowym tworzone są jasny i ciemny motyw. Jasny motyw tworzy 2 ciemnoniebieskie kolory tekstu i bardzo jasny biały kolor tła. Następnie w zapytaniu o media dotyczącym ciemnych preferencji do właściwości niestandardowych przypisywane są nowe kolory, dzięki czemu tło jest ciemne, a kolory tekstu – jasne.

: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 osiąga się przez zmieszanie bieli lub czerni z kolorem marki.

Średni schemat kolorów

Można to rozszerzyć, dodając więcej niż jasne i ciemne motywy. W poniższej wersji demonstracyjnej zmiany w grupie przycisków opcji aktualizują atrybut w tagu HTML [color-scheme="auto"], co umożliwia selektorom warunkowe stosowanie motywu kolorystycznego.

Ta pośrednia wersja demonstracyjna pokazuje też technikę motywów kolorystycznych, w której wszystkie kolory motywu są wymienione w :root. Dzięki temu można je łatwo zobaczyć i w razie potrzeby dostosować. Później w arkuszu stylów możesz używać zmiennych zgodnie z ich definicją. Pozwala to uniknąć przeszukiwania arkusza stylów w celu znalezienia manipulacji kolorami, ponieważ wszystkie znajdują się w początkowym bloku :root.

Ciekawe przypadki użycia

Ana Tudor ma świetną wersję demonstracyjną z kilkoma przypadkami użycia do przeanalizowania:

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

Narzędzia deweloperskie w Chrome doskonale obsługują color-mix(). Rozpoznają i wyróżniają składnię, tworzą podgląd mieszanki obok stylu w panelu Style i umożliwiają wybieranie alternatywnych kolorów.

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

Miłego mieszania!