Mieszanie kolorów
Mieszaj dwa kolory w dowolnych proporcjach w OKLab, OKLCH lub sRGB. Skopiuj wynik lub gotowe wyrażenie color-mix().
- HEX
- RGB
- OKLCH
CSS z wersją zapasową
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Kroki od pierwszego do drugiego
Ta sama mieszanka w każdej przestrzeni
sRGB szarzeje i ciemnieje w środku. OKLab trzyma równą jasność. OKLCH i HSL zachowują nasycenie, ale wędrują po kole barw.
Pytania i odpowiedzi
Czym jest color-mix() w CSS?
color-mix() to funkcja CSS, która miesza dwa kolory w wybranej przestrzeni barw, na przykład color-mix(in oklab, #ff5733, #3b82f6 30%). Działa we wszystkich aktualnych przeglądarkach. Dla starszych dodaj przed nią zwykły kolor jako zapasowy, tak jak we fragmencie kodu powyżej.
W jakiej przestrzeni barw mieszać?
OKLab to najbezpieczniejszy wybór domyślny: środek zachowuje jasność i nie robi się brudny. OKLCH utrzymuje nasycenie, ale idzie najkrótszą drogą po kole barw, więc czerwony i niebieski przechodzą przez fiolet i róż. sRGB to sposób starych narzędzi, a środek często wychodzi szary i ciemny.
Dlaczego mieszanie światła różni się od mieszania farb?
Ekrany dodają światło, więc to narzędzie uśrednia wartości światła: niebieski i żółty dają szarość albo blady kolor, a nie zieleń. Farba pochłania światło, dlatego ta sama mieszanka na papierze wygląda na zieloną. Jeśli chcesz przewidzieć efekt farb, użyj modelu mieszania farb zamiast przestrzeni barw ekranu.