javascript中的RGB到HSV颜色？ [关闭]

Posted 2023-02-23

【中文标题】javascript中的RGB到HSV颜色？ [关闭]

【英文标题】：RGB to HSV color in javascript? [closed]

【发布时间】：2011-12-22 19:12:01

【问题描述】：

有谁知道 javascript 中将 RGB 颜色转换为 HSV 颜色格式的函数？

（或 jQuery）

【问题讨论】：

Google 搜索的第一个重要结果：kourbatov.com/faq/rgb2hsv.htm

我不确定是否有简单的方法，但请查看here 及其源代码。它可能对你有用

@RobW 现在这是 Google 上的第一个重要结果。

【参考方案1】：

这是一个独立的函数：

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

【参考方案2】：

纯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>

这是基于这个公式 wiki - 我犯了错误 analysis 以表明结果是正确的

【讨论】：

应该考虑canvas或其他来源在[0,255]中给出rgb值，如果你想存储在int8数组中，一半的h值超过255并且没有0到1之间的值整数。

【参考方案3】：

鉴于 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

正如我在Javascript convert HSB/HSV color to RGB accurately 中回答的那样