Изменить цвет .png иконки белого цвета на любой другой цвет через css

#html #css #изображения #color #png

Здравствуйте. Возможно изменить цвет .png иконки белого цвета, на любой другой цвет
(к примеру, желтый) используя css? 

Рассматривал решения, где вырезают иконку и подсвечивают фоном. Но это очень странное
решение для типовой задачи. Обычно такой параметр называется tintColor, но в css не
нашел подобного.

Пример картинки: https://i.stack.imgur.com/1B0hl.png
    

Ответы

Ответ 1

Проще начинать с уже цветного изображения, но можно и с бесцветного. В этом случае
нужно сначала задать базовый оттенок фильтром сепия.



.make-blue {
   filter: hue-rotate(180deg) brightness(0.5) saturate(600%);
}

.make-yellow-with-sepia {
   filter: contrast(50%) sepia(100%) hue-rotate(5deg) brightness(0.8) saturate(500%);
}









Директиву может потребоваться продублировать с префиксом -webkit-.


Ответ 2

Спасибо sanmai за подсказку. Чтобы перекрасить картинку в любой другой цвет, воспользовался
следующей схемой:


Перевел rgb в hsl (использовал скрипт http://code.stephenmorley.org/javascript/colour-handling-and-processing/)
Подставил значения в формулу

hue-rotate = h - 38;

saturate = 100 + (24.5 - s);

brightness = 100 + (l - 60.0);
Прописал в css


filter: brightness(50%) sepia(1)  hue-rotate(hue-rotate) 
saturate(saturate%) brightness(brightness%);