// RGB ⇔ HSL CONVERTER
RGB⇔HSL変換
RGBとHSLをリアルタイム相互変換。スライダーで直感操作、CSS用コードをワンクリックコピー。
プレビュー
RGB → HSL
HSL → RGB
RGB⇔HSL変換ツールとは？
このツールは、RGB（赤・緑・青）とHSL（色相・彩度・明度）のカラーコードを相互変換できる無料のオンラインツールです。スライダーを動かすか数値を直接入力すると、もう一方の値がリアルタイムに更新されます。CSSの配色調整やデザイン検討にそのまま使えます。
無料
RGB→HSL
HSL→RGB
スライダー操作
CSSコピー
インストール不要
RGBとHSLの違い・変換の考え方
RGBもHSLも同じ色を別の方法で表しているだけで、計算で相互に変換できます。
- RGB：赤(R)・緑(G)・青(B)の光の三原色を 0〜255 で混ぜる表記（例：rgb(255, 0, 0)＝赤）。ディスプレイの発色に忠実です。
- HSL：色相(H:0〜360°)・彩度(S:%)・明度(L:%)で表す表記（例：hsl(0, 100%, 50%)＝赤）。人が「もう少し明るく／鮮やかに」と直感的に調整しやすいのが特長です。
使い分けのヒント
デザインの微調整はHSLが便利です。色相(H)を固定したまま明度(L)を上下させるだけで、同系色の濃淡（シェード）を簡単に作れます。決定した色をCSSに書き込む際はRGBやHEXに変換して使うとよいでしょう。
RGB⇔HSL 変換早見表（基本色）
| 色 | RGB | HSL | HEX |
|---|---|---|---|
| 赤 | rgb(255,0,0) | hsl(0,100%,50%) | #FF0000 |
| 橙 | rgb(255,127,0) | hsl(30,100%,50%) | #FF7F00 |
| 黄 | rgb(255,255,0) | hsl(60,100%,50%) | #FFFF00 |
| 緑 | rgb(0,255,0) | hsl(120,100%,50%) | #00FF00 |
| シアン | rgb(0,255,255) | hsl(180,100%,50%) | #00FFFF |
| 青 | rgb(0,0,255) | hsl(240,100%,50%) | #0000FF |
| マゼンタ | rgb(255,0,255) | hsl(300,100%,50%) | #FF00FF |
| 黒 | rgb(0,0,0) | hsl(0,0%,0%) | #000000 |
| 灰 | rgb(128,128,128) | hsl(0,0%,50%) | #808080 |
| 白 | rgb(255,255,255) | hsl(0,0%,100%) | #FFFFFF |
よくある質問
Q.RGBをHSLに変換するには？
上のRGB欄でR・G・Bを0〜255で入力（またはスライダー操作）すると、HSL欄に色相・彩度・明度が自動計算されます。例：rgb(255,0,0) → hsl(0,100%,50%)。
Q.HSLをRGBに変換するには？
HSL欄でH（0〜360）・S（0〜100）・L（0〜100）を入力すると、RGB欄に赤・緑・青の値が自動計算されます。例：hsl(120,100%,50%) → rgb(0,255,0)。
Q.RGBとHSLの違いは？
RGBは光の三原色を0〜255で混ぜる表記、HSLは色相・彩度・明度で表す表記です。同じ色を別の方法で表しているだけで相互変換できます。HSLは配色の微調整に向いています。
Q.入力した色のデータは送信されますか？
いいえ。すべての変換はブラウザ上で完結し、データはサーバーに送信されません。