ホーム / カラーコード変換
カラーコード変換（HEX ⇄ RGB ⇄ HSL）
色コードを相互に変換できます。どれか1つを入力すると、他の形式が自動で更新されます。処理はすべてブラウザ内で行われ、データは送信されません。
ピッカーで選ぶ
透明度 α
1.00
使い方
HEX・RGB・HSL のどれか、またはカラーピッカーで色を指定すると、残りの形式が自動で計算されます。透明度（α）はスライダーで調整でき、HEXA・RGBA として書き出せます。各行の「コピー」ボタンでコードをそのまま貼り付けできます。
- HEX：
#RRGGBB形式。#RGBの短縮表記も入力できます。 - RGB：
rgb(r, g, b)（各0〜255）。数字だけ「55,166,255」でも読み取ります。 - HSL：
hsl(h, s%, l%)（色相0〜360・彩度・明度）。
※ すべての計算はあなたのブラウザの中だけで行われます。データが外部に送信されることはありません。
HEX・RGB・HSL の使い分け
- HEX（16進数）：
#37A6FFのように赤・緑・青を2桁ずつ並べた表記。CSSやデザインツールで最も一般的で、コピペに向きます。 - RGB：
rgb(55, 166, 255)のように各色0〜255で指定。プログラムで色を計算・合成するときに扱いやすい形式です。 - HSL：
hsl(207, 100%, 61%)のように「色相・彩度・明度」で指定。色味を保ったまま明るさだけ変えるといった調整が直感的で、配色づくりに向きます。
RGB⇔HSL 変換の考え方
RGBとHSLは同じ色を別の座標で表しているだけなので、相互に変換しても色は変わりません。たとえば「少し暗くしたい」ときは、HSLに変換して明度（L）を下げ、再びHEX/RGBに戻すと狙いどおりの色が作れます。このツールはどれか1つを編集すると残りの形式が即座に再計算されるので、HSL→RGB・RGB→HSL のどちら向きでもワンステップで確認できます。
透明度（アルファ／RGBA・HEXA）
αスライダーで不透明度を指定すると、rgba(55, 166, 255, 0.5) や8桁の #37A6FF80（HEXA）として書き出せます。半透明のオーバーレイや影の色を作るときに便利です。
よくある質問
HEXの短縮形（#fff）も使えますか？
はい。#fff のような3桁表記も、#ffffff に展開して扱います。
透明度（アルファ）は変換できますか？
はい。スライダーでαを指定すると、HEXA（8桁）・RGBA として出力します。
RGBとHSLはどう違いますか？
どちらも同じ色を表しますが、RGBは赤緑青の光の量、HSLは色相・彩度・明度で指定します。色味を保って明るさだけ変えたいときはHSLが便利です。
色を少しだけ暗く／明るくするには？
HSLに変換して明度（L）の数値を下げる（暗く）／上げる（明るく）と、色味を保ったまま調整できます。変更後のHEX・RGBもその場で再計算されます。
データはどこかに送られますか？
いいえ。変換はすべてブラウザ内で完結し、色コードが外部に送信されることはありません。
無料で使えますか？
はい、無料・登録不要です。