# 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.

Twoja reklama tutaj?

[Napisz do nas](mailto:hi@dennn.is?subject=Reklama%20w%20OneClick%20Pro)

[Reklama Pakiet wtyczek gotowy do pracy z agentami dla WordPress.](https://sleekwp.com/?ref=oneclickpro)