jQuery - HSL彩色背景

Question

我在Javascript/jQuery中遇到了一个奇怪的问题。我需要用HSL颜色模型更新背景颜色，使用下面编写的函数：

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 });
}

给定的输出是好的，但它不会改变背景色。来自hsvText变量的示例输出：

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

只有当我手动将值输入变量时才会进行更改，如下所示：

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 });
}

而且起作用了。那么-为什么第一个函数不想正常工作呢？我在哪里弄错了？

Answer 1

@ are 442--你离得很近，但没有解释错在哪里。

谢谢大家的回答，我找到了“窃听器”。

更清楚的解释:正如你说的-脚本是可以的，但可视化并不好。我没有提到，首先预览div被设置为白色。

HSV和HSL是两种不同的颜色模型(我一开始假设它们是相同的)。HSV从色调到黑色，HSL从白色到黑色。

因此，在HSL中，最后一个变量为100% (表示亮度)是白色的。所以我的背景色总是没变。但是当亮度降低50%时，我在HSV模型中得到100%的值，所有这些都很有魅力:)

Answer 2

你的剧本写得很好。只是

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

都是白色的所以你看不出有什么区别。

http://hslpicker.com/