有没有人知道在JavaScript（或者jQuery）中可以将RGB颜色转换成HSV颜色格式的函数？
JavaScript中的RGB转HSV颜色？
29
- Alex
3
1谷歌搜索的第一个重要结果：http://www.kourbatov.com/faq/rgb2hsv.htm - Rob W
我不确定是否有简单的方法，但是请看这里（http://www.csgnetwork.com/csgcolorsel4.html）及其源代码。它可能对你有用。 - genesis
5好的，现在这是谷歌上第一个重要的搜索结果。 - Petah
3个回答
65
这是一个独立的函数：
function rgb2hsv (r, g, b) {
let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;
rabs = r / 255;
gabs = g / 255;
babs = b / 255;
v = Math.max(rabs, gabs, babs),
diff = v - Math.min(rabs, gabs, babs);
diffc = c => (v - c) / 6 / diff + 1 / 2;
percentRoundFn = num => Math.round(num * 100) / 100;
if (diff == 0) {
h = s = 0;
} else {
s = diff / v;
rr = diffc(rabs);
gg = diffc(gabs);
bb = diffc(babs);
if (rabs === v) {
h = bb - gg;
} else if (gabs === v) {
h = (1 / 3) + rr - bb;
} else if (babs === v) {
h = (2 / 3) + gg - rr;
}
if (h < 0) {
h += 1;
}else if (h > 1) {
h -= 1;
}
}
return {
h: Math.round(h * 360),
s: percentRoundFn(s * 100),
v: percentRoundFn(v * 100)
};
}
如何使用它：
console.log( rgb2hsv(60, 120, 180) );
// {h: 210, s: 66.67, v: 70.59}
- Mic
1
这会返回一个对象，但是 JavaScript 没有本地解释该对象作为颜色的能力。 - David Bandel
27
纯JS，最短
试试这个（更多信息： hsv2rgb，rgb2hsl，hsl2rgb 和 sl22sv）：
// input: r,g,b in [0,1], out: h in [0,360) and s,v in [0,1]
function rgb2hsv(r,g,b) {
let v=Math.max(r,g,b), c=v-Math.min(r,g,b);
let h= c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c));
return [60*(h<0?h+6:h), v&&c/v, v];
}
function rgb2hsv(r,g,b) {
let v=Math.max(r,g,b), c=v-Math.min(r,g,b);
let h= c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c));
return [60*(h<0?h+6:h), v&&c/v, v];
}
console.log(`rgb: (0.5,0.2,0.3) --> hsv: (${rgb2hsv(0.5,0.2,0.3)})`)
// ---------------
// UX
// ---------------
rgb= [0,0,0];
hs= [0,0,0];
let $ = x => document.querySelector(x);
let c = (x,s) => $(x).style.backgroundColor=s;
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)];
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();.box {
width: 50px;
height: 50px;
margin: 20px;
}
body {
display: flex;
}<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 class="infoRGB"></pre>
</div>
<div>
<div class="box hsl"></div>
</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 class="infoHS"></pre><br>
</div>
- Kamil Kiełczewski
2
1应该考虑到画布或其他来源在[0,255]范围内给出RGB值，如果要存储在int8数组中，一半的h值超过了255，并且在整数中没有介于0和1之间的值。 - nerkn
2@nerkn 所以做一点数学计算让它们适合。 - Jason C
0
鉴于npm的日益流行，我认为值得一提的是一个包含所有这些函数的简单API的软件包：
npm install colorsys
var colorsys = require('colorsys')
colorsys.rgb_to_hsv({ r: 255, g: 255, b: 255 })
// { h: 0 , s: 0 , v: 100 }
对于浏览器：
<script src="http://netbeast.github.io/colorsys/browser.js"></script>
colorsys.rgb_to_hex(h, s, v)
// #hexcolor
https://www.npmjs.com/package/colorsys
正如我在JavaScript准确地将HSB/HSV颜色转换为RGB中所回答的那样。
- jsdario
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接