RGB ⇔ HSV

色 ＞ 色変換

HSV2種類

　状態:- 　閲覧数:2,525 　投稿日:2016-04-20 　更新日:2016-04-21
円錐モデル
・彩度 … 最大値と最小値の差

円柱モデル
・彩度 … 「最大値と最小値の差」の「最大値」に対する割合

RGB(33,150,243)


HSV
- 色相範囲が0～360 色相範囲が0～100
彩度明度範囲が0～100 206°, 89%, 54% 57°, 89%, 54%
彩度明度範囲が0～255 206°, 228%, 138% 57°, 228%, 138%


RGB → HSV

　閲覧数:658　投稿日:2016-04-18　更新日:2016-04-20

RGB色空間からHSV色空間へ変換


R(red)  : 赤色 0-255の数値
G(green): 緑色 0-255の数値
B(blue) : 青色 0-255の数値
33, 150, 243

1.RGBの最大値最小値


RGBの最大値最小値を求める

最大値
・243

最小値
・33

2.色相（Hue）


条件分岐
・1.最大値=最小値
・2.最大値R
・3.最大値G
・4.最大値B




JavaScript
・RGB ⇔ HSV 2
・RGB ⇔ HSV 3

PHP
・RGB ⇔ HSV 2

理解できない
if ($R == $minRGB)

    $h = 3 - (($G - $B) / $chroma);

elseif ($B == $minRGB)

    $h = 1 - (($R - $G) / $chroma);

else // $G == $minRGB

    $h = 5 - (($B - $R) / $chroma);

・RGB → HSV

青 ／ Material UI Colors ／ Flat UI Colors

色モデルイメージ図



類似度ページランキング
順位 ページタイトル抜粋 ％
1 RGB ⇔ HSV 73
2 RGB → HSL 60
3 HSL → RGB 60
4 RGB → HSL 目次 52
5 RGB ⇔ Lab 50
6 HSV ／ HSB 50
7 HSV → RGB 計算方式の違い 50
8 RGB → HSL ／ RGB → HSV 44
9 SVG 43
10 RGB 43
11 HSL → RGB 計算方式の違い 43
12 RGB → HSL 勘違いしていたかも 40
13 RGB → HSL を 色モデルで考える 39
14 RGB → 色相H 方式の違い 38
15 RGB → 色相H 計算方式の違い 36
16 RGB → 彩度S 計算方式の違い 36
17 SVGハマった点 32
18 SVG表示サイズ 32
19 ZorroSVG 32
20 RGBの種類 ／ ビットカラー 31
2026/6/09 2:27 更新
週間人気ページランキング ／ 6-1 → 6-7
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
1 「属性」「プロパティ」「アトリビュート」の違い | CSS 5
2 RGBの種類 ／ ビットカラー | RGB(色) 4
3 HSLとHSVの違い | 色変換(色) 2
3 画像縦横比の問題 | 画像 2
3  全体基準となるhtmlタグへのfont-size指定案 2
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
3 SeaMonkey 2.7.2 2
3 RGB ／ 24ビットカラー 2
3 鉄道会社毎のカラーコード | カラーコード(色) 2
3 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2
3 RGB ⇔ Lab | 色変換(色) 2
3 縦横比が16:9となる整数値の組み合わせ 2
4 画面キャプチャ 2017 年 | Chrome 拡張機能 1
4 メニュー他サイト調査 | メニュー(UI) 1
4 RGB → HSL 変換式 ／ 最大値基準 1
4 RGB → HSL 最大値基準 ／ RGB 33, 150, 243 → HSL 206.6°, 89.7％, 54.1％さ 1
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 1
4 方式2.色相H0～1 ／ CSS Color Module Level 3 1
4 CopyTabTitleUrl(Chrome 拡張機能) カテゴリー 1
2026/6/8 5:05 更新