RGBとHEXの変換方法｜相互変換の仕組みと計算方法を解説

Q: RGBとHEXは同じ色を表せますか？

はい。RGBとHEXは表記方法が異なるだけで、対応する値が同じであれば同じ色を表します。例えばRGB(255, 0, 0)と#FF0000はどちらも赤色です。

Q: HEXからRGBへ変換するにはどうすればいいですか？

6桁HEXの場合、カラーコードを2桁ずつRR、GG、BBに分け、それぞれを16進数から10進数へ変換します。

Q: 8桁HEXとは何ですか？

8桁HEXは#RRGGBBAAという形式で、最後の2桁がアルファ値（透明度）を表します。

Q: RGBとHEXはどちらを使えばいいですか？

どちらも利用できます。WebデザインではHEXがよく使われますが、画像処理やプログラミングなどではRGBが便利な場合があります。

Webサイトや画像編集、デザインなどでは、「RGB」と「HEX」という2種類のカラーコードがよく使われます。 RGBは赤・緑・青の3色を数値で表す方式で、HEXは16進数を使って色を表す方式です。

例えば、赤色はRGBでは RGB(255, 0, 0)、HEXでは #FF0000 と表現できます。表記方法は異なりますが、どちらも同じ色を表しています。

この記事では、HEXからRGBへ変換する方法と、RGBからHEXへ変換する方法を、具体例を使ってわかりやすく解説します。 16進数の仕組みや3桁・6桁・8桁HEX、CSSでの利用方法についても紹介します。

この記事でわかること

RGBとHEXの基本的な違い
HEXからRGBへ変換する方法
RGBからHEXへ変換する方法
16進数を10進数へ変換する仕組み
3桁・6桁・8桁HEXの違い
RGBとHEXを使い分ける方法
CSSでRGB・HEXを使う方法
変換ツールを使って簡単に変換する方法

RGBとHEXは変換できる

RGBとHEXは、どちらも色を表現するための方法なので、相互に変換することができます。

例えば赤色の場合、RGBでは RGB(255, 0, 0)、HEXでは #FF0000 と表します。

表現方法	赤色の例
RGB	RGB(255, 0, 0)
HEX	#FF0000

RGBからHEXへ変換するときは、RGBの各数値を16進数へ変換します。逆にHEXからRGBへ変換するときは、HEXの各2桁を16進数から10進数へ変換します。

つまり、RGBとHEXは表記方法が違うだけで、同じ色を別の形式で表現しているものです。

RGBとは？

RGBは、Red（赤）・Green（緑）・Blue（青）の3色を組み合わせて色を表現する方式です。

一般的な8ビットRGBでは、それぞれの色を0〜255の数値で表します。

色	範囲
R（赤）	0〜255
G（緑）	0〜255
B（青）	0〜255

例えば、 RGB(255, 0, 0) は赤を最大にし、緑と青を0にした色なので、赤色になります。

一方、 RGB(0, 0, 0) はすべての値が0なので黒、 RGB(255, 255, 255) はすべて最大なので白になります。

HEXとは？

HEXカラーコードは、16進数を使って色を表現する方式です。一般的な6桁のHEXカラーコードは#RRGGBBという構造になっています。

部分	意味
RR	赤（R）の値
GG	緑（G）の値
BB	青（B）の値

例えば、 #FF0000 の場合、

FF → 赤
00 → 緑
00 → 青

となるため、RGBではRGB(255, 0, 0)に相当します。

HEXでは0〜9に加えてA〜Fを使用します。これは10進数ではなく16進数で数値を表しているためです。

HEXからRGBへの変換方法

HEXからRGBへ変換する場合は、6桁のHEXカラーコードを2桁ずつ3つに分けます。

例えば、 #3366CC をRGBへ変換してみましょう。

① HEXを3つの値に分ける

#3366CCを2桁ずつ分けると、

となります。それぞれがR・G・Bの値を表しています。

② 16進数を10進数へ変換する

16進数の33は10進数では51です。

16進数では、 3 × 16 + 3 = 51 となります。

同じように、

33 → 51
66 → 102
CC → 204

となります。

③ RGBとして表す

したがって、

#3366CC → RGB(51, 102, 204)

となります。

HEX → RGBの基本ルール

HEXの6桁を「RR」「GG」「BB」の2桁ずつに分け、それぞれを16進数から10進数へ変換します。

RGBからHEXへの変換方法

RGBからHEXへ変換する場合は、RGBの各数値を10進数から16進数へ変換します。

例えば、 RGB(51, 102, 204) をHEXへ変換してみましょう。

① Rの値を変換する

Rは51です。

51を16進数へ変換すると、 33 になります。

② Gの値を変換する

Gは102です。

102を16進数へ変換すると、 66 になります。

③ Bの値を変換する

Bは204です。

204を16進数へ変換すると、 CC になります。

④ 3つをつなげる

変換した値を順番につなげると、

33 + 66 + CC = #3366CC

となります。つまり、

RGB(51, 102, 204) → #3366CC

と変換できます。

RGB → HEXの基本ルール

R・G・Bそれぞれの10進数を16進数へ変換し、2桁ずつにして「#」の後ろにつなげます。

RGBとHEXの変換例

よく使われる色をRGBとHEXで比較すると、以下のようになります。

色	RGB	HEX
黒	RGB(0, 0, 0)	#000000
白	RGB(255, 255, 255)	#FFFFFF
赤	RGB(255, 0, 0)	#FF0000
緑	RGB(0, 128, 0)	#008000
青	RGB(0, 0, 255)	#0000FF
黄色	RGB(255, 255, 0)	#FFFF00
シアン	RGB(0, 255, 255)	#00FFFF
マゼンタ	RGB(255, 0, 255)	#FF00FF
グレー	RGB(128, 128, 128)	#808080

RGBとHEXは表記が異なりますが、対応する値が同じであれば同じ色を表します。

3桁HEXの変換方法

HEXカラーコードには、6桁だけでなく3桁の形式もあります。

例えば、 #F00 は赤色を表します。

3桁HEXは、それぞれの文字を2回繰り返して6桁に変換できます。

#F00 → #FF0000

したがって、 #F00 → RGB(255, 0, 0) となります。

3桁HEX	6桁HEX	RGB
#000	#000000	RGB(0, 0, 0)
#FFF	#FFFFFF	RGB(255, 255, 255)
#F00	#FF0000	RGB(255, 0, 0)
#0F0	#00FF00	RGB(0, 255, 0)
#00F	#0000FF	RGB(0, 0, 255)

3桁HEXは、6桁HEXを短く記述できる便利な表記方法です。

8桁HEXの仕組み

CSSでは、6桁のHEXカラーコードに透明度を追加した8桁HEXも使用できます。

8桁HEXは、 #RRGGBBAA という形式です。

部分	意味
RR	赤
GG	緑
BB	青
AA	アルファ（透明度）

最後のAAが透明度を表します。 00が完全に透明、FFが完全に不透明です。

例えば、

#FF0000FF → 不透明な赤
#FF000080 → 半透明に近い赤
#FF000000 → 完全に透明

このように、8桁HEXを使用すると色と透明度を1つのカラーコードで表現できます。

CSSでRGBとHEXを使う方法

RGBとHEXは、CSSでWebページの文字色や背景色などを指定するときにも使用できます。

HEXを使用する場合

color: #3366CC;

背景色の場合は、

background-color: #3366CC;

のように記述できます。

RGBを使用する場合

color: rgb(51, 102, 204);

この2つは同じ色を指定しています。

color: #3366CC;
color: rgb(51, 102, 204);

どちらを使用するかは、プロジェクトのルールや用途に応じて決めることができます。

透明度を指定する場合

RGB系の表記では、アルファ値を使って透明度を指定することもできます。

background-color: rgba(255, 0, 0, 0.5);

これは赤色に約50%の透明度を設定した例です。

HEXでは8桁形式を使用して透明度を指定できます。

background-color: #FF000080;

RGBとHEXの使い分け

RGBとHEXはどちらが優れているというものではありません。どちらも色を表現する方法であり、用途に応じて使い分けることができます。

用途	向いている形式	理由
CSSのカラー指定	HEX・RGB	どちらも利用できる
カラーコード一覧	HEX	短く表示しやすい
画像編集	RGB	RGB値を直接指定する場面が多い
Webデザイン	HEX・RGB	用途によって使い分けられる
透明度を含む色	RGB・8桁HEX	アルファ値を指定できる

特にWebデザインではHEXカラーコードがよく使われます。一方、画像処理やプログラミングではRGB値を使用するケースもあります。

RGBとHEXの変換ツールを使う方法

RGBとHEXの変換は計算でもできますが、カラーコードが多い場合や正確に変換したい場合は、変換ツールを利用すると便利です。

「はるツール」では、RGBからHEXへ変換するツールと、HEXからRGBへ変換するツールを用意しています。

HEXからRGBへ変換する

HEXカラーコードを入力すると、対応するRGB値を確認できます。

HEXからRGBへの変換ツールはこちら

RGBからHEXへ変換する

RGBのR・G・Bの値を入力すると、対応するHEXカラーコードへ変換できます。

RGBからHEXへの変換ツールはこちら

カラーコードを一覧から探す

代表的な色のHEXカラーコードやRGB値を確認したい場合は、カラーコード一覧も便利です。

カラーコード一覧はこちら

変換ツールを使うメリット

複雑な計算をする必要がない
HEXとRGBをすぐに相互変換できる
入力ミスを減らせる
複数のカラーコードを確認するときに便利

よくある質問

RGBとHEXは同じ色を表せますか？

はい。 RGBとHEXは表記方法が異なるだけで、対応する値が同じであれば同じ色を表します。例えば、RGB(255, 0, 0)と#FF0000はどちらも赤色です。

HEXからRGBへ変換するにはどうすればいいですか？

6桁HEXの場合、カラーコードを2桁ずつ「RR」「GG」「BB」に分け、それぞれを16進数から10進数へ変換します。例えば#3366CCはRGB(51, 102, 204)になります。

RGBからHEXへ変換するにはどうすればいいですか？

RGBのR・G・Bそれぞれの値を10進数から16進数へ変換し、2桁ずつつなげます。例えばRGB(51, 102, 204)は#3366CCになります。

HEXの「#」にはどんな意味がありますか？

CSSなどで使用するHEXカラーコードでは、「#」の後ろに16進数のカラー値を記述します。例えば#FF0000では、#の後ろにRGBそれぞれの値を表す16進数が並んでいます。

3桁のHEXと6桁のHEXは何が違いますか？

3桁HEXは6桁HEXを短く記述した形式です。例えば#F00は#FF0000と同じ色を表します。

8桁HEXとは何ですか？

8桁HEXは「#RRGGBBAA」という形式で、最後の2桁がアルファ値（透明度）を表します。 00が完全に透明、FFが完全に不透明です。

RGBとHEXはどちらを使えばいいですか？

どちらも利用できます。 WebデザインではHEXがよく使われますが、画像処理やプログラミングなどではRGBが便利な場合があります。用途に応じて使い分けるとよいでしょう。

まとめ

RGBとHEXは、どちらも色を表現するための方法です。 RGBは赤・緑・青を0〜255の数値で表し、HEXは16進数を使ってカラーコードを表します。

RGBはR・G・Bを0〜255で表す
6桁HEXは#RRGGBBという形式
HEXからRGBへ変換できる
RGBからHEXへ変換できる
3桁HEXは6桁HEXを短くした形式
8桁HEXでは透明度も指定できる
CSSではRGBとHEXのどちらも利用できる

例えば、 #3366CC は RGB(51, 102, 204) と同じ色です。

RGBからHEX、HEXからRGBへの変換は仕組みを理解すれば手計算できますが、頻繁に変換する場合は専用ツールを利用すると効率的です。