RGB→カラーコード変換ツールの使い方
- スライダーまたは数値欄で赤・緑・青の値（0～255）を入力するか、CSSの
rgb()値を貼り付けます。 - カラーコードが、HSL・HSV・CMYKとあわせてすぐに表示されます。アルファを1未満にすると、透明度を含む8桁のカラーコードになります。
- カラーコードをコピーします。計算式を見れば、各値がどのように変換されたかを確認できます。
RGBを16進数に変換する計算式
0～255のRGBの各チャンネルは、ちょうど2桁の16進数になります。値を16で割り、商を1桁目、余りを2桁目とし、10～15はA～Fと書きます。rgb(124, 58, 237)の例：
- 赤：124 ÷ 16 = 7 余り12 →
7C - 緑：58 ÷ 16 = 3 余り10 →
3A - 青：237 ÷ 16 = 14 余り13 →
ED
#の後ろにつなげると#7C3AEDになります。各チャンネルは必ず2桁で書きます。9は9ではなく09です。
プログラムでRGBを16進数に変換する
- JavaScript：
'#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('') - Python：
'#{:02X}{:02X}{:02X}'.format(r, g, b) - ExcelとGoogleスプレッドシート：
="#"&DEC2HEX(R,2)&DEC2HEX(G,2)&DEC2HEX(B,2) - CSS：変換は不要です。
rgb()とカラーコードはどちらも同じように使えます。
透明度（アルファ値）を加える
8桁のコードにするには、不透明度（0～1）に255を掛けて四捨五入し、16進数2桁として末尾に加えます。0.5 × 255 = 127.5 → 128 → 80なので、rgba(124, 58, 237, 0.5) = #7C3AED80です。
| 不透明度 | 16進数 | 不透明度 | 16進数 |
|---|---|---|---|
| 100% | FF | 50% | 80 |
| 90% | E6 | 40% | 66 |
| 80% | CC | 30% | 4D |
| 75% | BF | 25% | 40 |
| 70% | B3 | 20% | 33 |
| 60% | 99 | 10% | 1A |
よくある質問
RGBを16進数に変換する計算式は？
各チャンネルについて、値を16で割った商（整数）が16進数の1桁目、余りが2桁目になり、10～15はA～Fと書きます。3つのペアを#の後ろにつなげます：rgb(255, 165, 0) → FF、A5、00 → #FFA500。
各チャンネルを必ず2桁にするのはなぜですか？
カラーコードは決まった2桁ずつのペアで読み取られるからです。rgb(0, 128, 9)は#008009と書く必要があります。先頭の0を省くとペアの区切りがずれて、別の色や無効なコードになってしまいます。
カラーコードで透明度も指定できますか？
はい。最近のブラウザは8桁のコード#RRGGBBAAに対応しており、最後のペアが00（完全に透明）からFF（不透明）までのアルファ値を表します。rgba(124, 58, 237, 0.5)は#7C3AED80になります。
RGBから16進数への変換は正確ですか？
RGBが整数値であれば正確です。0～255のどの数値にも2桁の16進数表記がちょうど1つずつあるため、逆変換しても同じ値に戻ります。丸められるのは、256段階のうち最も近い値に合わせるアルファ値だけです。