RGB → HSL 変換ツール
RGB の値を入力すると HSL がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
3 チャンネルを 0〜1 に正規化して最大値と最小値を求めます。明度は（最大＋最小）÷2、彩度はその差を明度で補正した値、色相はどのチャンネルが最大かで決まります。
RGB
RGB は画面が色を作る仕組みそのものです。三つの光を足し合わせ、それぞれ 0〜255 で表します。すべて 0 なら黒、すべて 255 なら白です。ハードウェアと同じ構造なので正確で損失がありませんが、人間には扱いにくい形式です。「もう少し暖かく」したいだけでも二つ三つの数値を同時に動かす必要があり、どちらへ動かすべきかが見えません。
HSL
HSL は同じ色を人が操作しやすい軸に置き直したものです。色相は 0〜360° の角度、彩度と明度は百分率です。同じ色の明るい版が欲しければ明度だけ上げて他はそのままにできます。ただしここでの明度は計算上の値であって、目が感じる明るさではありません。明度 50% の黄色は明度 50% の青よりずっと明るく見えます。
RGB → HSL の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
各チャンネルを 0〜1 に正規化
R 1 G 0.388 B 0.278 -
最大・最小チャンネル
max 1 min 0.278 max−min 0.722 -
明度
L = (max+min)/2 = 0.639 = 63.9% -
彩度
S = (max−min)/(1−|2L−1|) = 100% -
色相角
H = 9.1° -
結果
hsl(9, 100%, 64%)
RGB → HSL 変換例
| Color | RGB | HSL |
|---|---|---|
| Red | rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
| Tomato | rgb(255, 99, 71) |
hsl(9, 100%, 64%) |
| Orange | rgb(255, 165, 0) |
hsl(39, 100%, 50%) |
| Gold | rgb(255, 215, 0) |
hsl(51, 100%, 50%) |
| Limegreen | rgb(50, 205, 50) |
hsl(120, 61%, 50%) |
| Teal | rgb(0, 128, 128) |
hsl(180, 100%, 25%) |
| Dodgerblue | rgb(30, 144, 255) |
hsl(210, 100%, 56%) |
| Royalblue | rgb(65, 105, 225) |
hsl(225, 73%, 57%) |
| Blueviolet | rgb(138, 43, 226) |
hsl(271, 76%, 53%) |
| Hotpink | rgb(255, 105, 180) |
hsl(330, 100%, 71%) |
よくある質問
色相角はどのチャンネルが決めますか？
最も大きいチャンネルです。赤が最大なら 0° 付近、緑なら 120° 付近、青なら 240° 付近から始まり、残る二つのチャンネルがそこから角度を引き寄せます。
淡く見える色なのに彩度が 100% になります。
HSL の彩度は絶対値ではなく明度を基準に相対的に測ります。とても明るい色でもその明るさの中では最大に鮮やかでありうるため、パステル調が 100% になることはよくあります。
トーンの段階を作るのにこの変換を使ってよいですか？
使えますが OKLCH のほうが適しています。HSL の明度を等間隔で刻むと色相ごとに間隔が不均一に見えますが、OKLCH の明度なら等間隔が実際にも均等に見えます。