Javascript 准确地将 HSB/HSV 颜色转换为 RGB
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17242144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript convert HSB/HSV color to RGB accurately
提问by that_guy
I need to accurately convert HSB to RGB but I am not sure how to get around the problem of turning decimals into whole numbers without rounding. This is the current function I have out of a colorpicker library:
我需要准确地将 HSB 转换为 RGB，但我不确定如何解决将小数转换为整数而不四舍五入的问题。这是我从颜色选择器库中获得的当前功能：
HSBToRGB = function (hsb) {
var rgb = { };
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if (s == 0) {
rgb.r = rgb.g = rgb.b = v;
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if (h == 360) h = 0;
if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 }
else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 }
else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 }
else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 }
else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 }
else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 }
else { rgb.r = 0; rgb.g = 0; rgb.b = 0 }
}
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
As you can see the inaccuracy in this function comes from the Math.round
正如你所看到的，这个函数的不准确性来自 Math.round
回答by Paul S.
From Parthik Gosar's linkin this commentwith slight modification to let you enter each value independently or all at once as an object
从Parthik Gosar的链接在此评论稍加修改，让您一次为一个对象进入各自独立价值或全部
/* accepts parameters
* h Object = {h:x, s:y, v:z}
* OR
* h, s, v
*/
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
}
This code expects 0 <= h, s, v <= 1, if you're using degrees or radians, remember to divide them out.
此代码需要0 <= h, s, v <= 1，如果您使用度数或弧度，请记住将它们分开。
The returned 0 <= r, g, b <= 255are rounded to the nearest Integer. If you don't want this behaviour remove the Math.rounds from the returned object.
返回0 <= r, g, b <= 255的值四舍五入到最接近的Integer。如果您不希望此行为Math.round从返回的对象中删除s。
And the reverse (with less division)
和相反的（更少的除法）
/* accepts parameters
* r Object = {r:x, g:y, b:z}
* OR
* r, g, b
*/
function RGBtoHSV(r, g, b) {
if (arguments.length === 1) {
g = r.g, b = r.b, r = r.r;
}
var max = Math.max(r, g, b), min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min: h = 0; break;
case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
case g: h = (b - r) + d * 2; h /= 6 * d; break;
case b: h = (r - g) + d * 4; h /= 6 * d; break;
}
return {
h: h,
s: s,
v: v
};
}
This code will output 0 <= h, s, v <= 1, but this time takes any 0 <= r, g, b <= 255(does not need to be an integer)
此代码将输出0 <= h, s, v <= 1，但这次需要任何0 <= r, g, b <= 255（不需要是整数）
For completeness,
为了完整性，
function HSVtoHSL(h, s, v) {
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
var _h = h,
_s = s * v,
_l = (2 - s) * v;
_s /= (_l <= 1) ? _l : 2 - _l;
_l /= 2;
return {
h: _h,
s: _s,
l: _l
};
}
function HSLtoHSV(h, s, l) {
if (arguments.length === 1) {
s = h.s, l = h.l, h = h.h;
}
var _h = h,
_s,
_v;
l *= 2;
s *= (l <= 1) ? l : 2 - l;
_v = (l + s) / 2;
_s = (2 * s) / (l + s);
return {
h: _h,
s: _s,
v: _v
};
}
All of these values should be in the range 0to 1. For HSL<->RGBgo via HSV.
所有这些值应在范围0来1。对于HSL<->RGB通过去HSV。
回答by jsdario
Given the rising popularity of npmI think it is worth to mention a packagecontaining all this functions through a simple API:
鉴于npm越来越流行，我认为值得一提的是一个通过简单 API 包含所有这些功能的包：
npm install colorsys
npm 安装 colorsys
var colorsys = require('colorsys')
colorsys.rgb_to_hsv({ r: 255, g: 255, b: 255 })
// { h: 0 , s: 0 , v: 100 }
For the browser:
<script src="http://netbeast.github.io/colorsys/browser.js"></script>
对于浏览器：
<script src="http://netbeast.github.io/colorsys/browser.js"></script>
colorsys.rgb_to_hex(h, s, v)
// #hexcolor
回答by Kamil Kie?czewski
Try this (wiki, error analysis, more: rgb2hsv, hsl2rgb, rgb2hsland sl22sv)
试试这个（维基，错误分析，更多：rgb2hsv，hsl2rgb，rgb2hsl和sl22sv）
// input: h in [0,360] and s,v in [0,1] - output: r,g,b in [0,1]
function 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)];
}
// oneliner version
let hsv2rgb=(h,s,v,f=(n,k=(n+h/60)%6)=>v-v*s*Math.max(Math.min(k,4-k,1),0))=>[f(5),f(3),f(1)];
console.log(`hsv: (340,0.3,0.9) -> rgb: (${hsv2rgb(340,0.3,0.9)})`)
// ---------------
// UX
// ---------------
rgb= [0,0,0];
hs= [0,0,0];
function rgb2hsv(r,g,b) {
let v=Math.max(r,g,b), n=v-Math.min(r,g,b);
let h= n && ((v==r) ? (g-b)/n : ((v==g) ? 2+(b-r)/n : 4+(r-g)/n));
return [60*(h<0?h+6:h), v&&n/v, v];
}
function changeRGB(i,e) {
rgb[i]=e.target.value/255;
hs = rgb2hsv(...rgb);
refresh();
}
function changeHS(i,e) {
hs[i]=e.target.value/(i?255:1);
rgb= hsv2rgb(...hs);
refresh();
}
function refresh() {
rr = rgb.map(x=>x*255|0).join(', ')
tr = `RGB: ${rr}`
th = `HSV: ${hs.map((x,i)=>i? (x*100).toFixed(2)+'%':x|0).join(', ')}`
box.style.backgroundColor=`rgb(${rr})`;
infoRGB.innerHTML=`${tr}`;
infoHS.innerHTML =`${th}`;
r.value=rgb[0]*255;
g.value=rgb[1]*255;
b.value=rgb[2]*255;
h.value=hs[0];
s.value=hs[1]*255;
v.value=hs[2]*255;
}
refresh();body { display: flex; }
.box { width: 50px; height: 50px; margin: 20px; }<div>
<input id="r" type="range" min="0" max="255" oninput="changeRGB(0,event)">R<br>
<input id="g" type="range" min="0" max="255" oninput="changeRGB(1,event)">G<br>
<input id="b" type="range" min="0" max="255" oninput="changeRGB(2,event)">B<br>
<pre id="infoRGB"></pre>
</div>
<div id="box" class="box hsl"></div>
<div>
<input id="h" type="range" min="0" max="360" oninput="changeHS(0,event)">H<br>
<input id="s" type="range" min="0" max="255" oninput="changeHS(1,event)">S<br>
<input id="v" type="range" min="0" max="255" oninput="changeHS(2,event)">V<br>
<pre id="infoHS"></pre><br>
</div>回答by sigalor
I once wrote this function:
我曾经写过这个函数：
function mix(a, b, v)
{
return (1-v)*a + v*b;
}
function HSVtoRGB(H, S, V)
{
var V2 = V * (1 - S);
var r = ((H>=0 && H<=60) || (H>=300 && H<=360)) ? V : ((H>=120 && H<=240) ? V2 : ((H>=60 && H<=120) ? mix(V,V2,(H-60)/60) : ((H>=240 && H<=300) ? mix(V2,V,(H-240)/60) : 0)));
var g = (H>=60 && H<=180) ? V : ((H>=240 && H<=360) ? V2 : ((H>=0 && H<=60) ? mix(V2,V,H/60) : ((H>=180 && H<=240) ? mix(V,V2,(H-180)/60) : 0)));
var b = (H>=0 && H<=120) ? V2 : ((H>=180 && H<=300) ? V : ((H>=120 && H<=180) ? mix(V2,V,(H-120)/60) : ((H>=300 && H<=360) ? mix(V,V2,(H-300)/60) : 0)));
return {
r : Math.round(r * 255),
g : Math.round(g * 255),
b : Math.round(b * 255)
};
}
It expects 0<=H<=360, 0<=S<=1 and 0<=V<=1 and returns an object that contains R, G and B (integer values between 0 and 255). I used this imageto create the code.
它期望 0<=H<=360、0<=S<=1 和 0<=V<=1，并返回一个包含 R、G 和 B（0 到 255 之间的整数值）的对象。我用这张图片来创建代码。
回答by benlambert
There's a bug in Paul S's HSVtoHSLfunction: when the vinput is 0 we get a divide-by-zero problem and the soutput becomes NaN. Here's a fix:
Paul S 的HSVtoHSL函数中存在一个错误：当v输入为 0 时，我们会遇到被零除的问题，并且s输出变为 NaN。这是一个修复：
function HSVtoHSL(h, s, v) {
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
var _h = h,
_s = s * v,
_l = (2 - s) * v;
_s /= (_l <= 1) ? (_l === 0 ? 1 : _l) : 2 - _l;
_l /= 2;
return {
h: _h,
s: _s,
l: _l;
};
}
P.S. I would have added this as a comment on Paul S.'s post, but I'm new and the system told me I don't have enough rep.
PS 我会添加这个作为对 Paul S. 帖子的评论，但我是新手，系统告诉我我没有足够的代表。
回答by com.prehensible
Here is the algorithm in unityscript, you'll have to rewrite the float, mathf.floor functions and the output is a vector3 of 3 floats.
这是 unityscript 中的算法，您必须重写 float、mathf.floor 函数，输出是 3 个浮点数的 vector3。
EDIT This was the first answer on this page and it seemed worthwile to provide this much help when there weren't any other answers, with the small reservation that you have to convert it to a nearly identical version in JS.
编辑这是此页面上的第一个答案，在没有任何其他答案的情况下提供这么多帮助似乎是值得的，但有一点保留，您必须将其转换为 JS 中几乎相同的版本。
function HSVToRGB(h : float, s : float, v : float) {
h=h%1;
s=s%1;
v=v%1;
var r : float;
var g : float;
var b : float;
var i : float;
var f : float;
var p : float;
var q : float;
var t : float;
i = Mathf.Floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
case 5: r = v; g = p; b = q; break;
}
return Color(r,g,b);
}
