gpt4 book ai didi

javascript - 如何使用HSL到RGB转换功能

转载 作者:行者123 更新时间:2023-11-28 19:27:06 26 4
gpt4 key购买 nike

感觉我在这里错过了一些非常简单的东西,但我无法从 HSL to RGB color conversion 的答案中获取公式。上类。有问题的函数是:

function hslToRgb(h, s, l){
var r, g, b;

if(s == 0){
r = g = b = l; // achromatic
}else{
function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}

return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

我认为,我的问题在于输入什么内容作为“h”参数。通常,在 CSS 或 Photoshop 中使用 HSL 时,色调值是 0 到 360 之间的数字,但此函数需要 0 到 1 之间的值。有人可以向我解释一下我将如何转换色调值吗240 到 0 到 1 之间的等效值,所以我可以将它代入这个公式吗?我尝试将 240 除以 360,但这不起作用。

最佳答案

看来原来的算法是错误的。根据wikipedia ,您可以获得独立于色调的色度和亮度调整(因此有类似的 b 值),但其他任何东西都需要更多的数学运算 - 特别是模数。该算法看起来并不能很好地处理该特定转换,特别是考虑到它期望色调在 [0, 1] 范围内。试试这个算法:

// expected hue range: [0, 360)
// expected saturation range: [0, 1]
// expected lightness range: [0, 1]
var hslToRgb = function(hue, saturation, lightness){
// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
if( hue == undefined ){
return [0, 0, 0];
}

var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
var huePrime = hue / 60;
var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));

huePrime = Math.floor(huePrime);
var red;
var green;
var blue;

if( huePrime === 0 ){
red = chroma;
green = secondComponent;
blue = 0;
}else if( huePrime === 1 ){
red = secondComponent;
green = chroma;
blue = 0;
}else if( huePrime === 2 ){
red = 0;
green = chroma;
blue = secondComponent;
}else if( huePrime === 3 ){
red = 0;
green = secondComponent;
blue = chroma;
}else if( huePrime === 4 ){
red = secondComponent;
green = 0;
blue = chroma;
}else if( huePrime === 5 ){
red = chroma;
green = 0;
blue = secondComponent;
}

var lightnessAdjustment = lightness - (chroma / 2);
red += lightnessAdjustment;
green += lightnessAdjustment;
blue += lightnessAdjustment;

return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];

};

它可能会在一些边缘情况下失败,但这些应该很容易修复

关于javascript - 如何使用HSL到RGB转换功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27653757/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com