Используем матрицы для цветовых фильтров Для наложения фильтров на элемент можно использовать современный CSS. Этого хватит в большинстве задач: invert() для негатива, brigthness() для яркости, grayscale() для ЧБ фильтра и т.д. Для более тонких настроек цветового фильтра можно использовать SVG фильтр <feColorMatrix>. Работает он очень просто - через умножение матриц На вход фильтр получает векторы с пикселями изображения [r, g, b, a], этот вектор умножается на матрицу фильтра и на выходе получаем новый цвет [r', g', b', a'] В коде это выглядит так, создаем SVG: <svg> <defs> <filter id="customFilter"> <feColorMatrix id="customMatrix" type="matrix" values="YOUR MATRIX" /> </filter> </defs> </svg> На месте YOUR MATRIX должна стоять ваша матрица для фильтра. Например, для эффекта негатива матрица будет выглядеть так: -1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 Далее просто берем элемент, на который хотим наложить цветовой фильтр и добавляем СSS-свойство filter: url(#customFilter) и все, фильтр работает Также с этим можно придумывать какие-нибудь эффекты. Например, плавный переход из одного фильтра в другой через линейную интерполяцию, создавая промежуточные матрицы. Демка тут