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

你的脚本运行正常。只是那个

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

都是白色的阴影，所以你不会看到差异。

http://hslpicker.com/

Answer 2

@ crc442 - 你很接近，但没有解释错误到底在哪里。

感谢大家的回答，我找到了＆＃34; bug＆＃34;。

更明确的解释：如你所说 - 脚本没问题，但可视化并不好。我没有提到首先将预览div设置为白色。

HSV和HSL是两种不同的颜色模型（我在开始时假设它们是相同的）。虽然HSV从色调变为黑色，但HSL从白色到色调变为黑色。

因此在HSL中，最后一个变量为100％（亮度）为白色。这就是为什么我总是得到不变的背景颜色。但是当亮度降低50％时，我在HSV模型中获得100％的价值，并且所有这些都像魅力一样：）

jQuery - HSL颜色背景

2 个答案: