カラーコード→RGB変換ツールの使い方
- 16進数カラーコードの欄にカラーコードを入力するか、貼り付けます（
#はあってもなくても構いません）。色見本をクリックして色を選ぶこともできます。 - 結果を
rgb()形式で確認します。スライダーには赤・緑・青の値が表示され、HSL・HSV・CMYKもあわせて表示されます。 - どの形式もワンクリックでコピーできます。形式の横にある計算式で、16進数の2桁が0～255の数値になる過程を確認できます。
カラーコードからRGBへの変換式
16進数カラーコードは、3バイトを16進数で書いたもの（#RRGGBB）です。2桁ずつが1つのチャンネルを表し、値は00（0）からFF（255）までです。2桁を変換するには、1桁目に16を掛けて2桁目を足します（A = 10、B = 11、C = 12、D = 13、E = 14、F = 15）。#7C3AEDの例：
- 赤：
7C= 7 × 16 + 12 = 124 - 緑：
3A= 3 × 16 + 10 = 58 - 青：
ED= 14 × 16 + 13 = 237
つまり#7C3AED = rgb(124, 58, 237)です。
省略形と透明度付きのカラーコード
3桁のコードは各桁を2つ重ねた省略形で、#F80 = #FF8800 = rgb(255, 136, 0)です。8桁のコードには不透明度を表すアルファ値の1バイトが加わります。#7C3AED80の最後の2桁80 = 128で、128 ÷ 255 ≈ 0.5なので、rgba(124, 58, 237, 0.5)と同じ色になります。4桁の#RGBA形式も同じ仕組みです。
よく使うカラーコードとRGB値の一覧
| 色 | カラーコード | RGB |
|---|---|---|
| 白 | #FFFFFF | rgb(255, 255, 255) |
| 黒 | #000000 | rgb(0, 0, 0) |
| 赤 | #FF0000 | rgb(255, 0, 0) |
| ライム | #00FF00 | rgb(0, 255, 0) |
| 青 | #0000FF | rgb(0, 0, 255) |
| 黄 | #FFFF00 | rgb(255, 255, 0) |
| オレンジ | #FFA500 | rgb(255, 165, 0) |
| グレー | #808080 | rgb(128, 128, 128) |
| ネイビー | #000080 | rgb(0, 0, 128) |
| パープル | #800080 | rgb(128, 0, 128) |
| ティール | #008080 | rgb(0, 128, 128) |
よくある質問
カラーコードを手計算でRGBに変換するには？
コードを2桁ずつ3つに分け、それぞれを16進数から変換します（1桁目 × 16 + 2桁目）。#1E90FFなら1E = 30、90 = 144、FF = 255なので、色はrgb(30, 144, 255)です。
#F80のような3桁のカラーコードは何を意味しますか？
各桁を2つ重ねた6桁コードの省略形です：#F80 = #FF8800 = rgb(255, 136, 0)。省略できるのは、3つのペアがすべて同じ数字2つでできている色だけです。
JavaScriptやPythonでカラーコードをRGBに変換するには？
JavaScriptでは、#RRGGBB形式のコードに対して[1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16))を使います。Pythonではtuple(int(h[i:i + 2], 16) for i in (1, 3, 5))です。CSSではどちらの表記も使えるので、変換は不要です。
CSSではHEXとRGBのどちらがよいですか？
どちらもまったく同じ色を表せます。HEXは短く、デザインツールでよく使われます。rgb()は読みやすく調整しやすいうえ、rgba()なら透明度がひと目でわかります。最近のブラウザは、アルファ値付きの8桁のHEXコードにも対応しています。