hsl()颜色:单独控制色调、饱和度或亮度

Question

是否有可能在今天或任何即将到来的标准中单独控制css中hsl()颜色的色调、饱和度和亮度？使用纯CSS可以做什么，不能做什么，使用jquery可能有哪些替代解决方案？

理想情况下，我希望能够执行类似于下面的操作，或者能够通过其他一些方法()来模仿。

我想创建基类：

.color-10 { color-hsl-hue: 10;}
.color-20 { color-hsl-hue: 20;}
.color-30 { color-hsl-hue: 30;}

等。

.saturation-10 { color-hsl-saturation: 10%; }
.saturation-20 { color-hsl-saturation: 20%; }
.saturation-30 { color-hsl-saturation: 30%; }

等。

.luminosity-10 { color-hsl-luminosity: 10%; }
.luminosity-20 { color-hsl-luminosity: 20%; }
.luminosity-30 { color-hsl-luminosity: 30%; }

等。

因此，我们可以为CSS中的任何元素提供一个基色值，例如：

div { color: hsl(50, 50%, 50%); }

用户可以通过组合类轻松地调整颜色：

<div class="luminosity-30 hue-120">...</div>

它将自动呈现为：

div.luminosity-30.hue-120 { color: hsl(120, 50%, 30%); }

而且，我也希望能做这样的事情：

div h2 { color-hsl-luminosity: -20%;}
div p { background-color-hsl-saturation: +10%;}
div strong { background-color-hsl-hue: +50;}

因此，无论<div>的基色是什么，<h2>元素的背景都会稍微暗一些，等等。

也许我可以用jquery来模拟它，但是如何得到单个色调、亮度、饱和值的当前计算值呢？

我在想这样的事情：

 var hue = $(div).hsl-hue();
 hue += 20;
 $(div h2).hsl-hue(hue);

Answer 1

这是CSS过滤器。我做了一些和你说的类似的东西：

CSSInstaglam

演示

但是 -- IE支持基本上不存在。