Преобразование цвета hex или rgb в значения fecolormatrix

Я буквально ничего не знаю о SVG, но у меня на сайте работает скрипт, который переключает изображения между цветным и черно-белым, применяя цветовой фильтр svg, а затем удаляя его при наведении. Тон цвета задается с помощью матрицы значений, показанной ниже...

 <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>

Моя проблема в том, что я хочу изменить цвет фильтра, чтобы он имел очень легкий тон сепии вместо чистого черно-белого, как сейчас. Я не могу поверить, что никто не создал конвертер цветов RGB или Hex, но Google, похоже, не выдает его - может быть, я ищу не то? Как мне это сделать? Однажды я слышал, что это делается в иллюстраторе, но я не использую иллюстратор. Есть ли онлайн конвертер или это можно сделать в фотошопе?


svg css svg-filters
person user2317093    schedule 07.10.2013    source источник
comment
возьмите шестнадцатеричное значение (значения), преобразуйте в RGB, затем разделите на 255. простой пример #FA0000 (красный цвет) равен 250/255, это 0,98039215686, поэтому округление до 2 dec равно 0.98   -  person Mark Schultheiss    schedule 17.02.2021

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, вы ошибаетесь в функции feColorMatrix. Вы не получаете один выходной цвет из цветовой матрицы, результат зависит от комбинации цветов R, G и B.

Прочитайте документацию веб-платформы по feColorMatrix.

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

person Michael Mullany    schedule 07.10.2013
comment
Спасибо за ваш ответ, но разве фильтр сепии не представляет собой единый однородный блок цвета сам по себе, а не подробное изображение, которое я имею в виду? Я понимаю, что это смесь значений RGB, так почему нет простого способа преобразовать цвет RGB в набор значений матрицы? - person user2317093; 08.10.2013
comment
В общем случае это связано с тем, что для одного известного входного вектора (ваш входной цвет RGB) и одного известного выходного вектора (ваш выходной цвет RGB) существует неограниченное количество матриц, которые могут преобразовывать одну в другую. Вы должны предоставить как минимум 2 (а может и 3, моя линейная алгебра ржавая) пары ввода/вывода, чтобы получить единственное решение. Фильтры сепии — если они просто окрашены в оттенки серого — проще. Если вы знаете, в какой цвет вы хотите преобразовать RGB(127,127,127), вы можете легко получить правильные значения цветовой матрицы, используя немного линейной алгебры. - person Michael Mullany; 08.10.2013

arrow_upward
0
arrow_downward

Есть webkit-фильтр, именно сепия. У него есть параметр, чтобы указать количество (фильтрации сепии), и эквивалент:

<filter id="sepia">
  <feColorMatrix type="matrix"
    values="(0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0
            (0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0
            (0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0
             0 0 0 1 0"/>
</filter>

информация взята из здесь

person vals    schedule 07.10.2013
comment
Спасибо за ваш ответ, моя проблема в том, что я нахожу точный тон фильтра сепия слишком сильным для меня - мне нужна сепия с чуть более красным и чуть менее желтым в смеси, поэтому я хотел знать, как преобразовать цвет RGB в набор значений матрицы. - person user2317093; 08.10.2013