RGBとHSV・HSBの相互変換ツールと変換計算式
色の表現法である「RGB」と「HSV」を相互変換するオンラインツールと変換計算式の解説を公開中。
■ RGBとHSV・HSBの相互変換ツール
■ カラーコード
カラーコード :
■ RGB
| R : | |
| G : | |
| B : |
■ HSV
| H : | |
| S : | |
| V : |
H値の範囲 :
S,V値の範囲 :
S,V値の範囲 :
色の見本
#ffffff
読み込み中...
ツールの使い方
色を赤・緑・青の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が最大値の場合 色相 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の範囲に収めます
Gが最大値の場合 色相 H = 60 × ((B - R) ÷ (MAX - MIN)) +120
Bが最大値の場合 色相 H = 60 × ((R - G) ÷ (MAX - MIN)) +240
3つとも同じ値の場合 色相 H = 0
[例] RGB(210,70,120)の色相を求める
最大値はRなので
60 × ((70 - 120) ÷ (210 - 70)) = -21.4285...
マイナス値なので360を加算して0～360の範囲に収める
-21.4285... + 360 = 339
60 × ((70 - 120) ÷ (210 - 70)) = -21.4285...
マイナス値なので360を加算して0～360の範囲に収める
-21.4285... + 360 = 339
彩度を求める
彩度 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
0～255の場合は 0.74285 × 255 = 189
0～100の場合は 0.74285 × 100 = 74
明度を求める
明度 V = MAX
[例] RGB(45,175,90)の明度を求める
= 175
0～255の場合は 175
0～100の場合は (175 ÷ 255) × 100 = 69
0～255の場合は 175
0～100の場合は (175 ÷ 255) × 100 = 69
HSVからRGBへの変換計算式
最大値と最小値を求める
S・Vの範囲が0～255の場合の場合は下記のとおりです。
最大値 MAX = V
最小値 MIN = MAX - ((S ÷ 255) × MAX)
最小値 MIN = MAX - ((S ÷ 255) × MAX)
[例] HSV(185,95,210)の最大値と最小値を求める
MAX = 210
MIN = 210 - ((95 ÷ 255) × 210)
=131.7647....
MIN = 210 - ((95 ÷ 255) × 210)
=131.7647....
RGB値を求める
残った色も変換式の逆算で求めます。
Hの範囲が0～360、S・Vの範囲が0～255の場合は下記のとおりです。
■ Hが0～60の場合
R = MAX
G = (H ÷ 60) × (MAX - MIN) + MIN
B = MIN
R = MAX
G = (H ÷ 60) × (MAX - MIN) + MIN
B = MIN
■ Hが60～120の場合
R = ((120 - H) ÷ 60) × (MAX - MIN) + MIN
G = MAX
B = MIN
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
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
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
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
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
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」を相互変換するツールと変換計算式の解説。
HTML・CSSで使用するカラーネーム・カラーコード一覧
HTMLやCSSで使用できる147色のカラーネーム・カラーコードの一覧。