Převodník HEX barvy na CSS filtr

Jak převodník HEX na CSS filtr použít

1. Zadejte cílovou HEX barvu, do které chcete ikonu obarvit. Můžete ji napsat ručně nebo vybrat z barevného pole.
2. Nástroj spočítá odpovídající CSS filtr a rovnou ho ukáže v živém náhledu na černé ikoně.
3. Zkontrolujte hodnotu odchylky. Nízké číslo znamená, že se výsledek blíží zadané barvě.
4. Zkopírujte vygenerovanou hodnotu filter a vložte ji do svého CSS k danému obrázku nebo SVG.

Proč obarvovat ikony přes CSS filtr

Máte jednu černou ikonu a potřebujete ji na webu ukázat ve značkové barvě. Místo abyste vyráběli novou grafiku pro každou variantu, obarvíte původní soubor jediným pravidlem filter. Stejné SVG nebo PNG tak použijete modré, červené i šedé, aniž byste sáhli do grafického editoru.

Filtr funguje jako řetězec funkcí, které se aplikují za sebou: invert, sepia, saturate, hue-rotate, brightness a contrast. Každá další funkce pracuje s výstupem té předchozí, takže na pořadí záleží. Z černé se nejprve invertuje bílá, sépie a saturace jí dodají barevný nádech a otočení odstínu s jasem doladí konkrétní tón.

Kdy se metoda hodí

Nejlépe funguje na monochromatické grafice. Typicky jde o černé SVG ikony, čárové piktogramy nebo ikonové fonty, které mají jednu barvu a průhledné pozadí. Pokud pracujete se sprite sheetem, kde je víc ikon v jednom souboru, obarvíte celý sprite jedním filtrem a ušetříte desítky duplicitních souborů.

Aby výpočet seděl, musí ikona vycházet z černé. Když má jiný základ, přidejte na začátek řetězce brightness(0) saturate(100%). Tahle dvojice srazí libovolnou barvu na čistou černou, ze které pak filtr staví cílový odstín. U vícebarevných obrázků nebo fotek metoda smysl nedává, protože posune všechny barvy najednou.

Proč je výsledek jen přibližný

Neexistuje přímý vzorec, který by z HEX barvy spočítal přesný filtr. Nástroj proto řešení hledá iterativně a postupně zkouší kombinace hodnot, dokud se výsledná barva co nejvíc nepřiblíží té zadané. Právě proto ukazuje hodnotu odchylky. Čím je nižší, tím přesněji filtr trefil požadovaný odstín.

U výrazných a sytých barev bývá shoda velmi dobrá. U jemných pastelů nebo velmi tmavých tónů může zůstat malý rozdíl, který okem sotva postřehnete. Pokud vám na přesné barvě opravdu záleží, třeba u loga, spolehlivější je obarvit SVG přímo přes atribut fill nebo použít vlastnost mask. Filtr je rychlé a praktické řešení pro běžné ikony.

Časté otázky

Funguje CSS filtr na barevný obrázek?

Spolehlivě jen na jednobarevné grafice. Vícebarevný obrázek filtr posune celý najednou, takže výsledek neodpovídá jedné cílové barvě. Pokud vstup není černý, přidejte před filtr brightness(0) saturate(100%), aby se srazil na černou.

Proč se barva úplně přesně neshoduje?

Filtr se nedá spočítat přímo, hledá se přibližně. Hodnota odchylky u výsledku říká, jak blízko se barva trefila. Nízké číslo znamená téměř přesnou shodu, vyšší číslo drobný rozdíl v odstínu.

Je lepší SVG fill, nebo CSS filtr?

Pro přesnou barvu a plnou kontrolu je lepší fill přímo v SVG. Filtr se hodí, když nemůžete zasáhnout do zdroje ikony nebo obarvujete rastrové PNG. Je univerzální, ale výsledek je přibližný.