ホーム > カテゴリ > HTML5・JavaScript >

RGBとHSVの相互変換[色見本/サンプル付き]

RGB色空間とHSV色空間を相互変換します。入力はHTMLのカラーコード、RGB、HSVの値から可能でプレビュー画面にはカラーコード、css用のrgb()や反対色、補色が表示されます。

プレビューがありますのでRGBカラーの「色見本」としてもご使用いただけます。

変換

#ff0000
rgb(255,0,0);
反対色 #00ffff
補色 #00ffff

カラーコード
 

RGB
R  
G  
B  

HSV
H  
S  
V  

関連記事:RGBとHSLの相互変換 色相環と12色相環

HTMLのカラーコードを変更した際には、ブラウザに表示されている画面の適当な箇所をクリックすると変更が反映されます。

HTMLのカラーコードは3桁形式(#fff)と6桁形式(#ffffff)のどちらにも対応しています。3桁形式を入力すると自動的に6桁形式に変換されます。

色空間について

RGB色空間とHSV色空間の色に関する解説です。色空間はカラーモデルやカラースペースなどとも呼ばれます。

RGB色空間

RGBの「R」(red)は「赤色」で「G」(green)は緑色、「B」(blue)は青色です。この3種の原色を組み合わせて、色を再現します。これらの各範囲は0-255となります。1つの原色の範囲が256種類となりますので「256 x 256 x 256」で約1677万色の色を表現する事が可能です。

このRGBはパソコンなどで一般的に使用されています。

HSV色空間(HSB色空間)

HSV色空間の「H」(hue)は色相と呼ばれ「色合い」を調整します。範囲は0-360度です。「S」(saturation)は彩度で「鮮やかさ」を調整します。範囲は0-100%となります。「V」(Value)は明度で「明るさ」を調整します。範囲は0-100%です。

また、「V」を「B」(Brightness/輝度)と称してHSB色空間と呼ぶ場合もあります。HSVとHSBは同じです。

このページの初期値が赤色になっているのは「色相」の最初の値である0度が赤色だからです。初期状態で「H」の色相だけをスライダーで変化させると色合いが変化する事がわかると思います。その変化を画像にするとこのようになります。

この変化は「赤、オレンジ、黄色、緑、水色、青、紫色」の順番で虹色となります。

彩度は100%が純色となり、彩度を落としていくと徐々に白色になります。

明度は100%が純色となり、明度を落としていくと徐々に黒色になります。

補色と反対色

補色は色相環における相互に向かいあう色となります。詳細は色相環と12色相環の記事をご覧ください。

変換の誤差について

RGBとHSV色空間の変換は値の誤差が発生する場合があります。

サンプルプログラム

このページではRGB/HSV色空間の値を相互変換しています。その変換のサンプルプログラムをJavaScriptのコードで公開しています。

RGBからHSVの変換

 // RGB色空間からHSV色空間へ変換する 
 //  r(red)  : 赤色 0-255の値
 //  g(green): 緑色 0-255の値
 //  b(blue) : 青色 0-255の値 
 function rgb2hsv(r, g, b){   
   var max = Math.max(r, g, b);
   var min = Math.min(r, g, b);   
   var hsv = {'h':0,
              's':0,
              'v':max}; // V(明度)   
   
   if (max != min) {
     // H(色相)  
     if (max == r) hsv.h = 60 * (g - b) / (max-min);
     if (max == g) hsv.h = 60 * (b - r) / (max-min) + 120;
     if (max == b) hsv.h = 60 * (r - g) / (max-min) + 240;
     
     // S(彩度)
     hsv.s = (max - min) / max;
   }   

   if (hsv.h < 0){
     hsv.h = hsv.h + 360;
   }
   
   hsv.h =  Math.round(hsv.h);
   hsv.s =  Math.round(hsv.s * 100);
   hsv.v =  Math.round((hsv.v / 255) * 100);     
   return hsv;   
 }

HSVからRGBの変換

 // HSV(HSB)色空間からRGB色空間へ変換する 
 //  h(hue)       : 色相/色合い   0-360度の値
 //  s(saturation): 彩度/鮮やかさ 0-100%の値
 //  v(Value)     : 明度/明るさ   0-100%の値 
 //  ※v は b(Brightness)と同様 
 function hsv2rgb(h, s, v){
   var max = v;
   var min = max - ((s / 255) * max);
   var rgb = {'r':0,'g':0,'b':0};  
   
   if (h == 360){
     h = 0;
   }
   
   s = s / 100;   
   v = v / 100;   
   
   if (s == 0){
     rgb.r = v * 255;
     rgb.g = v * 255;
     rgb.b = v * 255;
     return rgb;
   } 
   
   var dh = Math.floor(h / 60);
   var p = v * (1 - s);
   var q = v * (1 - s * (h / 60 - dh));
   var t = v * (1 - s * (1 - (h / 60 - dh)));
   
   switch (dh){
    case 0 : rgb.r = v; rgb.g = t; rgb.b = p;  break;
    case 1 : rgb.r = q; rgb.g = v; rgb.b = p;  break;
    case 2 : rgb.r = p; rgb.g = v; rgb.b = t;  break;
    case 3 : rgb.r = p; rgb.g = q; rgb.b = v;  break;
    case 4 : rgb.r = t; rgb.g = p; rgb.b = v;  break;
    case 5 : rgb.r = v; rgb.g = p; rgb.b = q;  break
   }   
   
   rgb.r =  Math.round(rgb.r * 255);
   rgb.g =  Math.round(rgb.g * 255);
   rgb.b =  Math.round(rgb.b * 255);
   return rgb; 
 } 

※26行目から37行目はほぼ原著者の石立さんのコードのままになっています。

参考リンク

RGB/HSV変換のロジック/計算式を参考にしたサイトです。感謝です。

HSV色空間
Visual C++ 2010 Expressを用いた易しい画像処理(3)
色の変換式(HSL,HSV)





関連記事



公開日:2016年02月23日 最終更新日:2016年02月24日
記事NO:01796