hsl() colors：单独控制色调、饱和度或亮度

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 filters。我构建的东西类似与你所说的：

CSSInstaglam
Demo

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