RGB HSL 変換の使い方
- 変換の向き（RGB→HSL／HSL→RGB）を選びます。
- RGB→HSLでは各色0〜255、HSL→RGBでは色相0〜360・彩度0〜100%・明度0〜100%を入力します。
- 入力するとすぐに変換結果が表示されます。
RGB HSL 変換の見方
HSLでは、色相（H）は色の種類を0〜360度の角度で表します（0 = 赤、120 = 緑、240 = 青）。彩度（S）は鮮やかさ、明度（L）は明るさで、ともに%です。RGBの最大値と最小値から明度と彩度を求め、どの色が最大かで色相を計算します。たとえば純粋な赤 RGB(255, 0, 0) は、HSL(0, 100%, 50%) です。
| RGB | HSL | 備考 |
|---|---|---|
| 255, 0, 0 | H0 S100% L50% | 赤 |
| 0, 0, 255 | H240 S100% L50% | 青 |
| 128, 128, 128 | H0 S0% L50.2% | グレー（彩度0） |
| 35, 64, 122 | H220 S55.41% L30.78% | 紺色の例 |
HEX表記との変換はRGB HEX 変換でできます。
RGB HSL 変換のポイント
CSSでは hsl() 関数でHSL指定ができます。ボタンのホバー色を「明度を10%上げる」のように規則的に作れるため、デザインシステムではHSL（やHSLをもとにした設計）が重宝されます。色相環で反対側（±180度）の色は補色で、アクセント色の候補になります。
よくある質問
HSLはどんなときに便利ですか？
「同じ色合いで、少し明るく／薄く」という調整が直感的にできます。色相（H）を固定して明度（L）だけを変えれば、同系色のグラデーションが簡単に作れます。
変換でRGBの値が1ずれることがあります
HSLは小数を含むため、RGBに戻すときに四捨五入で±1ずれることがあります。色の見た目には影響しない範囲です。
関連する計算ツール
カテゴリ：デジタル・科学の計算ツール一覧