計算方式の違い
状態:-
閲覧数:2,145
投稿日: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
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
計算手順
1-1.RGB最大値 と RGB最小値 を求める
1-2.RGB値 を求める
1-1.RGB最大値 と RGB最小値 を求める
S・Vの範囲が0~255の場合
最大値 MAX = V
最小値 MIN = MAX - ((S ÷ 255) × MAX)
最小値 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
計算方式の違い具体例
方式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 | オブジェクト |
方式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
※「引数」も「戻り値」も配列