CODEWITHSUNDEEP
javascriptjquerycsshsl
user3549358
user3549358

Reputation: 51

jQuery - HSL color background

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?

Upvotes: 3

Views: 4130

Answers (2)

user3549358
user3549358

Reputation: 51

@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 :)

Upvotes: 1

crc442
crc442

Reputation: 627

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/

Upvotes: 2

Related Questions