HSV → RGB 計算方式の違い

色変換

計算方式の違い

 状態:-  閲覧数:2,791  投稿日:2016-06-29  更新日:2016-07-02
1.色相H0°~360°、彩度S0%~100%または0~255、明度V0%~100%または0~255
2.色相H0°~360°、彩度S0%~100%、明度V0%~100%
3.色相H0°~360°、彩度S0~255、明度V0~255
4.色相H0°~360°、彩度S0~1、明度V0~1

方式1.色相H0°~360°、彩度S0%~100%または0~255、明度V0%~100%または0~255

 閲覧数:649 投稿日:2016-06-29 更新日:2016-07-01

計算手順


1-1.RGB最大値 と RGB最小値 を求める
1-2.RGB値 を求める


1-1.RGB最大値 と RGB最小値 を求める


S・Vの範囲が0~255の場合
最大値 MAX = V
最小値 MIN = MAX - ((S ÷ 255) × MAX)


1-2.RGB値 を求める


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

計算方式の違い具体例

 閲覧数:688 投稿日:2016-06-29 更新日:2016-07-04

方式1


色相H0°~360°、彩度S0%~100%または0~255、明度V0%~100%または0~255
コード 引数 内容 戻り値
JS なし RGB ⇔ HSV 1 なし


方式2


色相H0°~360°、彩度S0%~100%、明度V0%~100%
コード 引数 内容 戻り値
JS 整数 RGB ⇔ HSV 2 オブジェクト
JS プリミティブ マウスでクリックすると、セピア画像へ変換 配列
JS プリミティブ マウスで画像をクリックすると、青写真風へ変換 配列
JS オブジェクト HEX ⇔ RBGA ⇔ CMYK ⇔ HSV ⇔ HSL ⇔ LAB オブジェクト
JS 配列 HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB 配列
JS オブジェクト i-color オブジェクト
※整数IntegerはNumberプリミティブの一種


方式3


色相H0°~360°、彩度S0~255、明度V0~255
コード 引数 内容 戻り値
JS Numberプリミティブ RGB ⇔ HSV 3 オブジェクト
PHP 配列 RGB ⇔ HSV 2 配列


方式4


色相H0°~360°、彩度S0~1、明度V0~1
コード 引数 内容 戻り値
JS なし 表色系の相互変換 なし
JS なし Chroma.js 配列


最終的に


HSV → RGB 参考にするなら
・JS / RGB ⇔ HSV 2
※minは不要

一番コードがスッキリしているのは?
・HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB
※「引数」も「戻り値」も配列


HSL → RGB 計算方式の違い

色変換コード / 確認用



週間人気ページランキング / 5-13 → 5-19
順位 ページタイトル抜粋 アクセス数
1 RGBの種類 / ビットカラー | RGB(色) 5
1 「属性」「プロパティ」「アトリビュート」の違い | CSS 5
2 鉄道会社毎のカラーコード | カラーコード(色) 4
2 Chromeでmhtml保存を選択できなくなったので、拡張機能「Save Page State」を導入 | Chrome 拡張機能 4
3 Design 0 3
3 ICCプロファイル | カラーマネージメント(色) 3
3 CSS 「id」「class」名 に関する調査履歴 1 | 命名規則(コーディングルール) 3
3 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 3
3 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
3 HSV → RGB 計算方式の違い | 色変換(色) 3
3 アイコン | 3系(Bootstrap) 3
3 ドロワーメニューが表示されない理由 | モバイルデザイン(デザイン) 3
4 RGB ⇔ Lab | 色変換(色) 2
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
4 画像縦横比の問題 | 画像 2
4 画像大きさ | 他サイト調査(HTML) 2
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
4 Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen | Google Chrome(ブラウザ) 2
4 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
4 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる | 画像 2
2026/5/20 5:05 更新