HSV → RGB 計算方式の違い

色変換

計算方式の違い

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

 閲覧数:550 投稿日: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

計算方式の違い具体例

 閲覧数:590 投稿日: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 計算方式の違い

色変換コード / 確認用



週間人気ページランキング / 10-22 → 10-28
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 30
2 鉄道会社毎のカラーコード | カラーコード(色) 15
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 8
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 7
4 RGB ⇔ Lab | 色変換(色) 7
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 5
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
6 Design 0 4
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 4
7 色モデルイメージ図 | 色変換(色) 3
7 「bgcolor」「background-color」「background」の違い | CSS 3
7 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 3
7 G'MIC | GIMP 系(ソフトウェア) 3
7 O'Reilly書籍の緑色 / #00a9a4 | カラーコード(色) 3
7 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 3
8 8ビットカラー / インデックスカラー / パレットカラー 2
8 「max-width:100%;」と「width : 100%;」の違い | CSS 2
8 RGBの種類 / ビットカラー | RGB(色) 2
2025/10/29 1:01 更新