HSL から RGB カラー

HSL から RGB チャンネルを求める

色相・彩度・明度を整数の RGB チャンネル値に変換します。色の指定が色相と2つの割合で与えられていて、別のツールには RGB の数値が必要な場合に使います。hsl(210, 70%, 50%)、または同じ3つの値をカンマで区切って入力できます。色相は0〜360度、彩度と明度はそれぞれ0〜100%の範囲です。

色相は色相環の領域を決め、彩度から求めるクロマと明度によって三つの RGB チャンネルの値が決まります。アルゴリズムは彩度と明度からクロマを計算し、色相に対応する領域へ配置したうえで、共通の補正値を加えて赤、緑、青を作ります。各チャンネルはゼロから 255 までの整数に丸めます。色相が 360 度の場合はゼロ度へ戻ります。彩度がゼロの HSL 色は、色相に関係なく灰色になります。

色モデルの理解

整数チャンネルを受け取るソフトウェアで結果を使う前に、入力の二つの百分率が彩度、明度の順であることを確認してください。結果にアルファチャンネルはありません。このツールが扱うのは整数 RGB と一般的な HSL であり、カラーマネジメントのプロファイルではありません。結果を貼り付ける場所で求められる形式を選びます。CSS は HEX と rgb()、hsl() の構文に対応していますが、デザインシステムや画像ソフトはチャンネル値を別々に保存することがあります。このツールは通常の sRGB の計算を使い、ディスプレーのプロファイル間の変換や、あらゆるモニターでの見え方の予測はしません。三チャンネル HEX にも、ここでの RGB や HSL の結果にも透明度は含まれません。四桁または八桁のアルファ付きコードには別の操作が必要です。整数の RGB 値や表示される HSL の小数値は丸められることがあるため、往復変換で一つのチャンネル値が 1 ずれる場合があります。

正しい表現を選ぶ

彩度が 0 のときは、色相を変えても出力される灰色は変わりません。明度が 0 なら有効な色相はすべて黒になり、明度が最大ならすべて白になります。こうした端点で確かめる方が、小さなプレビューだけで判断するより確実です。計算した RGB チャンネルは整数に丸められるため、後で RGB から HSL に戻しても、元の割合の小数桁がすべて再現されるとは限りません。色相や彩度を引き続き編集する場合は、元の HSL 値を保存してください。

確認例として、hsl(210, 70%, 50%) を入力すると rgb(38, 128, 217) が得られます。別のアプリと照合するときは、元の入力も結果と並べて残してください。次に、表示結果を逆方向の色変換ツールに入力し、元の入力と比べてください。HEX と整数の RGB は正確に往復変換できますが、HSL のパーセント値を経由すると RGB チャンネルが 1 だけ丸められる場合があります。この違いが重要なら元の入力値も保存してください。