Mikser kolorów
Mieszaj dwa kolory w wybranej przestrzeni kolorów, w dowolnych proporcjach, tak jak robi to CSS color-mix(). Wprowadź dwa kolory w dowolnym formacie CSS, ustaw udział drugiego koloru od 0 do 100 procent i wybierz OKLab, OKLCH, Lab, LCH, sRGB, linear sRGB, Display P3, HSL, HWB lub XYZ. Otrzymasz wynik w formatach HEX, RGB, HSL i OKLCH oraz gotowe wyrażenie color-mix() do arkusza stylów.
Najczęściej zadawane pytania
Jak działa ustawienie ilości?
Ilość określa udział koloru 2 w mieszance. 0% zwraca kolor 1, 100% zwraca kolor 2, a przy 50% otrzymujemy punkt środkowy między nimi w wybranej przestrzeni. Odpowiada to color-mix(in space, color1 (100 - p)%, color2 p%).
Którą przestrzeń kolorów wybrać?
Domyślna przestrzeń OKLab jest percepcyjnie jednorodna i pozwala uniknąć mętnych lub ciemnych kolorów pośrednich. sRGB miesza kanały zakodowane gamma, tak jak starsze przeglądarki i Sass, przez co mieszanki nasyconych kolorów są ciemniejsze i mniej wyraziste. Lab to starsza percepcyjna przestrzeń CIE, która działa podobnie do OKLab, ale zapewnia mniejszą równomierność odcieni niebieskiego.
Jak działają przestrzenie oparte na barwie?
OKLCH, LCH, HSL i HWB interpolują barwę po krótszym łuku koła kolorów — domyślnie CSS — dzięki czemu środkowy kolor zachowuje nasycenie i może być bardziej wyrazisty niż którykolwiek z kolorów wejściowych. Jeśli jeden kolor jest neutralną szarością bez barwy, używana jest barwa drugiego koloru.
Do czego służą linear sRGB i XYZ?
Obie przestrzenie mieszają liniowo natężenie światła, tak jak nakładające się wiązki, dzięki czemu kolor pośredni wygląda jaśniej niż w sRGB. Przydają się do efektów opartych na fizyce oraz do odwzorowywania wyglądu rozmytych lub mieszanych pikseli.
Jak obsługiwana jest przezroczystość?
Podobnie jak CSS color-mix(), mikser interpoluje z użyciem premnożonej alfy, więc przezroczysty kolor nie przesuwa mieszanki w stronę czerni. Sama alfa jest interpolowana w tych samych proporcjach i pojawia się w 8-cyfrowym kodzie hex oraz po ukośniku w funkcjach CSS.
Jakich formatów danych wejściowych mogę użyć?
Kody hex z # lub bez, CSS nazwy kolorów, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() przestrzenie, takie jak display-p3, oraz cmyk() — w dowolnej kombinacji. Każdy kolor może mieć maksymalnie 100 znaków.
Co się dzieje, gdy wynik wykracza poza sRGB?
Mieszanie w Display P3, OKLCH lub LCH może dać kolory, których sRGB nie potrafi wyświetlić. Wartości HEX, RGB i HSL są wtedy odwzorowywane na sRGB algorytmem CSS Color 4, a wynik otrzymuje odpowiednią adnotację; wartość OKLCH zachowuje kolor bez odwzorowania.
Jak używać wyrażenia color-mix()?
Wklej je do dowolnej właściwości CSS, która przyjmuje kolor. Wyrażenie wskazuje kolory wejściowe za pomocą kodów hex lub oklch() w przypadku kolorów z szerokiej gamy, dzięki czemu przeglądarka ponownie oblicza tę samą mieszankę. color-mix() działa we wszystkich aktualnych wersjach Chrome, Edge, Firefox i Safari.
Jak dokładny jest wynik?
Ilość jest wyrażona w pełnych procentach, a mieszanka jest obliczana z pełną precyzją przy użyciu biblioteki culori. Kanały RGB są zaokrąglane do liczb całkowitych, wartości procentowe HSL do dwóch miejsc po przecinku, a jasność i chroma OKLCH do czterech. Dlatego przeglądarki mogą różnić się o jedną jednostkę na ostatnim miejscu.
Jak uzyskać kilka kroków między dwoma kolorami?
Uruchom mikser z różnymi wartościami, na przykład 25%, 50% i 75%. Aby uzyskać pełną skalę prowadzącą do bieli, czerni lub szarości, użyj generatorów odcieni, przyciemnień i tonów kolorów, które wyświetlą wszystkie kroki w jednej tabeli.