ilyo ilyo - 10 months ago 47
jQuery Question

jQuery colors plugin HSL model

While I was trying to make a simple HSL to RGB conversion with jQuery Color,

$.colors('hsl(100,100%,50%)').toString('rgb');


I noticed something weird in the HSL structure: the Hue can be set from 0 to 100, it does not accepts values outside this range,
so in theory
hsl(100,100%,50%) === hsl(0,100%,50%) === red


But what I get after converting to RGB is
hsl(100,100%,50%) === red
and
hsl(0,100%,50%) === yellowish-green

which would be true if the Hue would be 1-360 as in theory.

How can that be, and how do I get the full color circle using HSL?

Answer Source

Looking at the source, the expected range for Hue is indeed 0-360.

"the Hue can be set from 0 to 100, it does not accepts values outside this range"

That's because there's a bug in the validation code. That line should be:

if ((a == 1 && result[a] <= 360) || (a > 1 && result[a] <= 100)) {

a[1] holds the captured value for the first regex pattern (matching first arg, H), not a[0]. To illustrate, here's a fiddle: http://jsfiddle.net/vMLZ2/


p.s. I've submit a pull request with the fix. In the meantime, this demo shows the suggested modification working as expected: http://jsfiddle.net/Gh9kQ/

p.p.s The pull request has been merged and should therefore be fixed in the latest version of the code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download