Míchání barev
Smíchejte dvě barvy ve zvoleném barevném prostoru a v libovolném poměru, stejně jako to dělá CSS color-mix(). Zadejte dvě barvy v libovolném formátu CSS, nastavte podíl druhé barvy od 0 do 100 procent a zvolte OKLab, OKLCH, Lab, LCH, sRGB, lineární sRGB, Display P3, HSL, HWB nebo XYZ. Výsledek získáte ve formátech HEX, RGB, HSL a OKLCH, spolu s připraveným výrazem color-mix() pro váš stylopis.
Často kladené otázky
Jak funguje hodnota množství?
Množství určuje podíl Barvy 2 ve směsi. Hodnota 0 % vrátí Barvu 1, 100 % vrátí Barvu 2 a při 50 % vznikne ve zvoleném prostoru směs přesně uprostřed. Odpovídá to zápisu color-mix(in space, color1 (100 - p)%, color2 p%).
Který barevný prostor mám zvolit?
Výchozí OKLab je percepčně rovnoměrný a zabraňuje zašedlým nebo tmavým mezilehlým barvám. V sRGB se míchají kanály zakódované pomocí gama korekce, jako ve starších prohlížečích a Sass, takže směsi sytých barev jsou tmavší a méně výrazné. Lab je starší percepční prostor CIE, který se chová podobně jako OKLab, ale modré odstíny v něm přecházejí méně rovnoměrně.
Jak fungují prostory založené na odstínu?
V prostorech OKLCH, LCH, HSL a HWB se odstín interpoluje po kratším oblouku barevného kruhu, což je výchozí nastavení CSS. Výsledná barva uprostřed si tak zachová sytost a může být výraznější než kterákoli ze vstupních barev. Pokud je jedna barva neutrální šedá bez odstínu, použije se odstín druhé barvy.
K čemu slouží lineární sRGB a XYZ?
V obou prostorech se intenzity světla míchají lineárně, jako když se překrývají světelné paprsky, takže výsledná barva uprostřed vypadá jasněji než v sRGB. Hodí se pro fyzikálně založené efekty a k napodobení vzhledu rozmazaných nebo prolnutých pixelů.
Jak se zpracovává průhlednost?
Stejně jako CSS color-mix() i tento nástroj interpoluje s přednásobenou průhledností, takže průhledná barva neposouvá směs k černé. Samotná průhlednost se interpoluje ve stejném poměru a zobrazí se v osmimístném hex kódu a za lomítkem ve funkcích CSS.
Jaké vstupní formáty mohu použít?
Hex kódy s # nebo bez něj, CSS názvy barev, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), prostory color() jako display-p3 i cmyk(), a to v libovolné kombinaci. Každá barva může mít až 100 znaků.
Co se stane, když výsledek přesahuje gamut sRGB?
Mícháním v prostorech Display P3, OKLCH nebo LCH mohou vzniknout barvy, které sRGB nedokáže zobrazit. Hodnoty HEX, RGB a HSL se pak pomocí algoritmu Color 4 CSS převedou do sRGB a výsledek dostane poznámku, zatímco hodnota OKLCH zachová barvu bez převodu.
Jak použiji výraz color-mix()?
Vložte jej do libovolné vlastnosti CSS, která přijímá barvu. Vstupy jsou uvedeny pomocí hex kódů, případně pomocí oklch() u barev se širším gamutem, takže prohlížeč vypočítá stejnou směs. color-mix() funguje ve všech současných verzích Chrome, Edge, Firefox a Safari.
Jak přesný je výsledek?
Množství se zadává v celých procentech a směs se počítá s plnou přesností pomocí knihovny culori. Kanály RGB se zaokrouhlují na celá čísla, procenta HSL na dvě desetinná místa a světlost a sytost OKLCH na čtyři, takže se hodnoty prohlížečů mohou lišit v poslední číslici o jednu jednotku.
Jak vytvořím několik mezikroků mezi dvěma barvami?
Spusťte míchání s různými hodnotami, například 25 %, 50 % a 75 %. Celou škálu směrem k bílé, černé nebo šedé vytvoříte v jediné tabulce pomocí Generátorů odstínů, stínů a tónů barev.