Question: I have a class called "button", I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.

However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the "satauration" value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..

I was thinking... if it is possible to change the "saturation" value (only) of the background-color so that my hover effect will still be useful for random colors.

Answer: 
Using [filter](https://developer.mozilla.org/en-US/docs/CSS/filter) currently seems to only work for webkit-based browsers..

```
-webkit-filter: saturate(3);
filter: saturate(3);

```

[Demo](http://jsfiddle.net/YD5KD/1/show) | [Source](http://jsfiddle.net/YD5KD/1/)

Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected

```
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);

```

[Demo](http://jsfiddle.net/YD5KD/show) | [Source](http://jsfiddle.net/YD5KD/)

Additional demo: <http://html5-demos.appspot.com/static/css/filters/index.html>
There are two solutions for this problem:

First, use a transparent png with a white to transparent gradient. On onHover, apply the image over the button. I haven't tried it but it looks promising.

Second, use a css inset dropshadow. With the parameters set correctly, you can easily manage the gradient effect.

You can also use rgba(r,g,b,a) for making changes to the underlying button color. But remember that the text value of the button will also get affected, giving you issues of usability.