将 HSB/HSV 颜色转换为 HSL
-
26-09-2019 - |
题
如何将 HSB 颜色转换为 HSL?
Photoshop 在其颜色选择器中显示 HSB 颜色。HSL颜色可以在CSS中使用。
我尝试了这个JS:
function hsb2hsl(h, s, b) { return { h: h, s: s, l: b-s/2 } }
但 hsb2hsl(0, 100, 50).l == 0
代替 25
更新: 我可以在不转换 HSB → RGB → HSL 的情况下做到这一点吗?
解决方案
我怕我的JavaScript知识缺乏,但你应该能够从的 http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html
其他提示
让我们画了什么实际上是HSB(V),HSL, ,而是如何构成:
色调 颜色的价值就会从 0
要 360
度(在那里 0
是红色的)为HSB和快速转换颜色的.
顶上的色调是适用这个 线性度梯度层
HSB(也称为单纯疱疹病毒)
- 色调
- 饱和度 =(左) 白色 → 透明
- 亮度(值) =(从底部) 黑色的 → 透明
赫尔辛基公共
- 色调
- 饱和度 =(左) 灰色50%(#808080,RGB128,128,128)→ 透明
- 轻盈 =(从底部) 黑色的 → 透明 → 白色
让我们看看怎么做到的SB>SL>SB具有:
var H = 360, // Values 0-360 but we'll use red by default
SB = {s:0, b:0}, // Values 0-1
SL = {s:0, l:0}; // Values 0-1
转换
function sb2sl() {
SL.l = (2 - SB.s) * SB.b / 2;
SL.s = SL.l&&SL.l<1 ? SB.s*SB.b/(SL.l<0.5 ? SL.l*2 : 2-SL.l*2) : SL.s;
}
function sl2sb() {
var t = SL.s * (SL.l<0.5 ? SL.l : 1-SL.l);
SB.b = SL.l+t;
SB.s = SL.l>0 ? 2*t/SB.b : SB.s ;
}
转换成非漂浮 %
值的百分比 这样做:
(SB.s * 100 |0) // |0 removes floats
这是一个实际的例子:
var $SB = $("#SB"), $SBdot = $SB.find("span"), $SBres = $("#SBres"),
$SL = $("#SL"), $SLdot = $SL.find("span"), $SLres = $("#SLres"),
size = $SB.width(), // the area W,H size
SB = {s:0, b:0}, // Values 0-1
SL = {s:0, l:0}; // Values 0-1
function sb2sl() {
SL.l = (2 - SB.s) * SB.b / 2;
SL.s = SL.l&&SL.l<1 ? SB.s*SB.b/(SL.l<0.5 ? SL.l*2 : 2-SL.l*2) : SL.s;
}
function sl2sb() {
var t = SL.s * (SL.l<0.5 ? SL.l : 1-SL.l);
SB.b = SL.l+t;
SB.s = SL.l>0 ? 2*t/SB.b : SB.s ;
}
$SB.add( $SL ).on("mousemove", function(e){
var cr = this.getBoundingClientRect();
var x = e.clientX - cr.left |0;
var y = e.clientY - cr.top |0;
if(this.id==="SB") { // Mouse over #SB ?
// Mouse position to 0-1 SB values
SB.s = x / (size-1);
SB.b = 1- y / (size-1);
// Convert inally SB to SL
sb2sl();
// Move dots
$SBdot.css({left:x, top:y});
$SLdot.css({left: SL.s*size, top:size-(SL.l*size)});
}else{
// Mouse position to SL 0-1 values
SL.s = x / (size-1);
SL.l = 1- y / (size-1);
// Convert finally SL to SB
sl2sb();
// Move dots
$SLdot.css({left:x, top:y});
$SBdot.css({left: SB.s*size, top:size-(SB.b*size)});
}
// Write textual results
$SBres.html("S:"+ (SB.s*100|0) +"%<br> B:"+ (SB.b*100|0)+"%");
$SLres.html("S:"+ (SL.s*100|0) +"%<br> L:"+ (SL.l*100|0)+"%");
});
body{margin:0 20px;font:12px/1.2 sans-serif;}
body>div{display:inline-block;margin: 20px;}
#SL,
#SB{
position:relative;
width:120px; height:120px;
cursor:crosshair;
}
#SB{
background:
linear-gradient(to bottom, transparent, #000),
linear-gradient(to right, #fff, transparent),
red;
}
#SL{
background:
linear-gradient(to bottom, #fff, transparent, #000),
linear-gradient(to right, #808080, transparent),
red
}
#SL span,
#SB span{
position:absolute;
width:9px; height:9px;
margin:-4px;
border-radius:50%;
box-shadow:0 0 0 1px #fff, 0 0 0 2px #000;
pointer-events:none;
}
#SB span{left:100%; top:0;}
#SL span{left:100%; top:50%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<b>HSB(HSV)</b>
<div id="SB"><span></span></div>
<p id="SBres">S:100%<br>B:100%</p>
</div>
<div>
<b>HSL</b>
<div id="SL"><span></span></div>
<p id="SLres">S:100%<br>L:50%</p>
</div>
我认为这是最精确的:
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]
}
首先,你的操作顺序将导致:
b - s / 2 =
50 - 100 / 2 =
50 - 50 = 0
比减法优先因为除法运算符具有较高。如果你希望25,你需要做的,而不是(b - s) / 2
我不能完全肯定这结果是你想要的,但是。由于两个B(V)和L的定义是基于RGB颜色空间,则需要至少一种方法来恢复的值的中号和米来计算转换
请参阅维基百科一文了解更多信息。
斯蒂芬·莫雷似乎已经钉它 href="http://code.stephenmorley.org/javascript/colour-handling-and-processing/" rel="nofollow">这里。
具体做法是:
/* 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]的其它值。
试试这个([0,1] 中的 s,v,l,wiki 细节, , 更多的: HSV2RGB RGB2HSV 和 HSL2RGB RGB2HSL)
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];
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;
}
<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>
您可以尝试使用 Tinycolor 库。 从HSV转换为HSL,你可以做到这一点。
tinycolor("hsv(34, 56%, 100%)").toHslString()
你应该得到结果somethng这样的: “HSL(34,100%,72%)”
有很多不同颜色空间之间的转换公式的: http://www.easyrgb.com / X = MATH