計算方式の違い具体例

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