Funkcja CSS color-mix() umożliwia mieszanie kolorów w dowolnej z obsługiwanych przestrzeni kolorów bezpośrednio z poziomu CSS.
Przed color-mix() aby przyciemnić, rozjaśnić lub zmniejszyć nasycenie koloru, programiści używali preprocesorów CSS lub calc() na kanałach kolorów.
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Firma Sass wykonała świetną pracę, która wyprzedziła specyfikację koloru CSS. Nie istnieje jednak żaden prawdziwy sposób na mieszanie kolorów w CSS. Aby uzyskać zbliżenie, musisz zliczać cząstkowe wartości 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() umożliwia mieszanie kolorów w CSS. Deweloperzy mogą określić, do której przestrzeni kolorów
mieszają się kolory i jak dominują w nich poszczególne kolory.
.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);
}
Tego chcemy. Elastyczność, zaawansowane funkcje i w pełni funkcjonalne interfejsy API. Pokochaj.
Mieszanie kolorów w CSS
CSS istnieje w świecie wielu kolorów i gamy kolorów, dlatego określanie przestrzeni kolorów do mieszania nie jest opcjonalne. Co więcej, różne przestrzenie kolorów mogą radykalnie zmienić wyniki łączenia, więc znajomość efektów przestrzeni kolorów pomaga uzyskać pożądane wyniki.
Jeśli chcesz poznać interaktywną prezentację, wypróbuj to narzędzie color-mix():
– Poznaj efekty stosowania poszczególnych przestrzeni kolorów.
– Poznaj skutki interpolacji barw podczas mieszania w walcowej przestrzeni kolorów (lch, oklch, hsl i hwb).
– Aby zmienić mieszane kolory, kliknij jedno z dwóch 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 różnych przestrzeni kolorów
Domyślna przestrzeń kolorów do mieszania (i gradientów) to oklab. Daje to spójne wyniki. Możesz też określić alternatywne przestrzenie kolorów, aby dostosować kombinację do swoich potrzeb.
Przyjrzyjmy się przykładom black i white. Przestrzeń kolorów, którą wmieszają się w jedną,
nie ma tu większego 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);
To ma ogromny wpływ!
Oto inny przykład: blue i white. Wybrałam tę opcję, bo to przypadek,
w którym kształt przestrzeni kolorów może wpływać na wyniki. W tym przypadku większość przestrzeni kolorów zmienia kolor z białego na niebieski. Ten wskaźnik pokazuje też, że oklab to skuteczna przestrzeń do mieszania kolorów, która najbardziej odpowiadałaby oczekiwaniom większości klientów w odniesieniu do bieli i niebieskiego (a 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);
Poznawanie efektów przestrzeni kolorów za pomocą funkcji color-mix() to świetna wiedza na temat tworzenia gradientów. Składnia koloru 4 pozwala też gradientom określać przestrzeń kolorów, w której gradient pokazuje mieszankę na 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);
}
Jeśli zastanawiasz się, która przestrzeń kolorów jest „najlepsza”, nie ma ona żadnej. Dlatego jest tak wiele opcji. Gdyby jedna z nich była „najlepsza”, nie byłoby też wynalezionych nowych przestrzeni kolorów (patrz oklch i oklab). Każda przestrzeń kolorów może mieć wyjątkowy moment, w którym można zabłysnąć. To doskonały wybór.
Jeśli na przykład chcesz uzyskać wyrazisty wynik miksu, użyj hsl lub hwb. W poniższym przykładzie 2 żywe kolory (magenta i limonkowy) są ze sobą mieszane, a hsl i hwb dają żywe kolory, natomiast pliki rgb i oklab dają kolory nienasycone.
Jeśli zależy Ci na spójności i subtelności, użyj narzędzia oklab. W tej prezentacji, która łączy niebieski i czarny, hsl i hwb dają zbyt żywe kolory i zmieniają odcienie kolorów, a srgb i oklab – ciemniejszy błękit.
Poświęć 5 minut na plac zabaw color-mix(), testując różne kolory i przestrzenie, a poznasz zalety każdej przestrzeni. Będziemy też oczekiwać więcej wskazówek dotyczących przestrzeni kolorów, ponieważ wszyscy dostosowujemy się do ich potencjału w interfejsach użytkownika.
Dostosowywanie metody interpolacji barw
Jeśli wybierzesz mieszanie w walcowej przestrzeni kolorów, zasadniczo dowolnej przestrzeni kolorów z kanałem odcienia h, który akceptuje kąt, możesz określić, czy interpolacja: shorter, longer, decreasing i increasing. Więcej informacji na ten temat znajdziesz w tym przewodniku dotyczącym kolorów HD.
Oto ten sam przykład mieszania kolorów niebieskich i białych, ale tym razem widzimy go tylko w przestrzeniach walcowych z różnymi metodami interpolacji barw.
Oto kolejny Codepen, który przygotowałem, aby pomóc w wizualizacji interpolacji barw, ale konkretnie dla gradientów. Wydaje mi się, że pomoże Ci to zrozumieć, jak przestrzenie poszczególnych kolorów zapewniają mieszankę przy określonej interpolacji barw. Przeprowadź badanie.
Mieszanie z różnymi składnikami kolorów
Do tej pory używaliśmy głównie kolorów nazwanych CSS, np. blue i white. Mieszanie kolorów CSS umożliwia mieszanie kolorów z 2 różnych przestrzeni kolorów. To jeszcze jeden powód, dla którego kluczowe jest określenie przestrzeni barw podczas mieszania, ponieważ mieszana jest wspólna przestrzeń dla obu kolorów, które znajdują się w różnych miejscach.
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 format oklch, a następnie zmieszane. Całkiem fajne i elastyczne.
Dostosowywanie proporcji mieszania
Nie jest mało prawdopodobne, że za każdym razem, gdy mieszasz, otrzymasz taką samą część każdego koloru, jak w przypadku większości dotychczasowych przykładów. Dobra wiadomość: dostępna jest składnia umożliwiająca określenie, ile danego koloru powinno znaleźć się w wynikowej kombinacji.
Na początek zapoznaj się z przykładowymi kombinacjami, które są równoważne (i 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%);
}
Te przykłady dobrze ilustrują skrajne przypadki. Pierwszy zestaw przykładów pokazuje, że wartość 50% nie jest wymagana, ale można ją opcjonalnie określić. Ostatni przykład ilustruje ciekawy przypadek, gdy zsumowane współczynniki przekraczają 100%, są jednakowo ograniczone do wartości 100%.
Pamiętaj też, że jeśli tylko jeden kolor określa współczynnik, przyjmuje się, że drugi kolor odpowiada pozostałemu współczynnikowi do 100%. Oto kilka dodatkowych przykładów, które ilustrują ten zjawisko.
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 */
Przykłady poniżej 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, drugi kolor jest ustawiany jako 100 pomniejszony o ten współczynnik.
Ostatnia zasada jest nieco mniej oczywista. Co się stanie, jeśli wartości procentowe dla obu kolorów nie sumują się do 100%?
color-mix(in lch, purple 20%, plum 20%)
To połączenie atrybutu color-mix() zapewnia przejrzystość i przejrzystość 40%.
Jeśli współczynniki nie sumują się do 100%, wynikowa kombinacja nie będzie przezroczysta.
Żaden z kolorów nie będzie w pełni mieszany.
Umieszczanie color-mix()
Tak jak w przypadku wszystkich arkuszy CSS, zagnieżdżanie jest realizowane prawidłowo i zgodnie z oczekiwaniami. Funkcje wewnętrzne najpierw wykrywają 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 bloków, ile potrzebujesz, aby osiągnąć oczekiwany efekt.
Tworzenie jasnego i ciemnego schematu kolorów
Twórzmy schematy kolorów z użyciem color-mix().
Podstawowy schemat kolorów
W tym kodzie CSS jasny i ciemny motyw są tworzone na podstawie szesnastkowego koloru marki. Motyw jasny tworzy dwa ciemnoniebieskie kolory tekstu i bardzo jasny biały kolor tła. Następnie w zapytaniu o media w ramach ciemnego ustawienia właściwości niestandardowe otrzymują nowe kolory, aby tło było ciemne, a tekst – 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 można osiągnąć przez połączenie bieli lub czerni z kolorem marki.
Średnio zaawansowany schemat kolorów
Możesz zrobić to o krok dalej, dodając nie tylko jasne i ciemne motywy. W tej prezentacji zmiany w grupie przycisków powodują aktualizację atrybutu w tagu HTML [color-scheme="auto"], co umożliwia selektorom warunkowe stosowanie motywu kolorystycznego.
Ta wersja demonstracyjna dla średnio zaawansowanych pokazuje też technikę pogrupowania kolorów, w której wszystkie kolory motywu są wymienione w polu :root. Dzięki temu możesz je łatwo wyświetlać
i w razie potrzeby dostosowywać. W dalszej części arkusza stylów możesz używać tych zmiennych zgodnie z ich definicjami. Dzięki temu nie trzeba będzie szukać kolejnych kolorów w arkuszu stylów, ponieważ wszystkie one znajdują się w początkowym bloku :root.
Ciekawe przypadki użycia
Ana Tudor ma świetną prezentację, która przedstawia kilka przypadków użycia do nauki:
Debugowanie funkcji color-mix() za pomocą Narzędzi deweloperskich
Narzędzia deweloperskie w Chrome obsługują dokładnie color-mix(). Rozpoznaje i wyróżnia składnię, tworzy podgląd połączenia obok stylu w panelu Style i umożliwia wybór alternatywnych kolorów.
W Narzędziach deweloperskich będzie to wyglądać mniej więcej tak:
Udanego miksowania!