CSS color-mix()

Adam Argyle

Usługa porównywania cen: color-mix() umożliwia mieszanie kolorów w dowolnej z obsługiwanych przestrzeni kolorów bezpośrednio z CSS.

Przed color-mix() do przyciemnienia, rozjaśnienia lub zmniejszenia koloru deweloperzy używali procesy wstępnego przetwarzania danych CSS, calc() w kolorze kanałów.

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

Firma Sass świetnie sobie radzi wyprzedzając specyfikację CSS dotyczącą kolorów. Nie było jednak żadnego aby mieszać kolory w CSS. Aby zbliżyć się do siebie, musisz obliczyć cząstkę kolorów. Oto skrócony przykład tego, jak obecnie CSS może symulować mieszanie:

.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 które umożliwia mieszanie kolorów z kodem CSS. Deweloperzy mogą wybrać przestrzeń kolorów, którą chcą mieszać i jak dominujący ma być każdy z kolorów.

.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

Arkusz CSS funkcjonuje w wielu przestrzeniach i gamie kolorów, określenie przestrzeni kolorów do mieszania nie jest opcjonalne. Co więcej, różnią się przestrzenie kolorów mogą diametralnie zmienić efekty ich mieszania, przestrzeni kolorów pomoże Ci uzyskać pożądane wyniki.

Aby uzyskać interaktywne wprowadzenie, wypróbuj to narzędzie color-mix(): - Poznaj efekty każdej przestrzeni kolorów. - Poznaj efekty interpolacji barw w przypadku mieszania koloru cylindrycznego pokój (lch, oklch, hsl i hwb). - Zmień mieszane kolory, klikając jedno z dwóch górnych pól kolorów. – Za pomocą suwaka zmień współczynnik miksowania. – Wygenerowany kod CSS color-mix() dostępny na dole.

Łączenie różnych przestrzeni kolorów

Domyślna przestrzeń kolorów do mieszania (i gradientów) to oklab. Zapewnia i uzyskiwanie spójnych wyników. Możesz też określić alternatywne przestrzenie kolorów, odpowiednio do swoich potrzeb.

Weźmy na przykład black i white. Przestrzeń kolorów, w której mieszają się kolory, to tak duża różnica, 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);

To bardzo wymierne efekty!

Weźmy blue i white dla innego przykładu. Wybrałem tę opcję dlatego, jest tak, że na wyniki wpływa kształt przestrzeni kolorów. W tym przypadku większość przestrzeni kolorów zmienia kolor z białego na niebieski. it a także pokazuje, że oklab to niezawodna przestrzeń kolorów do mieszania. który odpowiada oczekiwaniom większości użytkowników, jakim jest mieszanie białego i niebieskiego (nie fioletowego).

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

Nauka efektów przestrzeni kolorów za pomocą color-mix() to doskonały sposób na tworzenie gradientów . Składnia koloru 4 umożliwia też gradientom określenie przestrzeni kolorów, gdzie 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ń kolorów jest „najlepsza”, nie ma żadnej. Dlatego jest tyle opcji! Nie powstały też żadne nowe przestrzenie kolorów (zobacz oklch i oklab), jeśli było „najlepsze”. Każdy kolor to właśnie miejsce, w którym warto się promować, może okazać się właściwym wyborem.

Jeśli na przykład chcesz uzyskać efekt żywej miksu, użyj hsl lub hwb. W następujących demo, dwa żywe kolory (purpurowy i limonkowy) są wymieszane ze sobą oraz hsl i hwb dają żywe kolory, natomiast soptout i oklab dają kolory nienasycone.

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 odcienie kolory, algorytm srgb i oklab dają ciemniejszy odcień niebieski.

Poświęć pięć minut na przetestowanie color-mix()placu zabaw, aby przetestować różne kolory i miejsc, aby poznać zalety każdego z nich. Poza tym będziemy się więc spodziewać większej liczby wskazówek dotyczących przestrzeni kolorów, możliwości w naszych interfejsach.

Dostosowywanie metody interpolacji barw

Jeśli wybierzesz cylindryczną przestrzeń kolorów, praktycznie każdy kolor z kanałem odcienia h, który akceptuje kąt, możesz określić, czy interpolacja idzie shorter, longer, decreasing i increasing. To jest ale znajdziesz więcej informacji w tym przewodniku po kolorach HD.

Oto ten sam przykład mieszania kolorów od niebiesko-białej, ale tym razem jest on dostępny tylko w w przestrzeni walcowej z różnymi metodami interpolacji barw.

Oto kolejny Codepen stworzony przeze mnie, który pomaga zwizualizować interpolację barw, zwłaszcza gradientów. Dzięki temu zrozumiesz, jak każda daje efekt mieszania, gdy określona jest interpolacja barw, przyjrzyj się temu!

Łączenie z różnymi składniami kolorów

Do tej pory mieszaliśmy głównie kolory CSS z nazwami, na przykład blue i white. Kolor CSS mieszanie jest gotowe do mieszania kolorów z dwóch różnych przestrzeni kolorów. To jest Innym powodem, dla którego warto określić przestrzeń kolorów mieszania, jest to, wspólnej przestrzeni, w której dwa 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 wartości hsl i display-p3 zostaną przekonwertowane na wartości oklch. a potem mieszać. Dość fajny i elastyczny.

Dostosowywanie proporcji mieszania

Jest mało prawdopodobne, że za każdym razem, gdy mieszasz barwę, jak większość dotychczasowych przykładów. Mamy dobrą wiadomość. Dostępna jest składnia słowa kluczowego określając, jaka część każdego koloru powinna być widoczna w mieszaninie.

Na początek zobaczmy przykładowe składanki, które są równoważne 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%);
}

Myślę, że te przykłady dobrze ilustrują skrajne przypadki. Pierwszy zestaw Przykłady pokazują, że wartość 50% nie jest wymagana, ale można ją opcjonalnie określić. Ostatni Pokazuje interesujący przypadek, kiedy współczynniki przekroczą 100% ale ich wartości są jednakowo ograniczane do 100%.

Zwróć też uwagę, że jeśli tylko jeden kolor określa współczynnik, przyjmuje się, że drugi a reszta – do 100%. Oto kilka dodatkowych przykładów, które pomogą to zilustrować. zachowanie użytkownika.

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 */

Poniższe przykłady ilustrują 2 reguły: 1. Gdy współczynniki przekraczają 100%, są one ograniczane i równomiernie rozłożone. 1. Jeśli podany jest tylko jeden współczynnik proporcji, drugi kolor jest ustawiany na wartość 100 minus ten współczynnik.

Ostatnia zasada jest nieco mniej oczywista. Co się dzieje, gdy procenty są podane dla obu kolorów i nie sumują się do 100%?

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

Ta kombinacja wartości color-mix() zapewnia przejrzystość, 40% oraz przezroczystość. Jeśli współczynniki nie sumują się do 100%, powstała mieszanka nie będzie nieprzezroczysta. Żaden z kolorów nie będzie w pełni wymieszany.

Zagnieżdżanie: color-mix()

Podobnie jak w przypadku wszystkich arkuszy CSS, zagnieżdżanie przebiega prawidłowo i zgodnie z oczekiwaniami. funkcje wewnętrzne będą jako pierwsze i zwracają 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.

Tworzę jasny i ciemny schemat 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 wartości szesnastkowej marki koloru. Jasny motyw tworzy 2 ciemnoniebieskie kolory tekstu i bardzo jasny biały kolor powierzchni tła. W zapytaniu o multimedia w ustawieniach trybu ciemnego właściwości mają przypisane nowe kolory, tak aby tło było ciemne, a kolory tekstu są lekkie.

: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żesz pójść o krok dalej i dodać więcej motywów niż jasne i ciemne. W w poniższej prezentacji, zmiany grupy opcji aktualizacji atrybutu w kodzie HTML [color-scheme="auto"], który umożliwia stosowanie warunkowego przez selektory motyw kolorystyczny.

Ta wersja demonstracyjna dla średnio zaawansowanych pokazuje również technikę motywów, w której wszystkie elementy kolory motywu są wymienione w :root. Dzięki temu łatwiej jest je zobaczyć, i dostosować w razie potrzeby. W dalszej części arkusza stylów można używać zmiennych zdefiniowano jego definicję. Dzięki temu nie trzeba tracić czasu na manipulowanie kolorami są one zawarte w początkowym bloku :root.

Więcej ciekawych przypadków użycia

Ana Tudor ma świetną wersję demonstracyjną z kilkoma przykładami użycia do badania:

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

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

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

Miłego miksowania!