RGB HEX 変換

RGBとHEXは同じ色の別表記

RGBは赤（R）、緑（G）、青（B）の3チャンネルで画面の色を表します。たとえば rgb(30, 144, 255) は、赤30・緑144・青255の組み合わせです。HEXの #1E90FF は、同じ3つの値を16進数で並べた表記です。色そのものを別の色空間へ変えるのではなく、数値の書き方を相互に置き換えます。

このページではRGB欄とHEX欄のどちらからでも入力でき、もう一方の値と色見本を確認できます。RGBから作るHEXは6桁で表示されます。CSS Color ModuleではRGBの各チャンネルを16進数の2桁ずつで記す表記が定義されています。W3C CSS Color Module Level 4（2026年10月1日確認）。

3つのチャンネルを2桁ずつ置き換える

RGBの各整数を個別に16進数へ直し、R・G・Bの順に連結するとHEXになります。16進数は0〜9の数字とA〜Fの文字を使い、Aは10、Fは15を表します。各チャンネルを2桁にそろえるため、1桁になった値の左には0を付けます。

例としてRGBの30は16進数で1E、144は90、255はFFです。順番を変えずに並べると #1E90FF になります。逆向きではHEXをRR・GG・BBの2桁に分け、それぞれを10進数へ戻します。たとえば #808080 の各チャンネル 80 は10進数の128なので、結果は rgb(128, 128, 128) です。

入力して色とコードを照合する

1. 手元の表記を選ぶ

   RGBが分かる場合は 30, 144, 255 または rgb(30, 144, 255) の形でRGB欄へ入力します。HEXが分かる場合はHEX欄に #1E90FF のようなコードを入力します。

2. 変換結果を確認する

   入力が色として読み取られると、反対側の欄と色見本が更新されます。変換後のHEXは大文字6桁で表示されます。入力値と色見本の両方を見て、チャンネルの順序や桁を確かめてください。

3. 必要な表記をコピーする

   使いたい値の横にあるコピー操作でRGBまたはHEXを取得します。別の色を試すときは入力を上書きするか、「クリア」で両方を空にしてから入力し直します。

変換を手計算で確かめる例

RGBからHEX：RGB欄に 12, 34, 56 と入力します。12は16進数の0C、34は22、56は38です。各値を2桁でつなぐため、HEX欄には #0C2238 と表示されます。

HEXからRGB：HEX欄に #FF8000 と入力します。FFは255、80は128、00は0なので、RGB欄は rgb(255, 128, 0) になります。値が違って見える場合は、赤・緑・青の順を保ったまま各ペアを読み直してください。

入力形式と表示について

変換結果を使う前の確認

• RGB欄には赤・緑・青の順で値を入力してください。通常の8ビットRGBでは各チャンネルを0〜255の整数として扱います。範囲外の値や小数を使った結果は、受け取り側の処理や丸め方によって一致しない可能性があります。
• RGB欄から生成されるHEXは不透明な6桁の色コードです。透明度を含む元データをこの形式へ移すと透明度は表せません。透明度が必要な制作物では、変換後の6桁コードだけで置き換えないでください。
• 入力を編集中や形式が不正な間、もう一方の欄に直前の有効値が残ることがあります。コピーする前に、現在の入力、変換結果、色見本の3つが対応しているか確かめてください。
• 色見本の見え方はディスプレイや表示環境に左右されます。数値変換は印刷物や塗料の色合わせ、色差測定、文字と背景のコントラスト判定を行うものではありません。