如何将 HSB 颜色转换为 HSL？
Photoshop 在其颜色选择器中显示 HSB 颜色。HSL 颜色可以在 CSS 中使用。
我试过这个JS：
函数 hsb2hsl(h, s, b) {
返回 {
哈：哈，
年代：年代，
l: bs/2
}
}
但hsb2hsl(0, 100, 50).l == 0不是25
更新：我可以在不转换 HSB → RGB → HSL 的情况下做到这一点吗？
问问题
22396 次
8 回答
16
我认为这是最准确的：
function hsv_to_hsl(h, s, v) {
// both hsv and hsl values are in [0, 1]
var l = (2 - s) * v / 2;
if (l != 0) {
if (l == 1) {
s = 0;
} else if (l < 0.5) {
s = s * v / (l * 2);
} else {
s = s * v / (2 - l * 2);
}
}
return [h, s, l];
}
于 2015-08-06T09:14:47.643 回答
16
简短但准确
试试这个（[0,1] 中的 s,v,l，更多：hsv2rgb rgb2hsv和hsl2rgb rgb2hsl）
let hsl2hsv = (h,s,l,v=s*Math.min(l,1-l)+l) => [h, v?2-2*l/v:0, v];
let hsv2hsl = (h,s,v,l=v-v*s/2, m=Math.min(l,1-l)) => [h,m?(v-l)/m:0,l];
let hsv2hsl = (h,s,v,l=v-v*s/2,m=Math.min(l,1-l)) => [h,m?(v-l)/m:0,l];
let hsl2hsv = (h,s,l,v=s*Math.min(l,1-l)+l) => [h, v?2-2*l/v:0, v];
console.log("hsv:["+ hsl2hsv(30,1,0.6) +"] hsl:["+ hsv2hsl(30,0.8,1) +"]");
// -------------------
// UI code
// -------------------
let $ = x => document.querySelector(x);
let c = (x,s) => $(x).style.backgroundColor=s;
let hsl=[0,1,0.5];
let hsv=hsl2hsv(...hsl);
let refreshHSV =(i,e) => {
hsv[i]= e.target.value/(i?100:1);
hsl=hsv2hsl(...hsv);
refreshView();
}
let refreshHSL =(i,e) => {
hsl[i]= e.target.value/(i?100:1);
hsv=hsl2hsv(...hsl);
refreshView();
}
let hsv2rgb = (h,s,v) => {
let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);
return [f(5),f(3),f(1)];
}
let refreshView = () => {
let a= [hsl[0], (hsl[1]*100).toFixed(2), (hsl[2]*100).toFixed(2)];
let b= [hsv[0], (hsv[1]*100).toFixed(2), (hsv[2]*100).toFixed(2)];
let r= hsv2rgb(...hsv).map(x=>x*255|0);
let ta= `hsl(${a[0]},${a[1]}%,${a[2]}%)`
let tb= `hsv(${b[0]},${b[1]}%,${b[2]}%)`
let tr= `rgb(${r[0]},${r[1]},${r[2]})`
c('.hsl', tr);
$('#sv').value=hsv[1]*100;
$('#v').value =hsv[2]*100;
$('#sl').value=hsl[1]*100;
$('#l').value =hsl[2]*100;
$('.info').innerHTML=`${tr}\n${tb}\n${ta.padEnd(25)}`;
}
refreshView();.box {
width: 50px;
height: 50px;
margin: 20px;
}
body {
display: flex;
background: white;
}<div>
<input id="h" type="range" min="0" max="360" value="0" oninput="refreshHSV(0,event)">Hue<br>
<div class="box hsl"></div>
<pre class="info"></pre>
</div>
<div>
<input id="sv" type="range" min="0" max="100" value="0" oninput="refreshHSV(1,event)">HSV Saturation<br>
<input id="v" type="range" min="0" max="100" value="100" oninput="refreshHSV(2,event)">HSV Value<br><br><br>
<input id="sl" type="range" min="0" max="100" value="0" oninput="refreshHSL(1,event)">HSL Saturation<br>
<input id="l" type="range" min="0" max="100" value="100" oninput="refreshHSL(2,event)">HSL Lightness<br>
</div>此代码基于我在wiki上发现和编写的公式
于 2019-01-09T19:02:36.810 回答
4
斯蒂芬莫利似乎已经把它钉在了这里。
具体来说：
/* Calculates and stores the HSL components of this HSVColour so that they can
* be returned be the getHSL function.
*/
function calculateHSL(){
// determine the lightness in the range [0,100]
var l = (2 - hsv.s / 100) * hsv.v / 2;
// store the HSL components
hsl =
{
'h' : hsv.h,
's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
'l' : l
};
// correct a division-by-zero error
if (isNaN(hsl.s)) hsl.s = 0;
}
他使用 [0-360] 表示色调，使用 [0-100] 表示其他值。
于 2013-07-16T05:01:24.920 回答
3
首先，您的操作顺序将导致：
b - s / 2 =
50 - 100 / 2 =
50 - 50 = 0
因为除法运算符的优先级高于减法。如果您期望 25 岁，则需要(b - s) / 2改为。
但是，我不确定这个结果是否是您想要的。由于 B (V) 和 L 的定义都是基于 RGB 颜色空间的，因此您至少需要一种方法来恢复M和m的值来计算转换。
有关更多信息，请参阅维基百科文章。
于 2010-08-06T11:36:39.037 回答
1
维基百科不再显示Kamil Kiełczewski显示的公式。它们现在看起来像这样：
const hsvToHsl = (h, s, v, l = v * (1 - (s / 2))) => [h, l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l), l];
const hslToHsv = (h, s, l, v = l + s * Math.min(l, 1 - l)) => [h, v === 0 ? 0 : 2 * (1 - (l / v)), v];
于 2021-03-04T06:21:33.143 回答
0
您可以尝试使用Tinycolor库。要从 HSV 转换为 HSL，您可以这样做
tinycolor("hsv(34, 56%, 100%)").toHslString()
你应该得到这样的结果：“hsl(34, 100%, 72%)”
于 2017-02-02T08:52:45.770 回答
-2
不同颜色空间之间有很多转换公式：http ://www.easyrgb.com/?X=MATH
于 2015-07-22T09:17:19.677 回答
-3
恐怕我缺乏 Javascript 知识，但您应该能够从http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html推断出转换
于 2010-08-06T11:34:33.797 回答