jQuery - HSL color background

Question

I've run into a strange problem with Javascript/jQuery. I need to update background color with the HSL color model using function written below:

function updateColorPreviewHSV(hsv){
    var hue = Math.round(hsv.getHue(), 0);
    var saturation = Math.round(hsv.getSaturation()*100, 0);
    var value = Math.round(hsv.getValue()*100, 0);

    var hsvText = "hsl("+hue+","+saturation+"%,"+value+"%)";
    console.log(hsvText);
    $("#pickedColor").css({"background": hsvText });
}

Given output is fine, but it doesn't change background color. Example outputs from hsvText variable:

hsl(336,74%,100%)
hsl(340,73%,100%)
hsl(343,73%,100%)
hsl(307,73%,100%)

Change comes only when I type values manually into variables, like below:

function updateColorPreviewHSV(hsv){

    var hue = 100;
    var saturation = 70;
    var value = 40;

    var hsvText = "hsl("+hue+","+saturation+"%,"+value+"%)";
    console.log(hsvText);
    $("#pickedColor").css({"background": hsvText });
}

and it works. So - why first function doesn't want to work properly? Where have I made mistake?

See the [jsFiddle](http://jsfiddle.net/taleebanwar/1x3bezt5/). I think it's working fine... — Taleeb, Oct 30 '15 at 14:17
@Taleeb - Thanks for jsFiddle, but values are changing dynamicaly. Manual typed - works, HEX and RGB model - works, but HSL - not and I wonder why. If there is no rational reason I'll try to workaround it, but it's a painfull way. — user3549358, Oct 30 '15 at 14:25

score 1 · Answer 1 · answered Oct 30 '15 at 14:41

1

Your script works fine. Its just that

hsl(336,74%,100%)
hsl(340,73%,100%)
hsl(343,73%,100%)
hsl(307,73%,100%)

are all shades of white, so you don't see a difference.

http://hslpicker.com/

answered Oct 30 '15 at 14:41

crc442

607
7
13

score 1 · Accepted Answer · answered Oct 30 '15 at 18:15

@crc442 - you are close, but not explained where is mistake exactly.

And thanks everyone for answers, I found the "bug".

More clear explanation: As you said - script is okay, but visualization is not fine. I've not mentioned that firstly preview div has been set as white color.

HSV and HSL are two different color models (I assumed at the start they are the same). While HSV comes from hue into black, the HSL comes from white through hue to the black color.

So in the HSL the last variable as 100% (for lightness) is white. That why I always gotten unchanged background color. But when decrease lightness by 50% I get 100% for Value in HSV model and all works like a charm :)

jQuery - HSL color background

2 Answers2