HEX → RGB 変換ツール

HEXとRGBの変換について

Web制作やアプリケーション開発では、色を指定するために「HEX（16進数）」や「RGB」などのカラーフォーマットが使用されます。 当ツールでは、HEXカラーコードとRGB値を相互に変換し、変換結果を確認しながら色を扱うことができます。

HEXとRGBは表記方法が異なりますが、どちらもRed（赤）、Green（緑）、Blue（青）の3つの成分によって色を表現する方式です。 そのため、同じ色をHEXとRGBの異なる形式で指定することができます。

HEXとRGBの違い

HEXは、WebサイトのCSSなどでよく使用される「#RRGGBB」という形式で色を表します。 一方、RGBは「rgb(R, G, B)」という形式で、赤・緑・青の各成分を0〜255の10進数で指定します。

例えば、赤色は次のように表現できます。

• HEX：#FF0000
• RGB：rgb(255, 0, 0)

この2つは表記方法が異なりますが、どちらも同じ赤色を表しています。

なぜHEXからRGBへ変換するのですか？

HEXはCSSで色を指定するときなどに扱いやすい形式ですが、プログラムでRGB各成分の値を個別に処理したい場合には、RGB形式のほうが分かりやすいことがあります。

例えば、JavaScriptなどで赤・緑・青それぞれの値を取得して色を計算したり、明るさを調整したりする場合には、RGBの数値を利用できます。

逆に、プログラムや画像編集ソフトなどから取得したRGB値をCSSのカラーコードとして利用したい場合には、RGBからHEXへの変換が便利です。

HEX（16進数カラーコード）の仕組み

一般的な6桁のHEXカラーコードは「#RRGGBB」という形式で表されます。 「RR」が赤、「GG」が緑、「BB」が青の成分を表し、それぞれ00〜FFの範囲で指定します。

16進数では、0〜9の数字に加えてA〜Fのアルファベットを使用します。 例えば、10進数の255は16進数では「FF」と表されます。

そのため、次のように対応します。

3桁のHEXカラーコードとは？

HEXには、6桁の「#RRGGBB」だけでなく、3桁の短縮形式「#RGB」もあります。 3桁形式では各桁を2回繰り返して6桁に展開します。

例えば「#F00」は「#FF0000」と同じ色を表します。

• #F00 → #FF0000
• #0F0 → #00FF00
• #00F → #0000FF

RGB（光の三原色）の仕組み

RGBは、Red（赤）、Green（緑）、Blue（青）の3つの成分を組み合わせて色を表現します。 一般的な8ビットRGBでは、それぞれの値を0〜255の範囲で指定します。

例えば、次のようになります。

• rgb(255, 0, 0) → 赤
• rgb(0, 255, 0) → 緑
• rgb(0, 0, 255) → 青
• rgb(255, 255, 255) → 白
• rgb(0, 0, 0) → 黒

3つの値を組み合わせることで、さまざまな色を表現できます。

HEXからRGBへの変換方法

HEXからRGBへ変換する場合は、HEXカラーコードを赤・緑・青の3つの成分に分け、それぞれを16進数から10進数へ変換します。

例えば「#3366CC」の場合は、次のように分けられます。

• 赤：33 → 51
• 緑：66 → 102
• 青：CC → 204

したがって、「#3366CC」は rgb(51, 102, 204) と表現できます。 手計算でも変換できますが、複数のカラーコードを扱う場合は変換ツールを利用すると便利です。

よくある質問（FAQ）

関連ツール

• RGB → HEX 変換ツール ─ 10進数から16進数へ逆変換
• カラーピッカー ─ 視覚的に最適な色を選択
• 画像比較メジャー＆分度器 ─ 画像上の長さや角度を測定
• 画像比較 ─ 2枚の画像を並べて微差を確認
• カラーコード一覧（HEX） ─ 定番色を一覧から探す