HSL → RGB 計算方式の違い

計算手順

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

---

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

輝度Lが49以下の場合
輝度Lが50以上の場合

---

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

---

手動計算例

L=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-1.RGB最小値m1、RGB最大値m2 を求める

2-2.RGB値 を求める

---

手動計算例

RGB最小値m1
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」が基本的な考え方を最も忠実に再現しているかも
・内容未検証