RGB ⇔ HSV

色 ＞ 色変換

HSV2種類

　状態:- 　閲覧数:2,612 　投稿日: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

　閲覧数:684　投稿日: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/10/30 5:56 更新
週間人気ページランキング ／ 10-23 → 10-29
順位 ページタイトル抜粋 アクセス数
1 Design 0 16
2 「bgcolor」「background-color」「background」の違い | CSS 6
3 鉄道会社毎のカラーコード | カラーコード(色) 5
4 カラーコード ／ 色コード | カラーコード(色) 4
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
6 Flickrがサポートするライセンス 9 ＋ 特別なライセンス 2 | 画像著作権(画像) 2
6 Illustrator 2 で作成したデータを、Fireworks 8 で読み込む | Fireworks 8(Fireworks) 2
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
6 HSLとHSVの違い | 色変換(色) 2
6 縦横比が16:9となる整数値の組み合わせ 2
6 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
6 Chromeブックマーク ショートカット | Chromeブックマーク(ブラウザ) 2
6 Stylus(Chrome 拡張機能) カテゴリー 2
6 レスポンシブサイトにおけるスマホ表示用画像指定 2
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
6 Adobe Camera Raw 4.0 | Photoshop 2
6 スキップリンク | アクセシビリティ(UI) 2
6 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 2
    6 画像素材 | 画像 2
    2026/10/30 5:05 更新