Есть ли способ получить определенный цвет от серого с использованием свойства CSS-фильтра?

Мне нужно изменить цвет значка при наведении от серого (# b7b7b7) до коралла (# b45d64).Есть ли способ получить определенный цвет от серого с использованием свойства CSS-фильтра?

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

Но я задаюсь вопросом, есть ли какой-либо алгоритм или способ получить определенный цвет, например # b45d64 от серого. Я использовал сепию и играю вручную с фильтрами яркости, насыщенности и оттенка, но у меня есть более простой способ сделать это (я имею в виду более простой способ рассчитать яркость, насыщение и оттенок, чтобы получить # b45d64 от серого с помощью сепии) ?

.makegray:hover{ 
 
    -webkit-filter: brightness(1.72) saturate(0) hue-rotate(0deg); 
 
    filter: brightness(1.72) saturate(0) hue-rotate(0deg); 
 
} 
 

 
.makecoral:hover{ 
 
    -webkit-filter: sepia(1) brightness(0.54) saturate(2) hue-rotate(305deg); 
 
    filter: sepia(1) brightness(0.54) saturate(2) hue-rotate(305deg); 
 
}

<img src="http://dummyimage.com/200x200/b7b7b7/fff.png&text=hsla(0,00x25,720x25)" class="makecoral" alt=""><br> 
 
<img src="http://dummyimage.com/200x200/b45d64/fff.png&text=hsl(355,+370x25,+540x25)" class="makegray" alt="">

источник

2016-08-18 user2771704

Честно говоря, я не знаю. Ваша текущая техника кажется оптимальной. –

* или инструмент * Вы не можете запрашивать рекомендации для инструментов. Обычно я просто редактирую это из хорошего вопроса, но это такое небольшое изменение (обычно у меня есть вопросы, которые нужно улучшить), и мне меньше 2K, поэтому я решил, что просто укажу, что эта часть звучит как rec/найти запрос. – BSMP

@BSMP Спасибо, что указал на это, я отредактировал свой вопрос. Paulie_D Спасибо за ваш комментарий. – user2771704

Если ссылаться на SVG фильтр из вашего CSS, то вы можете получить определенный цвет. Ниже представлен фрагмент фильтра SVG. Для вашего конкретного цвета замените .7/.4/.5 на унифицированное значение ваших значений RGB.

<filter id="colorme" color-interpolation-filters="sRGB"> 
    <feColorMatrix type="matrix" values="0 0 0 0 .7 0 0 0 0 .4 0 0 0 0 .5 0 0 0 1 0"/> 
</filter>

источник

2016-08-20 23:28:12

Есть ли способ получить определенный цвет от серого с использованием свойства CSS-фильтра?

ответ

Смежные вопросы