Is it possible today or in any upcoming standards to individually control the hue, saturation and luminosity of a hsl() colour in css? What can and cannot be done with pure CSS, and what alternative solutions might there be with jquery?
Ideally, I'd like to be able to do something like the following, or be able to emulate it with some other means.
I'd like to create base classes:
.color-10 { color-hsl-hue: 10;}
.color-20 { color-hsl-hue: 20;}
.color-30 { color-hsl-hue: 30;}
etc.
.saturation-10 { color-hsl-saturation: 10%; }
.saturation-20 { color-hsl-saturation: 20%; }
.saturation-30 { color-hsl-saturation: 30%; }
etc.
.luminosity-10 { color-hsl-luminosity: 10%; }
.luminosity-20 { color-hsl-luminosity: 20%; }
.luminosity-30 { color-hsl-luminosity: 30%; }
etc.
Thus we could provide a base color value for any element in CSS, e.g.:
div { color: hsl(50, 50%, 50%); }
And the user would be able to easily tweak colors by combining classes:
<div class="luminosity-30 hue-120">...</div>
That would automatically be rendered as:
div.luminosity-30.hue-120 { color: hsl(120, 50%, 30%); }
Also, I'd love to be able to do things like:
div h2 { color-hsl-luminosity: -20%;}
div p { background-color-hsl-saturation: +10%;}
div strong { background-color-hsl-hue: +50;}
Thus, whatever the base color of the <div> was, the <h2> element would be rendered with a slightly darker background, etc.
Maybe I can emulate it with jquery, but how to get the currently calculated value for the individual hue, luminosity, saturation values?
I'm thinking something like this:
var hue = $(div).hsl-hue();
hue += 20;
$(div h2).hsl-hue(hue);
