RGBとHSVの相互変換[色見本/サンプル付き]
RGB色空間とHSV色空間を相互変換します。入力はHTMLのカラーコード、RGB、HSVの値から可能でプレビュー画面にはカラーコード、css用のrgb()や反対色、補色が表示されます。
プレビューがありますのでRGBカラーの「色見本」としてもご使用いただけます。
変換
rgb(255,0,0);
反対色 #00ffff
補色 #00ffff
| カラーコード |
|---|
| RGB | ||
|---|---|---|
| R | ||
| G | ||
| B | ||
| HSV | ||
|---|---|---|
| H | ||
| S | ||
| V | ||
関連記事：RGBとHSLの相互変換 色相環と12色相環
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を用いた易しい画像処理（３）
色の変換式（HSL，HSV）
関連記事
