Negative saturation using css

Question

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?

Answer 1

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!)