カラーコード変換（HEX/RGB/HSL）
HEX・RGB・HSL形式のカラーコードをリアルタイムで相互変換します。いずれかの欄に値を入力するか、カラーピッカーで色を選ぶと他の形式に自動で反映されます。ブラウザ内で処理され、入力内容がサーバーに送信されることはありません。色の組み合わせの見やすさを確かめたい場合は 色のコントラスト比チェッカー（WCAG） もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
注意事項
- RGB・HSLは「rgb(255, 0, 0)」「hsl(0, 100%, 50%)」のような形式のほか、「255, 0, 0」のようにカンマ区切りの数値だけでも入力できます。
- 入力した値が形式として不正な場合、他の欄への反映は行われずエラーメッセージを表示します。
- 透明度（アルファ値）には対応していません。rgba()・hsla()形式を入力した場合はアルファ値を無視して変換します。
用語解説
HEX（16進数カラーコード）
「#3b82f6」のように#と6桁（または3桁）の16進数で色を表す形式です。CSSやデザインツールで最も一般的に使われます。
RGB
赤(Red)・緑(Green)・青(Blue)の光の三原色を、それぞれ0〜255の数値で表す形式です。
HSL
色相(Hue・0〜360度)、彩度(Saturation・0〜100%)、明度(Lightness・0〜100%)で色を表す形式です。「同じ色味で明るさだけ変える」といった調整がしやすいのが特徴です。
よくある質問
HEX・RGB・HSLはそれぞれどんな場面で使いますか？
HEXはCSSやデザインツールで最も一般的な表記です。RGBはプログラムでの色指定、HSLは色相・彩度・明度で調整するため、同系色で明るさだけ変えたいときに便利です。
3桁のHEXコードにも対応していますか？
はい。「#f00」のような3桁の短縮形も入力できます。各桁を2回繰り返した6桁（#ff0000）として扱います。
変換した色はどのように使えますか？
変換結果のコードをそのままCSSやデザインツールに貼り付けて使えます。色の見やすさを確認したい場合は、コントラスト比チェッカーとあわせて使うと便利です。
このページをシェア