RGB から HSL カラー

色相と明度として色を読み取る

整数の RGB チャンネルを色相、彩度、明度に変換します。赤、緑、青の値が分かっていて、色を比較したりパレットを調整したりするときに HSL を利用できます。入力は 0〜255 の整数で、rgb() 構文またはカンマ区切りに対応します。色相は最大のチャンネルと各チャンネルの差から求めます。

RGB のチャンネルを 0～1 の範囲に正規化し、最大値、最小値、その差から HSL を求めます。三つのチャンネルが同じなら彩度はゼロになり、灰色に意味のある色相はないため、結果では慣例としてゼロ度を使います。明度は正規化後の最大値と最小値の中間から決まります。サンプルは約 211 度の青系の色となり、関連する色を探す手掛かりになります。表示する百分率は小数第二位に丸められています。

色モデルの理解

HSL の結果は、配色内の色どうしの色相関係を調べる際に役立ちます。ただし HSL の値を一つ変えても、見た目が均等に変化するとは限りません。結果にアルファチャンネルはありません。このツールが扱うのは整数 RGB と一般的な HSL であり、カラーマネジメントのプロファイルではありません。HEX と RGB は、光の三つの加法混色チャンネルを別の形で表します。各チャンネルの整数値は 0～255 で、16 進数では二桁で書きます。したがって六桁のコードは赤、緑、青の二桁ずつをこの順に並べます。HSL は RGB 色を表す別の方法です。色相は色相環上の位置、彩度は同じ明度の灰色からの距離、明度は黒から白までの位置を表します。これらはデザイントークンの比較、CSS の読解、コードの意味を推測せずに配色を調整する際に役立ちます。

正しい表現を選ぶ

赤、緑、青の値がすべて等しい RGB は灰色です。彩度は 0 になり、色相は色相環で測定した方向ではなく、慣例上 0 と表示されます。灰色に近い色では一つのチャンネルを少し変えただけで色相の値が大きく動くことがあります。丸められた HSL を整数 RGB に戻す場合は各チャンネルを比較し、必ず同じ整数に戻ると決めつけないでください。正確なデザイントークンが必要なら元の RGB 値を保存してください。

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