HSLからRGBへの変換—人間の色の直感を画面の数値に落とし込む
HSL（色相・彩度・明度）は人間が色を直感的に操作するために設計された色空間だ。たとえば明度（Lightness）だけを変えれば色相（Hue）がそのまま保たれるため、パレット生成やテーマ作成に頻繁に使われる。一方RGBは、画面上の各サブピクセルが発する光の強さを0～255の整数で直接指定する、ディスプレイの動作そのものに対応した色空間である。このページは、HSLの値からRGBの数値（0～255）を即座に算出し、さらにHEX、HSV、CMYK、LABへも変換する。
このツールの核となる特徴は、変換がロスレスであることだ。HSLとRGBの間の変換では、有効なHSL値は必ずディスプレイ表示可能な単一のRGB値に写像される。LABやCMYKからRGBへの変換で発生するような色域外（out‑of‑gamut）クリッピングは起こらない。つまり、HSLで指定した色がそのまま画面上で再現される保証がある。
入力と出力—数値の範囲と実例
入力はHSL値：色相（0～360度）、彩度（0～100%）、明度（0～100%）。例えば243, 75%, 59%と入力する。出力は以下の全項目が瞬時に更新される。
| 出力形式 | 範囲 | 例：入力243, 75%, 59%の出力 |
|---|---|---|
| HEX | 6桁16進数 | #4646E5 |
| RGB | 各0～255 | 79, 70, 229 |
| HSL | 0～360, % | 243°, 75%, 59% |
| HSV | 0～360, % | 242°, 69%, 90% |
| CMYK | 0～100% | 推定値（後述） |
| LAB | L 0～100, a/b 任意 | 32.7, 56.3, -72.1 |
例のHSL値243, 75%, 59%は紫寄りの青に相当する。RGBに変換すると79, 70, 229となり、赤成分が少なく青成分が支配的であることがわかる。
変換の仕組み—なぜロスレスか
HSL→RGB変換は標準的な数学的アルゴリズムに従う。色相を6つのセクターに分割し、彩度と明度から中間変数（chroma, m）を計算する。この変換は全単射（bijection）ではないが、有効なHSL値の範囲内では出力が一意に決まり、かつ出力RGB値は常に0～255内に収まる。これが「ロスレス」の意味だ。CIE Labのように人間の知覚をモデル化した色空間からRGBに変換する場合、Labの色域がRGBより広いためクリッピングが避けられない。HSLは最初からRGB色域に基づいて定義されているため、この問題が生じない。
各出力の実用的な意味と注意点
HEXとRGBはCSSやプログラムコードで直接使える。HSV（色相・彩度・明度の別のバリエーション）は、明度を輝度に近い形で扱いたい場面に有用。LABは人間の色差知覚に基づくため、色の比較や調整に使われる。
CMYKについては注意が必要だ。ここで表示されるCMYK値は、一般的なsRGB→CMYK変換アルゴリズムによる画面上の推定値であり、実際の印刷では紙質、インク、プリンタプロファイルによって大きく異なる。印刷物の色を正確に予測したい場合は、専用のCMYK変換ツールやICCプロファイルを使うべきだ。
エッジケースと誤操作への対処
HSLの入力形式が正しくない場合、ツールは「Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.」と表示する。よくある間違いは、
- 彩度や明度を数値だけで（パーセント記号なしで）入力する
- 順序を誤る（例：彩度を先に書く）
- 色相に360を超える値を入れる
。すべての変換はブラウザ内で実行され、入力データは外部に送信されない。
実務での使用例
デザイナーがHSLで配色パレットを作成した後、コードに落とし込むためにRGBまたはHEXが必要になる。フロントエンド開発者は、デザインツールが出力するHSL値をCSS（rgba()など）に変換する必要がある。アクセシビリティの観点では、HSLで明度を調整しながらコントラスト比を維持できるため、WCAG準拠の配色を効率的に生成するのに役立つ。
FAQ—よくある質問
Q: HSLとHSVの違いは何ですか？ A: 両者とも色相・彩度・明度系ですが、HSLの明度は明るさと暗さの平均に近く、HSVの明度（Value）は最大のRGB成分の値に相当します。例えば純粋な黄色（RGB 255,255,0）はHSLでは明度50%、HSVでは明度100%となります。
Q: 変換結果がディスプレイで見る色と異なるのはなぜですか？ A: 各ディスプレイの色域やキャリブレーションが異なるため、同じRGB値でも見え方が変わることがあります。このツールはsRGB色空間を前提としています。
Q: CMYK値を使って印刷できますか？ A: 画面上の推定値であり、実際の印刷には専用のCMYK変換とプリンタプロファイルが必要です。試し刷りを推奨します。
Q: 色相0度と360度は同じ色ですか？ A: はい、どちらも赤色を表します。ただしツールは0～360の範囲を想定しており、360を入力するとエラーになります。0～359で指定してください。
Q: HSLA（アルファ付き）には対応していますか？ A: 現バージョンではアルファ値には対応していません。HSLのみの変換です。
Q: 変換履歴は保存されますか？ A: いいえ。すべてブラウザのメモリ内で処理され、ページを閉じれば履歴は消えます。