jQuery colors plugin HSL model

Question

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 1

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.