RGB → HEX 変換ツール
RGB の値を入力すると HEX がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
RGB の各チャンネル（0〜255）を 16 進数 2 桁に変換して連結します。1 桁になる場合は先頭に 0 を補います。255 は FF、9 は 09 です。
RGB
RGB は画面が色を作る仕組みそのものです。三つの光を足し合わせ、それぞれ 0〜255 で表します。すべて 0 なら黒、すべて 255 なら白です。ハードウェアと同じ構造なので正確で損失がありませんが、人間には扱いにくい形式です。「もう少し暖かく」したいだけでも二つ三つの数値を同時に動かす必要があり、どちらへ動かすべきかが見えません。
HEX
HEX は RGB とまったく同じ赤・緑・青の三つ組を 16 進数で書いたものです。1 チャンネルが 2 文字に収まるため短く曖昧さがなく、CSS・デザインツール・設定ファイルのどこでも使われます。大文字小文字は問わず、#abc は #aabbcc の省略形です。8 桁で書くと最後の 2 桁が不透明度になり、#FF000080 は半透明の赤になります。
RGB → HEX の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
10 進数を 16 進数へ
R 255 = 15×16 + 15 → FF G 99 = 6×16 + 3 → 63 B 71 = 4×16 + 7 → 47 -
つなげる
# + FF + 63 + 47 = #FF6347
RGB → HEX 変換例
| Color | RGB | HEX |
|---|---|---|
| Red | rgb(255, 0, 0) |
#FF0000 |
| Tomato | rgb(255, 99, 71) |
#FF6347 |
| Orange | rgb(255, 165, 0) |
#FFA500 |
| Gold | rgb(255, 215, 0) |
#FFD700 |
| Limegreen | rgb(50, 205, 50) |
#32CD32 |
| Teal | rgb(0, 128, 128) |
#008080 |
| Dodgerblue | rgb(30, 144, 255) |
#1E90FF |
| Royalblue | rgb(65, 105, 225) |
#4169E1 |
| Blueviolet | rgb(138, 43, 226) |
#8A2BE2 |
| Hotpink | rgb(255, 105, 180) |
#FF69B4 |
よくある質問
1 桁の値の前に 0 を付けるのはなぜですか？
1 チャンネルがきっかり 2 文字を占めないと文字列が曖昧になるためです。赤 9 は 09 です。9 と書くと後ろの桁がすべてずれ、まったく別の色になります。
RGB に小数がある場合はどうなりますか？
まず最も近い整数に丸められます。HEX には小数を保存する方法がないためです。rgb(127.6 0 0) は #800000 になり、戻すと 127.6 ではなく 128 になります。
英字は大文字と小文字のどちらで書くべきですか？
どちらでも構いません。ブラウザもツールも同じ色として読みます。ただし一方に統一しておくとバージョン管理の差分が読みやすくなります。