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?

filter

Tom Pietrosanti · Accepted Answer · 2013-12-17T19:41:19.690

2

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

edited Dec 17 '13 at 19:41

answered Dec 17 '13 at 19:28

Tom Pietrosanti

4,184
2
24
29

Yes I already know. But is there a way/hack to do what I want? – Pier-Alexandre Bouchard Dec 17 '13 at 19:30
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` – Tom Pietrosanti Dec 17 '13 at 19:31
I think photoshop uses a linear scale between -100 and 100. It's easy enough to map it to the CSS scale (0-100%). Just add 100 and divide the result by two. – toniedzwiedz Dec 17 '13 at 19:34
Can you copy paste your comment in your answer? I will upvote Thank you! – Pier-Alexandre Bouchard Dec 17 '13 at 19:37

Negative saturation using css

1 Answers1