Docelowy kolor przy użyciu filtru CSS

Popularnym przypadkiem użycia filtru CSS jest zmiana odcieniu ikon bez konieczności ingerencji w źródło obrazu. Obecnie dwa popularne narzędzia demonstrujące mechanizm uzyskania dowolnego koloru przy pomocy filtru to:

Zmiana odcienia przy pomocy filtru

Algorytm w obu przypadkach jest podobny i można zaliczyć go do heurystycznego wyszukiwania koloru najbardziej zbliżonego (RGB/HSV) do zadeklarowanego. Do tego celu testowane są różne argumenty filtru CSS przepisanego na język JS (potencjalne źródło różnic), składającego się z następujących funkcji:

brightness;
saturate;
invert;
sepia;
hue-rotation;
contrast.

Wychodząc od koloru czarnego brightness(0) saturate(100%), w założeniu powinniśmy być w stanie otrzymać kolor bliski zadeklarowanemu. Sprawdza się to w dużej części przypadków. Ostateczny kolor może jednak różnić się w zależności od wybranego profilu koloru i przeglądarki.

Chrome 107.0.0.0 (Blink 537.36) Mac OS X Intel 10.15.7

Bez wymuszenia profilu kolorów sRGB, w tej wersji przeglądarki Chrome występuje przesycenie przy użyciu filtru względem normalnie zadeklarowanego koloru.

Nasycenie (profil sRGB) — Od góry: kolejne wartości nasycenia (profil sRGB);
przesycenie (profil standardowy) zauważalne dla dwóch ostatnich obrazków.

Nasycenie/przesycenie (profil standardowy) — Od góry: kolejne wartości nasycenia (profil sRGB);
przesycenie (profil standardowy) zauważalne dla dwóch ostatnich obrazków.

Powyżej test kolorów (iframe) na Twojej przeglądarce

Safari 15.6 (WebKit 605.1.15) Mac OS X Intel 10.15.7

Filtr czasami gryzie się z transformacją transform: translate3d(0, 0, 0), używaną czasami do wymuszenia akceleracji sprzętowej w przeglądarce Safari.

Wartościu odcieniu bez/z transformacją — Od góry: filtr z różnym nasyceniem bez transformacji;
z transformacją wyraźne różnice widoczne od trzeciego obrazku.

Powyżej test kolorów (iframe) na Twojej przeglądarce

Co ciekawe, w drzewie DOM transformacja może dotyczyć innego, niepowiązanego relacją rodzic-dziecko elementu. Do odtworzenia wystarczy, że element z filtrem będzie wyświetlany w obrębie elementu z transformacją.

Korzystając z powyższego mechanizmu, warto jest więc przetestować, czy otrzymujemy poprawną wartość odcieniu w różnych konfiguracjach. Zwróć na to uwagę szczególnie w przypadku bardziej złożonych filtrów. Poszczególne filtry zastosowane powyżej podejrzysz w DevToolsach przeglądarki.