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 wstępnych procesorów CSS lub narzędzia calc() w kanałach kolorów.
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Sass wyprzedził specyfikację Kolorów CSS pod swoim kątem. Nie ma jednak rzeczywistego sposobu na łączenie kolorów w CSS. Aby osiągnąć ten efekt, trzeba zliczać częściowe 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. Programiści mogą wybrać, do której przestrzeni kolorów się pasują
i jak dominują w niej 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ść, wydajność i w pełni funkcjonalne interfejsy API. Pokochaj.
Mieszanie kolorów w CSS
CSS istnieje w świecie wielokolorowej przestrzeni i gamy kolorów, dlatego określanie przestrzeni kolorów do mieszania nie jest opcjonalne. Co więcej, różne przestrzenie kolorów mogą diametralnie wpłynąć na wyniki mieszania kolorów, więc znajomość efektów przestrzeni kolorów pomoże Ci uzyskać oczekiwane rezultaty.
Jeśli chcesz poznać interaktywną prezentację, skorzystaj z tego narzędzia color-mix():
– Poznaj efekty każdej przestrzeni kolorów.
– Poznaj skutki interpolacji barw podczas mieszania walcowej przestrzeni kolorów (lch, oklch, hsl i hwb).
– Aby zmienić mieszane kolory, kliknij jedną z dwóch górnych pól kolorów.
- Użyj suwaka, żeby zmienić proporcje mieszania.
– Wygenerowano color-mix() kod CSS dostępny u dołu.
Mieszanie różnych przestrzeni 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ć kombinację do swoich potrzeb.
Przyjrzyjmy się przykładom black i white. Przestrzeń barw, w której wymieszane są kolory,
nie jest aż tak ważna, 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 wielki wpływ!
Inny przykład to blue i white. Wybrałam tę opcję, bo na wyniki
może mieć wpływ kształt przestrzeni kolorów. W tym przypadku większość przestrzeni kolorów zmienia kolor z białego na błękitny. Wskazuje on też, że oklab to niezawodna przestrzeń kolorów do mieszania kolorów, która w większości osób spełnia oczekiwania białego i niebieskiego (bez 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);
Poznanie efektów przestrzeni kolorów za pomocą funkcji color-mix() to świetna wiedza na temat tworzenia gradientów. Składnia koloru 4 umożliwia też gradientom określanie przestrzeni kolorów, w której gradient pokazuje mieszankę na określonym 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ę, jaka przestrzeń kolorów jest „najlepsza”, to znaczy, że nie ma takiej. Dlatego jest tak wiele możliwości. Nie wynaleziono też nowych przestrzeni kolorów (patrz oklch i oklab), jeśli któraś z nich będzie „najlepsza”. Każda przestrzeń kolorów może mieć wyjątkowe znaczenie i być właściwym wyborem.
Jeśli na przykład chcesz uzyskać bardziej wyrazisty wynik, użyj hsl lub hwb. W poniższym przykładzie 2 żywe kolory (magenta i limonkowy) są mieszane, a hsl i hwb dają żywe kolory, natomiast kolory srgb i oklab dają nienasycone kolory.
Jeśli zależy Ci na spójności i subtelności, użyj oklab. W tej prezentacji, w której miesza się błękit i czerń, kolory hsl i hwb są zbyt żywe i zmieniają odcień, natomiast kolory srgb i oklab dają ciemniejszy niebieski.
Poświęć 5 minut na plac zabaw color-mix(), testując różne kolory i przestrzenie, aby poznać zalety każdej przestrzeni. W miarę jak wszyscy będziemy dostosowywać się do ich potencjału w interfejsach użytkownika,
spodziewamy się też dalszych wskazówek dotyczących przestrzeni kolorów.
Dostosowywanie metody interpolacji barw
Jeśli wybierzesz mieszanie w walcowej przestrzeni kolorów, zasadniczo dowolnej przestrzeni kolorów z kanałem barw h, który akceptuje kąt, możesz określić, czy interpolacja wynosi shorter, longer, decreasing i increasing. Jeśli chcesz dowiedzieć się więcej,
ten artykuł zawiera Przewodnik po kolorach HD.
Oto przykład połączenia niebieskiego z białym, ale tym razem tylko w przestrzeniach walcowych z różnymi metodami interpolacji barw.
Oto kolejny przygotowany przeze mnie Codepen, który pomoże Ci zwizualizować interpolację barw, zwłaszcza z użyciem gradientów. Wydaje mi się, że pomoże Ci to zrozumieć, jak każda przestrzeń kolorów daje rezultat mieszania po określeniu interpolacji barw. Pozwól jej to zbadać.
Mieszanie różnych składni kolorów
Do tej pory używaliśmy głównie kolorów nazwanych CSS, np. blue i white. Funkcja mieszania kolorów CSS jest gotowa do mieszania kolorów z 2 różnych przestrzeni kolorów. Jest to jeszcze jeden powód, dla którego kluczowe jest określenie przestrzeni kolorów na potrzeby mieszania, ponieważ określa ona wspólną przestrzeń, gdy oba kolory znajdują się w różnych miejscach.
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));
W poprzednim przykładzie pola hsl i display-p3 zostaną przekonwertowane na format oklch, a następnie zmieszane. Całkiem fajne i elastyczne.
Dostosowywanie współczynników mieszania
Mało prawdopodobne, że za każdym razem, gdy mieszasz kolory, chcesz uzyskać równą ich część, tak jak w przypadku większości przykładów. Mamy dobrą wiadomość: dostępna jest składnia, która pozwala określić, ile kolorów powinno się znaleźć 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%);
}
Uważam, że te przykłady dobrze pokazują skrajne przypadki. Pierwszy zestaw przykładów pokazuje, że wartość 50% nie jest wymagana, ale można ją opcjonalnie określić. Ostatni przykład pokazuje interesujący przypadek, w którym po dodaniu wszystkich współczynników wartość przekracza 100%, są one jednakowo ograniczane do wartości 100%.
Zwróć też uwagę, że jeśli tylko jeden kolor określa współczynnik, przyjmuje się, że drugi kolor jest reszta z wartości 100%. Oto kilka dodatkowych przykładów, które obrazują to działanie.
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 pokazują 2 reguły: 1. Gdy współczynniki przekraczają 100%, są ograniczane i równomiernie rozkładane. 1. Jeśli podany jest tylko jeden współczynnik, drugi kolor jest ustawiany jako 100 minus ten współczynnik.
Ostatnia reguła jest nieco mniej oczywista. Co się stanie, jeśli wartości procentowe dla obu kolorów zostaną podane i nie sumują się do 100%?
color-mix(in lch, purple 20%, plum 20%)
Ta kombinacja atrybutu color-mix() zapewnia przejrzystość i przejrzystość: 40%.
Jeśli współczynniki nie sumują się do 100%, wynikowa kombinacja będzie nieprzezroczysta.
Żaden z kolorów nie zostanie w pełni mieszany.
Zagnieżdżanie: color-mix()
Podobnie jak w przypadku kodu CSS, zagnieżdżanie przebiega zgodnie z oczekiwaniami. Funkcje wewnętrzne są najpierw ustalane, a ich wartości zwracają do kontekstu nadrzędnego.
color-mix(in lch, purple 40%, color-mix(plum, white))
Możesz zagnieździć tyle warstw, ile potrzebujesz, aby osiągnąć oczekiwany wynik.
Tworzenie jasnych i ciemnych schematów kolorów
Twórzmy schematy kolorów w aplikacji color-mix().
Podstawowy schemat kolorów
W tym kodzie CSS jasny i ciemny motyw są tworzone na podstawie szesnastkowego koloru marki. Jasny motyw tworzy dwa ciemnoniebieskie kolory tekstu i bardzo jasny biały kolor tła. Następnie w zapytaniu o media ustawienia ciemnego przypisują właściwości niestandardowe nowe kolory, aby kolor tła był ciemny, 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 można osiągnąć dzięki połączeniu bieli lub czerni z kolorem danej marki.
Średni schemat kolorów
Możesz zrobić krok dalej, dodając więcej niż jasne i ciemne motywy. W tej prezentacji zmiany w grupie opcji spowodują aktualizację atrybutu w tagu HTML [color-scheme="auto"], co umożliwi selektorom warunkowe zastosowanie motywu kolorów.
Ta demonstracja pośrednia pokazuje również technikę pogrupowania kolorów, w której wszystkie kolory motywu są wymienione w polu :root. Dzięki temu można je łatwo wyświetlać
i w razie potrzeby dostosowywać. W dalszej części arkusza stylów będzie można używać zdefiniowanych przez siebie zmiennych. Pozwala to uniknąć konieczności przeszukiwania arkusza stylów pod kątem modyfikacji kolorów, ponieważ wszystkie one są zawarte w początkowym bloku :root.
Ciekawe przypadki użycia
Ana Tudor ma świetną prezentację, która przedstawia kilka przypadków użycia do analizy:
Debugowanie funkcji color-mix() za pomocą Narzędzi deweloperskich
Narzędzia deweloperskie w Chrome dobrze obsługują język color-mix(). Rozpoznaje i wyróżnia składnię, tworzy podgląd miksu tuż 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:
Miłego tworzenia!