Цвета hsl(): индивидуальное управление оттенком, насыщенностью или яркостью.

Возможно ли сегодня или в каких-либо будущих стандартах индивидуально управлять оттенком, насыщенностью и яркостью цвета hsl() в css? Что можно и что нельзя сделать с помощью чистого 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);