RGBとHSV・HSBの相互変換ツール
RGBとHSV・HSBの相互変換ツールと変換計算式
色の表現法である「RGB」と「HSV」を相互変換するツールと変換計算式の解説。

ツールの使い方

色を赤・緑・青の3つで表現する「RGB」と、同じく色を色相・彩度・明度の3つで表現する「HSV」と「HSB」を相互変換するツールです。HTMLなどで使う16進数カラーコードとの変換も可能。
Webブラウザ上で動作するので手軽に利用できます。


RGB値をHSV値に変換したい場合は、RGB値の欄に変換する値を入力してください。
HSV値をRGB値に変換したい場合は、HSV値の欄に変換する値を入力してください。
HSB値を変換する場合はHSVの欄にH値・S値はそのまま、B値はV値の部分に入力してください。

値を入力すると、変換後の値が自動的にセットされます。

RGBの各パラメータは0~255の値で表示されます。
HSVはデフォルト設定だとHが0~360、SとVは0~100で表示されますが、Hを0~100、SとVを0~255の範囲に変更することもできます。

HSVとHSBの違い

「HSV」は、色を色相(Hue)・彩度(Saturation)・明度(Value)の3要素で表現したものです。
「HSB」も同じく、色を色相(Hue)・彩度(Saturation)・明度(Brightness)の3要素で表現したものです。
つまり、明度の英語表記がValueかBrightnessかの違いだけであって、パラメータ自体は基本的に同じものです。

このページでは「HSV」で表記を統一していますが、V値の部分に「HSB」のB値をそのまま入力することで「HSB」の変換となります。

RGBからHSVへの変換計算式

色相を求める

R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
Rが最大値の場合 色相 H = 60 × ((G - B) ÷ (MAX - MIN))
Gが最大値の場合 色相 H = 60 × ((B - R) ÷ (MAX - MIN)) +120
Bが最大値の場合 色相 H = 60 × ((R - G) ÷ (MAX - MIN)) +240
3つとも同じ値の場合 色相 H = 0
求められた色相がマイナス値だった場合は360を加算して0~360の範囲に収めます
[例] RGB(210,70,120)の色相を求める
最大値はRなので
60 × ((70 - 120) ÷ (210 - 70)) = -21.4285...

マイナス値なので360を加算して0~360の範囲に収める
-21.4285... + 360 = 339

彩度を求める

R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
彩度 S = (MAX - MIN) ÷ MAX
[例] RGB(45,175,90)の彩度を求める
(175 - 45) ÷ 175 = 0.74285....

0~255の場合は 0.74285 × 255 = 189
0~100の場合は 0.74285 × 100 = 74

明度を求める

R・G・Bのうち、最も大きな値をMAXとして
明度 V = MAX
[例] RGB(45,175,90)の明度を求める
= 175

0~255の場合は 175
0~100の場合は (175 ÷ 255) × 100 = 69

HSVからRGBへの変換計算式

最大値と最小値を求める

RGBからHSVへの変換式を逆算することで、HSVの値からRGBの最大値と最小値を求める式を導くことができます。

S・Vの範囲が0~255の場合の場合は下記のとおりです。
最大値 MAX = V
最小値 MIN = MAX - ((S ÷ 255) × MAX)
[例] HSV(185,95,210)の最大値と最小値を求める
MAX = 210
MIN = 210 - ((95 ÷ 255) × 210)
=131.7647....

RGB値を求める

色相はRGBの最大値・最小値を使って求めているため、逆算することでどの色が最大値・最小値になるかがわかります。
残った色も変換式の逆算で求めます。

Hの範囲が0~360、S・Vの範囲が0~255の場合は下記のとおりです。
■ Hが0~60の場合
R = MAX
G = (H ÷ 60) × (MAX - MIN) + MIN
B = MIN
■ Hが60~120の場合
R = ((120 - H) ÷ 60) × (MAX - MIN) + MIN
G = MAX
B = MIN
■ Hが120~180の場合
R = MIN
G = MAX
B = ((H - 120) ÷ 60) × (MAX - MIN) + MIN
■ Hが180~240の場合
R = MIN
G = ((240 - H) ÷ 60) × (MAX - MIN) + MIN
B = MAX
■ Hが240~300の場合
R = ((H - 240) ÷ 60) × (MAX - MIN) + MIN
G = MIN
B = MAX
■ Hが300~360の場合
R = MAX
G = MIN
B = ((360 - H) ÷ 60) × (MAX - MIN) + MIN
[例] HSV(325,95,210)のRGB値を求める
MAX = 210
MIN = 210 - ((95 ÷ 255) × 210)
=131.7647....

Hが300~360の範囲内なので
R = 210
G = 131
B = ((360 - 325) ÷ 60) × (210 - 131) + 131
   = 177

関連コンテンツ

WEBカラーチャート
HTML・CSSで使える色の見本一覧。各色のRGBと16進数カラーコードを簡単に取得できます。
RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
RGBとHSLの相互変換ツール
色の表現法である「RGB」と「HSL」を相互変換するツールと変換計算式の解説。
CSSアイコン
HTMLやCSSで使用できる147色のカラーネーム・カラーコードの一覧。