HSL から RGB への色変換ツール

結果の R、G、B の値は、0~255のスケールで赤・緑・青の各チャンネルの強度を示します。これらの値は CSS で rgb(R, G, B) の形式でそのまま使用したり、画像編集ソフトで利用したりできます。

まず彩度と明度から「彩度幅」(C)の値を計算します。色相がどの60度区間に入るかに応じて R、G、B チャンネルに仮の値を割り当て、最後に明度のオフセット(m)を加えて0~255の範囲にスケーリングします。

• 彩度と明度をパーセントから0~1の範囲に変換します。
• 明度のオフセット(m)とは独立に「彩度幅」(C)の値を計算します。
• 色相の値がどの60度区間に入るかを判定します。
• その区間に応じて、R、G、B チャンネルに仮の値(C、X、0の組み合わせ)を割り当てます。
• 明度のオフセット(m)を加え、結果に255を掛けて最終的な R、G、B の値を求めます。

H=210°, S=65%, L=45%(鮮やかな青)は、およそ R=40, G=115, B=189 に相当します。

• 色相(H)は0~360度の範囲で入力してください。360度は0度(赤)と同じ色になります。
• 彩度と明度はパーセント(0~100)で入力してください。小数値を使うとより正確な結果が得られます。
• 得られる RGB の値は小数になる場合があります。画面や CSS で使用する際は最も近い整数に丸めてください。

HSL(色相・彩度・明度)モデルは、色相・彩度・明度を独立して調整できるため、色のバリエーションを作りやすく、デザイナーが色を定義する際に最もよく使う形式の一つです。しかし、画面やほとんどの画像形式は色を RGB として処理するため、HSL で定義された色は表示される前に RGB へ変換する必要があります。

この変換の鍵となるのは、色相(H)がカラーホイールのどの60度区間に入るかを判定することです。ホイールは60度ずつの6つの等しい区間に分かれており、各区間で赤・緑・青のチャンネルの組み合わせが異なる形で優勢になります。

彩度と明度は、その区間内でチャンネルの値が「どれだけ幅を持つか」(彩度幅、C)を決定します。彩度が高いほど鮮やかな色になり、彩度が低いほどグレーに近いくすんだ色になります。そして明度は結果を黒または白の方向に寄せます。

このツールは、入力された H、S、L の値を標準的な変換手順に従って処理し、そのまま使用できる R、G、B の値を生成します。結果は CSS の rgb() 関数や画像編集ソフト、その他の色を扱うツールで利用できます。

HSL から RGB への変換は、デザインシステムで HSL によって定義されたブランドカラーを、RGB や HEX の入力を想定する外部ツール(古い画像編集ソフトや印刷用ソフトウェアなど)に渡す必要がある開発者にとって特に役立ちます。