計算方式の違い
状態:-
閲覧数:2,344
投稿日:2016-06-26
更新日:2016-06-28
1.色相H0°~360°、輝度L0~100(固定)
2.色相H0~1 / CSS Color Module Level 3
2.色相H0~1 / CSS Color Module Level 3
方式1.色相H0°~360°、輝度L0~100(固定)
計算手順
1-1.RGB最大値 と RGB最小値 を求める
1-2.RGB値 を求める
1-1.RGB最大値 と RGB最小値 を求める
輝度Lが49以下の場合
最大値 MAX = 2.55 × (L + L × (S ÷ 100))
最小値 MIN = 2.55 × (L - L × (S ÷ 100))
輝度Lが50以上の場合最小値 MIN = 2.55 × (L - L × (S ÷ 100))
最大値 MAX = 2.55 × (L + (100 - L) × (S ÷ 100))
最小値 MIN = 2.55 × (L - (100 - L) × (S ÷ 100))
最小値 MIN = 2.55 × (L - (100 - L) × (S ÷ 100))
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
手動計算例
RGB 33, 150, 243
HSL 206.6°, 89.7%, 54.1%
L=54.1HSL 206.6°, 89.7%, 54.1%
S=89.7
RGB最大値 MAX = 2.55 × (L + (100 - L) × (S ÷ 100))
RGB最大値 MAX = 2.55 × (54.1 + (100 - 54.1) × (89.7 ÷ 100)) = 242.944365 ≒ 243
RGB最小値 MIN = 2.55 × (L - (100 - L) × (S ÷ 100))
RGB最小値 MIN = 2.55 × (54.1 - (100 - 54.1) × (89.7 ÷ 100)) = 32.965635 ≒ 33
方式2.色相H0~1 / CSS Color Module Level 3
計算手順
2-1.RGB最小値m1、RGB最大値m2 を求める
2-2.RGB値 を求める
手動計算例
RGB 33, 150, 243
HSL 206.6°, 89.7%, 54.1%
RGB最小値m1HSL 206.6°, 89.7%, 54.1%
RGB最大値m2
function hsl2rgb(h_deg, s_percent, l_percent){
var h_norm = h_deg / 360;
var s_norm = s_percent / 100;
var l_norm = l_percent / 100;
var m2;
if (l_norm < 0.5) {
m2 = l_norm * (s_norm + 1);
} else {
m2 = l_norm + s_norm - l_norm * s_norm;
}
var m1 = l_norm * 2 - m2;
var r_norm = this._hsl2rgb(m1, m2, h_norm + 1 / 3);
var g_norm = this._hsl2rgb(m1, m2, h_norm);
var b_norm = this._hsl2rgb(m1, m2, h_norm - 1 / 3);
this.r_ = parseInt(Math.round(r_norm * 255));
this.g_ = parseInt(Math.round(g_norm * 255));
this.b_ = parseInt(Math.round(b_norm * 255));
console.log('hsl2rgb; ' + this.r_ +' '+ this.g_ + ' '+ this.b_);
}
function _hsl2rgb(m1, m2, h) {
var _h = h;
if (_h < 0) {
_h = _h + 1;
}
if (_h > 1) {
_h = _h - 1;
}
if (_h * 6 < 1) {
return m1 + (m2 - m1) * _h * 6;
}
if (_h * 2 < 1) {
return m2;
}
if (_h * 3 < 2) {
return m1 + (m2 - m1) * (2 / 3 - _h) * 6;
}
return m1;
}
hsl2rgb(206.6, 89.7, 54.1);
//m2; 0.9527230000000001
//m1; 0.12927699999999998
//hsl2rgb; 33 150 243
検証
RGB最小値
・255 × m1 = 255 × 0.12927699999999998 = 32.965635 ≒ 33
RGB最大値
・255 × m2 = 255 × 0.9527230000000001 = 242.944365 ≒ 243
計算方式の違い具体例
方式1
色相H0°~360°、輝度L0~100(固定)
コード | 引数 | 内容 | 戻り値 |
---|---|---|---|
JS | なし | RGB ⇔ HSL 1 | なし |
JS | プリミティブ | RGB ⇔ HSL 2 | オブジェクト |
方式2
色相H0~1 / CSS Color Module Level 3
コード | 引数 | 内容 | 戻り値 |
---|---|---|---|
JS | プリミティブ | RGB ⇔ HSL 3 | なし |
JS | オブジェクト | HEX ⇔ RBGA ⇔ CMYK ⇔ HSV ⇔ HSL ⇔ LAB | オブジェクト |
方式3
色相H0~1 / for文ループで条件分岐
・途中でRGBを配列として保持
コード | 引数 | 内容 | 戻り値 |
---|---|---|---|
JS | プリミティブ | 16進数カラーコード → RGB / HSL 2 | プリミティブ |
JS | 配列 | HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB | 配列 |
JS | なし | Chroma.js | 配列 |
方式4
色相H0°~360°、方式1の変形
コード | 引数 | 内容 | 戻り値 |
---|---|---|---|
JS | なし | 表色系の相互変換 | なし |
理解できない
コード | 引数 | 内容 | 戻り値 |
---|---|---|---|
JS | オブジェクト | colorPicker and colors | オブジェクト |
最終的に
HSL → RGB 参考にするなら
・「RGB ⇔ HSL 3」が「CSS Color Module Level 3」記載内容に最も近いため、信頼できると思われ
※コード内容云々ではなく、出典の信頼度が最も高い、という意味
本来の意味で考えれば
・「RGB ⇔ HSL 2」が基本的な考え方を最も忠実に再現しているかも
・内容未検証