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

色相(H)の値は色がカラーホイール上のどこに位置するかを示し、彩度(S)は色がどれだけ鮮やかか、あるいはくすんでいるかを示し、明度(L)は色が黒または白にどれだけ近いかを示します。これら3つの値は、CSS で hsl(H, S%, L%) の形式でそのまま使用できます。

まず R、G、B を0~1の範囲にスケーリングします。明度(L)は最も高いチャンネルと最も低いチャンネルの平均値です。彩度(S)はチャンネル間の差を明度に対して相対化した値で、色相(H)はどのチャンネルが最も高いかに基づいて0~360度の範囲で計算されます。

• R、G、B の値を255で割り、0~1の範囲にスケーリングします。
• スケーリングされた値の中から最大値(max)と最小値(min)を求めます。
• 明度(L)は最大値と最小値の平均として計算されます。
• 彩度(S)は最大値と最小値の差を明度に対して正規化して求めます。
• 色相(H)はどのチャンネル(R、G、B)が最も大きいかに基づいて0~360度の範囲で計算されます。

R=52, G=152, B=219(鮮やかな青)は、およそ H=204度, S=70%, L=53% に相当します。

• R、G、B は 0 から 255 までの整数で入力してください。この範囲外の値は有効な色になりません。
• 色相(H)は0~360度のカラーホイール上の位置を表します。0は赤、120は緑、240は青です。
• 彩度と明度はパーセントで表されます。彩度0%はグレーの色調を、明度100%は白を意味します。

RGB(赤・緑・青)モデルは、画面が光を発して色を作り出す仕組みをそのまま反映しています。各チャンネルは0~255の強度値を取り、3つのチャンネルを組み合わせることで数百万もの異なる色が生まれます。しかし、色を「もっと明るく」あるいは「もっと鮮やかに」したいときには、3つのチャンネルを同時に調整する必要があるため、このモデルは直感的ではありません。

一方、HSL(色相・彩度・明度)モデルは、人間の目が色を知覚する方法に沿って色を記述します。色相はその色が何であるか(赤、緑、紫)を、彩度はどれだけ鮮やかかを、明度はどれだけ明るいか暗いかを示します。そのため、デザイナーや開発者がカラーパレットを作成する際には HSL を好んで使うことが多くあります。

このツールは、入力された RGB を0~1の範囲にスケーリングし、最も高いチャンネル値と最も低いチャンネル値を求めて明度と彩度を計算します。次に、どのチャンネルが優勢かを判断し、カラーホイール上での色相の正確な位置を求めます。

HSL 形式の最大の利点は、CSS で hsl(色相, 彩度%, 明度%) の形式でそのまま使用できることです。たとえば、ブランドのメインカラーの暗いバリエーションを作りたい場合、明度の値を下げるだけで済みます。RGB では3つのチャンネルをそれぞれ再計算する必要があります。

このような色変換は、ウェブデザイン、ロゴ制作、データの可視化、UI テーマシステムなどで頻繁に使われます。RGB から HSL への変換は、ライト/ダークテーマのバリエーションや一貫したカラーパレットを構築したい開発者にとって実用的な出発点です。