カラーコード変換（HEX ⇔ RGB ⇔ HSL）
カラーコードを HEX・RGB・HSL で相互変換します。hex→rgb / rgb→hex はもちろん、カラーピッカーや透明度（rgba）にも対応。各欄はクリックでコピーでき、CSSにそのまま貼れます。
100%
白文字
黒文字
パレットから選ぶ（クリックで読み込み）
よく使う色をクリックすると、上のツールにHEX・RGB・HSLが入ります。
使い方
- HEX → RGB に変換
- HEX欄に「#2b7de9」のように入力すると、RGB・HSL・プレビューが更新されます。「#fff」のような3桁表記もOK。
- RGB → HEX に変換
- RGB欄に「43,125,233」または「rgb(43,125,233)」と入力すると、HEXとHSLが更新されます。
- HSL を使う
- HSL欄に「214,80%,54%」のように入力しても変換できます。色相・彩度・明度で微調整したいときに便利です。
- 透明度（rgba）
- スライダーを動かすと、
rgba()と8桁HEX（#RRGGBBAA）が下に表示されます。
HEXとRGBの違い
同じ色でも、表記の方法がいくつかあります。用途に合わせて使い分けます。
- HEX（16進数）：
#RRGGBBの形式。HTML/CSSで最もよく使われます（例：#2b7de9）。 - RGB（10進数）：赤・緑・青をそれぞれ0〜255で表します（例：
rgb(43, 125, 233)）。透明度つきのrgba()もあります。 - HSL：色相(Hue)・彩度(Saturation)・明度(Lightness)で表します（例：
hsl(214, 80%, 54%)）。「少し明るく」「彩度を下げる」といった調整が直感的です。
変換のしくみ（手計算の方法）
HEXは2桁ずつ赤・緑・青を表します。各2桁の16進数を10進数に直すとRGBになります。
- HEX → RGB：
#2b7de9→2b=43、7d=125、e9=233 →rgb(43,125,233)。
計算例：7d= 7×16 + 13(=d) = 125。 - RGB → HEX：各値を16進数2桁にして並べます。43→
2b、125→7d、233→e9→#2b7de9。
よく使う色のカラーコード一覧
よくある質問
- 3桁の短縮HEX（#fffなど）も変換できますか？
- はい。3桁表記は自動で6桁に展開して変換します。
- 手計算でHEXをRGBに変換するには？
- 2桁ずつ区切り、各16進数を10進数に直します。例：
e9= 14(=e)×16 + 9 = 233。 - 入力した色はどこかに送信されますか？
- いいえ。すべてブラウザ内で処理され、外部に送信されません。安心してお使いください。
関連ツール：配色・カラーパレット作成 ／ コラムを読む ／ ツール一覧へ