Оптическая калибровка иконок
Перекрасьте чёрную иконку в нужный цвет CSS.
Введите любой непрозрачный цвет CSS и рассчитайте воспроизводимую цепочку фильтров для чёрного SVG, иконки или монохромного изображения. Перед публикацией сравните цель с расчётным результатом.
#000000#7B3DEEЦепочка из шести этапов
Каждая настройка на виду.
Алгоритм настраивает ограниченную цепочку в фиксированном порядке. Одинаковая цель даёт одинаковые значения, а введённый цвет не покидает браузер.
- 01invert()
46% - 02sepia()
95% - 03saturate()
7156% - 04hue-rotate()
71 × 3.6° - 05brightness()
98% - 06contrast()
90%
CSS для копирования
Примените цепочку к чёрному объекту.
Используйте это объявление для элемента, видимые пиксели которого изначально чисто чёрные. Для многоцветных и нечёрных объектов нужен другой способ.
filter: invert(46%) sepia(95%) saturate(7156%) hue-rotate(256deg) brightness(98%) contrast(90%);- Цель
- #7C3AED
- Расчётный результат
- #7B3DEE
- Средняя ошибка канала RGB
- 1,53
Приближение с проверяемым результатом.
Hexees моделирует цветовые матрицы CSS Filter Effects, минимизирует расстояние в RGB и HSL воспроизводимым ограниченным поиском и показывает полученный цвет. Растеризация и управление цветом в браузере могут немного изменить итоговые пиксели — проверьте настоящий объект.