RGBをHEXに変換する仕組み
RGBとHEXは、どちらもコンピューター上で色を指定するときに使用される表記方法です。 RGBは赤（Red）、緑（Green）、青（Blue）の3つの数値で色を表し、 HEXはそれぞれの値を16進数に変換して1つのカラーコードとして表します。
このツールでは、RGBの数値を入力すると対応するHEXカラーコードに変換できます。 WebサイトのデザインやHTML・CSSのコーディングなどで、 RGBで指定された色をHEX形式に変換したい場合に利用できます。
RGBとは？
RGBは「Red（赤）」「Green（緑）」「Blue（青）」の3つの色成分を組み合わせて色を表す方式です。 各成分は0〜255の256段階で指定できます。
例えば、R・G・Bをすべて0にすると黒（0, 0, 0）、 すべて255にすると白（255, 255, 255）になります。 赤だけを最大にした場合は（255, 0, 0）となります。
| RGB | 色 |
|---|---|
| 0, 0, 0 | 黒 |
| 255, 255, 255 | 白 |
| 255, 0, 0 | 赤 |
| 0, 255, 0 | 緑 |
| 0, 0, 255 | 青 |
| 255, 255, 0 | 黄 |
HEX（16進数カラーコード）とは？
HEXカラーコードは、RGBの各成分を16進数で表したカラーコードです。 「#」の後に、赤・緑・青の順番でそれぞれ2桁ずつ記述します。
例えばRGBが（255, 0, 0）の場合、 255は16進数で「FF」、0は「00」なので、 HEXでは#FF0000と表します。
同様に、RGB（0, 0, 255）は#0000FF、 RGB（255, 255, 255）は#FFFFFFとなります。
RGBからHEXへの変換方法
RGBの各数値を、それぞれ16進数に変換します。 16進数では、0〜9の数字に加えてA〜Fの6つの文字を使用します。
例えばRGBのRが255の場合は、 255を16進数に変換すると「FF」になります。
- R = 255 → FF
- G = 128 → 80
- B = 0 → 00
したがって、RGB（255, 128, 0）は #FF8000と表せます。
RGBとHEXの対応例
| RGB | HEX | 色 |
|---|---|---|
| 0, 0, 0 | #000000 | 黒 |
| 255, 255, 255 | #FFFFFF | 白 |
| 255, 0, 0 | #FF0000 | 赤 |
| 0, 255, 0 | #00FF00 | 緑 |
| 0, 0, 255 | #0000FF | 青 |
| 255, 255, 0 | #FFFF00 | 黄 |
| 255, 128, 0 | #FF8000 | オレンジ |
HEXカラーコードをCSSで使う方法
HEXカラーコードは、HTMLやCSSで色を指定するときに利用できます。 例えば、文字色を赤にする場合は次のように記述します。
color: #FF0000;背景色を指定する場合も同じようにHEXカラーコードを使用できます。
background-color: #FF8000;
RGB形式で指定する場合は、CSSで
rgb(255, 128, 0)
のように記述できます。
RGBとHEXは表記方法が異なりますが、同じ色を表すことができます。
RGBとHEXはどちらを使えばよい？
どちらを使用するかは用途によって異なります。 HEXはカラーコードが短く、WebサイトのCSSなどで色を指定するときによく使われます。 一方、RGBは赤・緑・青それぞれの数値を直接確認できるため、 色の成分を数値として扱いたい場合に分かりやすい形式です。
CSSではHEX、RGB、HSLなど複数の色指定方法を利用できるため、 使用する環境や目的に合わせて形式を選択できます。
このツールの使い方
- RGB値を入力： R・G・Bそれぞれの欄に0〜255の数値を入力します。
- 色を確認： 入力したRGB値に応じて、プレビューの色が変化します。
- HEXを確認： 入力したRGB値に対応するHEXカラーコードが表示されます。
- カラーコードをコピー： コピーボタンを使用して、HEXカラーコードをCSSなどに貼り付けます。
よくある質問（FAQ）
A. はい。RGBとHEXは表記方法が異なりますが、 対応する値を正しく変換すれば同じ色を表すことができます。 例えばRGB（255, 0, 0）はHEXでは#FF0000です。
A. FFは16進数で255を表します。 HEXカラーコードでは、最初の2桁が赤、次の2桁が緑、最後の2桁が青の値に対応します。
A. RGBの各値は0〜255の範囲で指定します。 0がその色成分の最小値、255が最大値です。
A. このツールの変換処理をブラウザ上のJavaScriptだけで行っている場合、 RGB値をサーバーへ送信する必要はありません。 実際の処理方法については、ブラウザの開発者ツールなどで確認できます。
A. はい。対応しているスマートフォンやタブレットのブラウザから利用できます。 アプリをインストールする必要はありません。
関連ツール
- HEX → RGB 変換ツール : HEXからRGBへ逆変換
- カラーピッカー : 視覚的に色を選択・抽出
- 画像比較メジャー＆分度器 : 画像内の角度や距離を測定
- 画像比較 : 2枚の画像を並べて差異確認
- カラーコード一覧（HEX） : 定番の配色コードを網羅