Convert hex value to filter attribute

Question

I did find this on codepen, but it uses JS to calculate the filter value manually. I want to be able to do this using SASS so that I can build these more programmatically.

Below is an example of the end results, but it requires me to hard code. We are using gulpjs to compile our SASS files.

How would I be able to do what the codepen does, but with SASS?

.icon {
  background-image: url('https://kwiksher.com/wp-content/uploads/2012/09/runningcat.png');
  display: block;
}

.icon--single {
 width: 50px;
 height: 50px;
 background-position: 25% 50%;
 filter: invert(46%) sepia(36%) saturate(6980%) hue-rotate(159deg) brightness(94%) contrast(101%);
}

<div>
  <h2>Hello there</h2>
  <span class="icon icon--single">hi</span>
</div>

score 1 · Answer 1 · answered Dec 30 '18 at 02:01

1

If you relax the original question's requirement that it be a pure CSS solution - you can set a color directly using a SVG Filter and reference that filter from CSS. The fifth column of a feColorMatrix matrix can be used to set RGB explicitly.

answered Dec 30 '18 at 02:01

Michael Mullany

30,283
6
81
105

score 0 · Accepted Answer · answered Dec 28 '18 at 01:10

Here is how I would start

Look at the color functions provided by Sass
Implement the missing math functions (cos, sin etc.)
Start converting JS to Sass to see what else is needed

I would like to have posted the functions but it is not a trivial task (it can be done) and it's 2.08AM and I need sleep – let's call it round one ;)

Meanwhile give it a try and update your question with what you got working and not

Convert hex value to filter attribute

2 Answers2