HEX → RGB 変換ツール
HEX の値を入力すると RGB がすぐに表示されます。計算はすべてブラウザ内で行われ、入力値がサーバーに送られることはありません。
計算方法
HEX は赤・緑・青を 16 進数 2 桁ずつ並べた値です。#RRGGBB を 2 桁ずつ区切り、それぞれ 10 進数に直すと RGB になります。FF は 255、63 は 99 です。
HEX
HEX は RGB とまったく同じ赤・緑・青の三つ組を 16 進数で書いたものです。1 チャンネルが 2 文字に収まるため短く曖昧さがなく、CSS・デザインツール・設定ファイルのどこでも使われます。大文字小文字は問わず、#abc は #aabbcc の省略形です。8 桁で書くと最後の 2 桁が不透明度になり、#FF000080 は半透明の赤になります。
RGB
RGB は画面が色を作る仕組みそのものです。三つの光を足し合わせ、それぞれ 0〜255 で表します。すべて 0 なら黒、すべて 255 なら白です。ハードウェアと同じ構造なので正確で損失がありませんが、人間には扱いにくい形式です。「もう少し暖かく」したいだけでも二つ三つの数値を同時に動かす必要があり、どちらへ動かすべきかが見えません。
HEX → RGB の計算手順
#FF6347 を例に実際の計算をたどります。数値はこのページの変換ツールと同じエンジンで求めています。
-
2 桁ずつ区切る
#FF6347 → FF · 63 · 47 -
16 進数を 10 進数へ
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
結果
rgb(255, 99, 71)
HEX → RGB 変換例
| Color | HEX | RGB |
|---|---|---|
| Red | #FF0000 |
rgb(255, 0, 0) |
| Tomato | #FF6347 |
rgb(255, 99, 71) |
| Orange | #FFA500 |
rgb(255, 165, 0) |
| Gold | #FFD700 |
rgb(255, 215, 0) |
| Limegreen | #32CD32 |
rgb(50, 205, 50) |
| Teal | #008080 |
rgb(0, 128, 128) |
| Dodgerblue | #1E90FF |
rgb(30, 144, 255) |
| Royalblue | #4169E1 |
rgb(65, 105, 225) |
| Blueviolet | #8A2BE2 |
rgb(138, 43, 226) |
| Hotpink | #FF69B4 |
rgb(255, 105, 180) |
よくある質問
HEX を RGB に変換すると値は失われますか？
いいえ。同じ数値を基数だけ変えて書いたものなので、往復しても完全に同じ値になります。HEX 一つは RGB 一つに正確に対応します。
3 桁の HEX は何を意味しますか？
各桁を二度書いたのと同じです。#f80 は #ff8800 になります。1,670 万色のうち 4,096 色しか表せないので、値がきりのよいときの省略記法であって圧縮ではありません。
HEX が 8 桁になっているのはなぜですか？
最後の 2 桁が不透明度です。00 が完全な透明、FF が不透明です。古いブラウザはこの部分を無視するので、広い互換性が必要なら不透明の値も併記してください。