I am cutting a Photoshop web layout. I have the following filter I would like to apply in css (I don't want to use an image in which the filter is already applied).
So I used these css properties to generate the following HSL (-64, -67, 0):
-webkit-filter: hue-rotate(-64deg);
-webkit-filter: saturate(-67%);
But, there is a problem because if saturation is less than 0%, browser seems to clip it to 0%.
How can I do a negative saturation using css?
Valid values are only from 0% to 100%
https://developer.mozilla.org/en-US/docs/Web/CSS/filter#saturate()
The same is true for HSL in CSS
http://www.w3.org/TR/css3-color/#hsl-color
You just have to find out the scale PhotoShop uses and adjust accordingly. If you're using a preprocessor like SASS or LESS, you could do it there. So if PhotoShop goes from -100% to 100%, you could do
(100% + $val)/2(You could also use CSS calc, but this case is better for a preprocessor, or even manual calculation - just be sure to comment!)