Miešač farieb
Namiešajte dve farby vo zvolenom farebnom priestore v ľubovoľnom pomere, podobne ako to robí CSS color-mix(). Zadajte dve farby v ľubovoľnom formáte CSS, nastavte podiel druhej farby od 0 do 100 percent a vyberte OKLab, OKLCH, Lab, LCH, sRGB, lineárne sRGB, Display P3, HSL, HWB alebo XYZ. Výsledok sa zobrazí vo formátoch HEX, RGB, HSL a OKLCH a tiež ako hotový výraz color-mix() pre váš štýlový súbor.
Často kladené otázky
Ako funguje množstvo?
Množstvo predstavuje podiel farby 2 v zmesi. Pri 0 % sa vráti farba 1, pri 100 % farba 2 a pri 50 % bude výsledok v zvolenom priestore presne medzi nimi. Zodpovedá to zápisu color-mix(in space, color1 (100 - p)%, color2 p%).
Ktorý farebný priestor si mám vybrať?
Predvolený priestor OKLab je percepčne jednotný a zabraňuje vzniku mdlých alebo tmavých medzistupňov. sRGB mieša kanály kódované gama korekciou, podobne ako staršie prehliadače a Sass, preto sú zmesi sýtych farieb tmavšie a menej výrazné. Lab je starší percepčný priestor CIE a správa sa podobne ako OKLab, no modré odtiene sú v ňom menej rovnomerné.
Ako fungujú priestory založené na odtieni?
OKLCH, LCH, HSL a HWB interpolujú odtieň po kratšom oblúku farebného kruhu, ktorý je predvolený pre CSS, takže stredný odtieň si zachová sýtosť a môže byť výraznejší než ktorákoľvek zo vstupných farieb. Ak je jedna farba neutrálna sivá bez odtieňa, použije sa odtieň druhej farby.
Na čo slúžia lineárne sRGB a XYZ?
Oba priestory miešajú intenzitu svetla lineárne, ako keď sa prekrývajú svetelné lúče, takže výsledný stred je svetlejší než v sRGB. Sú užitočné pri fyzikálne založených efektoch a pri dosahovaní vzhľadu rozmazaných alebo prelínajúcich sa pixelov.
Ako sa spracúva priehľadnosť?
Podobne ako CSS color-mix(), miešač interpoluje s prednásobenou alfou, takže priehľadná farba neposúva zmes smerom k čiernej. Samotná alfa sa interpoluje v rovnakom pomere a zobrazuje sa v 8-miestnom hexadecimálnom zápise a za lomkou vo funkciách CSS.
Ktoré vstupné formáty môžem použiť?
Hexadecimálne kódy s # alebo bez neho, CSS názvy farieb, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), priestory color(), napríklad display-p3, a cmyk(), v akejkoľvek kombinácii. Každá farba môže mať najviac 100 znakov.
Čo sa stane, ak je výsledok mimo rozsahu sRGB?
Miešaním v priestore Display P3, OKLCH alebo LCH môžu vzniknúť farby, ktoré sRGB nedokáže zobraziť. HEX, RGB a HSL sa potom prevedú do sRGB algoritmom CSS Color 4 a výsledok bude označený poznámkou, zatiaľ čo hodnota OKLCH zachová farbu bez prevodu.
Ako použijem výraz color-mix()?
Vložte ho do ľubovoľnej vlastnosti CSS, ktorá prijíma farbu. Vstupy identifikuje podľa hexadecimálneho kódu alebo pomocou oklch() pri farbách so širokým gamutom, takže prehliadač vypočíta rovnakú zmes. color-mix() funguje vo všetkých aktuálnych verziách prehliadačov Chrome, Edge, Firefox a Safari.
Aký presný je výsledok?
Množstvo je vyjadrené celým percentom a zmes sa počíta s plnou presnosťou pomocou knižnice culori. Kanály RGB sa zaokrúhľujú na celé čísla, percentá HSL na dve desatinné miesta a svetlosť a sýtosť OKLCH na štyri, takže prehliadače sa môžu v poslednej číslici líšiť o jednu jednotku.
Ako získam viacero krokov medzi dvoma farbami?
Spustite miešač s rôznymi množstvami, napríklad 25 %, 50 % a 75 %. Celú škálu smerom k bielej, čiernej alebo sivej vytvoria generátory zosvetlených, stmavených a sivých odtieňov v jednej tabuľke.