Webサイトや画像編集ソフトで色を指定するとき、「RGB」や「HEX」という言葉を目にすることがあります。 どちらも色を表すために使われる方法ですが、数字の表し方や利用される場面には違いがあります。
RGBは、赤（Red）・緑（Green）・青（Blue）の3つの色を組み合わせて色を表現する方式です。 一方、HEXはRGBの色の値を16進数で表したカラーコードで、WebデザインやCSSなどで広く利用されています。
この記事では、RGBとHEXの基本的な仕組みから、それぞれの違い、変換方法、CSSでの使い方まで初心者向けにわかりやすく解説します。
- RGBとは何か
- HEXカラーコードとは何か
- RGBとHEXの違い
- RGBカラーの仕組み
- HEXカラーコードの仕組み
- RGBとHEXの変換方法
- CSSでの使い方
- RGBとHEXの使い分け
RGBとは？
RGBとは、Red（赤）、Green（緑）、Blue（青）の3つの光の三原色を組み合わせて色を表現する方式です。 コンピューターやスマートフォンなどのディスプレイでは、この3色の光を組み合わせることでさまざまな色を表示しています。
RGBでは、通常それぞれの色を0〜255の数値で表します。 例えば、
- R = 255
- G = 0
- B = 0
の場合は、赤色を表します。 すべての値が0の場合は黒、すべての値が255の場合は白になります。
RGBは画像編集ソフトやグラフィックソフト、Webブラウザなど、デジタル画像を扱うさまざまな場面で利用されています。
HEXとは？
HEXとは、RGBの色の値を16進数で表したカラーコードです。 「HEXカラーコード」や「16進数カラーコード」と呼ばれることもあります。
HEXカラーコードは、通常「#」の後に6桁の16進数を記述します。 例えば、
#FF0000
は赤色を表します。 この6桁は、RGBのR・G・Bそれぞれの値を2桁の16進数で表したものです。
例えば、
- FF → Red = 255
- 00 → Green = 0
- 00 → Blue = 0
となります。 そのため、#FF0000とRGB(255, 0, 0)は同じ赤色を表しています。
RGBとHEXの仕組み
RGBは10進数で色を表す
RGBでは、赤・緑・青のそれぞれを0〜255の10進数で指定します。
例えば、
RGB(0, 128, 255)
の場合、
- R = 0
- G = 128
- B = 255
という意味になります。 この3つの値を組み合わせることで、ディスプレイ上に特定の色を表示します。
HEXは16進数で色を表す
HEXでは、RGBの各値を16進数に変換して表します。 16進数では、0〜9に加えてA〜Fを使用します。
| 10進数 | 16進数 |
|---|---|
| 0 | 00 |
| 15 | 0F |
| 16 | 10 |
| 128 | 80 |
| 255 | FF |
例えばRGBの「255」はHEXでは「FF」になります。 そのため、
RGB(255, 0, 0)
は、
#FF0000
と表すことができます。
なぜHEXは6桁なの？
一般的な6桁のHEXカラーコードでは、RGBそれぞれの値を2桁の16進数で表します。
| 部分 | 意味 |
|---|---|
| RR | 赤（Red） |
| GG | 緑（Green） |
| BB | 青（Blue） |
例えば#3366CCの場合、
- 33 → 赤
- 66 → 緑
- CC → 青
という構成になっています。
RGBとHEXの違い
RGBとHEXは別々の色表現に見えますが、一般的なRGBカラーと6桁のHEXカラーコードは、基本的に同じRGBの色情報を異なる表記方法で表したものです。
① 数値の表し方が違う
RGBは10進数を使用します。 一方、HEXは16進数を使用します。
例えば赤色の場合、
RGB(255, 0, 0)
と、
#FF0000
は同じ色を表します。
② 表記方法が違う
RGBでは「RGB(255, 0, 0)」のように、3つの数値をカンマで区切って記述します。
HEXでは「#FF0000」のように、「#」と6桁の16進数で表します。
③ 利用される場面が違う
RGBは画像編集やグラフィックソフト、プログラムなどで扱いやすい表現です。 一方、HEXはWebデザインやHTML・CSSで色を指定するときによく使われます。
④ HEXはRGBより短く書ける場合がある
6桁のHEXカラーコードの中には、3桁に省略できるものがあります。 例えば、
#FFFFFF → #FFF
#FF0000 → #F00
のように、同じ文字が各ペアで繰り返されている場合は3桁で表現できます。
ただし、すべてのHEXカラーコードを3桁に省略できるわけではありません。
RGBとHEXを変換する方法
RGBとHEXは相互に変換できます。 色そのものを変更するのではなく、同じRGB値を別の表記方法へ変換します。
RGBからHEXへの変換
RGBの各値を10進数から16進数へ変換します。
例えば、
RGB(255, 128, 0)
をHEXに変換すると、
- 255 → FF
- 128 → 80
- 0 → 00
となるため、
#FF8000
になります。
HEXからRGBへの変換
HEXカラーコードをRGBに変換する場合は、RR・GG・BBのそれぞれを16進数から10進数へ変換します。
例えば、
#3366CC
の場合、
- 33 → 51
- 66 → 102
- CC → 204
となるため、
RGB(51, 102, 204)
になります。
RGBとHEXの変換を手計算する必要はありません。 以下のツールを利用すると、RGBとHEXをブラウザ上ですぐに相互変換できます。
CSSでRGBとHEXを使う方法
HTMLやCSSでWebページの色を指定するとき、RGBとHEXのどちらも利用できます。
HEXで指定する
CSSでは、次のようにHEXカラーコードを指定できます。
color: #FF0000;この場合、文字色が赤になります。 背景色を指定する場合は、
background-color: #3366CC;のように記述できます。
RGBで指定する
RGBを使用する場合は、
color: rgb(255, 0, 0);のように記述します。
透明度を指定する
CSSではRGBに透明度を加えたRGBAも利用できます。 例えば、
color: rgba(255, 0, 0, 0.5);とすると、赤色に50%の透明度を指定できます。
また、CSSでは8桁のHEXカラーコードを使用して透明度を指定することもできます。
color: #FF000080;このように、HEXとRGBはどちらもWebデザインで利用できます。
RGBとHEXの使い分け
RGBとHEXはどちらが優れているというものではありません。 目的や作業環境に応じて使い分けることが重要です。
WebサイトのCSSで色を指定する
Webサイトの基本的な色指定では、HEXが使いやすい場合があります。 例えば、
color: #333333;
background-color: #FFFFFF;のように記述できます。 ブランドカラーやデザインガイドラインなどでカラーコードを管理する場合にも、HEXはよく利用されます。
画像編集やグラフィック制作
画像編集ソフトなどではRGBによる色指定がよく利用されます。 RGBは赤・緑・青それぞれの強さを数値として確認できるため、色を調整するときに直感的に扱いやすい場合があります。
プログラムで色を扱う
プログラミングでは、使用する言語やライブラリによってRGB・HEX・その他の色表現を使い分けます。 Web開発ではHEXとRGBのどちらも一般的に利用できます。
- Webデザイン・CSS → HEX
- 画像編集 → RGB
- プログラム → RGB・HEX
- カラーコードを短く管理 → HEX
- 色の強さを数値で調整 → RGB
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(255, 0, 0) = #FF0000
と表すことができます。
RGBとHEXの比較表
RGBとHEXはどちらもデジタル環境で色を指定するために利用できますが、表記方法や扱いやすさに違いがあります。
| 比較項目 | RGB | HEX |
|---|---|---|
| 色の表現 | 赤・緑・青の数値 | RGB値を16進数で表現 |
| 数値 | 0〜255 | 00〜FF |
| 基数 | 10進数 | 16進数 |
| 一般的な表記 | RGB(255, 0, 0) | #FF0000 |
| CSSで利用 | ○ | ○ |
| 画像編集 | ◎ | ○ |
| Webデザイン | ○ | ◎ |
| 透明度 | RGBAで指定可能 | 8桁HEXで指定可能 |
| 3桁表記 | × | ○ |
RGBとHEXのメリット・デメリット
RGBのメリット
- 赤・緑・青それぞれの強さを数値で確認できる
- 画像編集やデジタル画像で広く利用されている
- 色の調整方法を理解しやすい
- CSSでも利用できる
- RGBAによって透明度も指定できる
RGBのデメリット
- HEXと比べるとCSSの記述が長くなる場合がある
- 色をコードだけで管理すると少し分かりにくい場合がある
HEXのメリット
- WebデザインやCSSで使いやすい
- カラーコードを短く記述できる
- 3桁に省略できるカラーがある
- ブランドカラーなどをコードで管理しやすい
- RGBと相互変換できる
HEXのデメリット
- 16進数に慣れていないと数値の意味が分かりにくい
- 色の調整を数値だけで行う場合はRGBのほうが分かりやすいことがある
RGBとHEXはどちらがきれいな色になる？
RGBとHEXは、表記方法が違うだけで同じRGB値を表している場合、基本的に色そのものに違いはありません。
例えば、
RGB(255, 0, 0)
と、
#FF0000
は同じ赤色を表します。
そのため、RGBからHEXへ変換したから画質が良くなったり、色が鮮やかになったりするわけではありません。 重要なのは、目的に応じて適切な色表現を選択することです。
HEXカラーコードには3桁・6桁・8桁がある
HEXカラーコードには、一般的な6桁表記だけでなく、3桁や8桁の表記もあります。
3桁のHEX
3桁のHEXカラーコードは、6桁のHEXを省略した表記です。 例えば、
#FFFFFF → #FFF
のように記述できます。
ただし、6桁の各色成分が同じ数字の繰り返しになっている場合に限り、省略できます。
6桁のHEX
最も一般的なHEXカラーコードです。
#RRGGBB
という形式で、RRが赤、GGが緑、BBが青を表します。
8桁のHEX
8桁のHEXカラーコードでは、RGBに加えてアルファ値（透明度）を指定できます。
#RRGGBBAA
という形式で、最後のAAがアルファ値を表します。
そのため、透明度を含めて色を指定したい場合には8桁HEXを利用できます。
よくある質問
RGBとHEXは何が違いますか？
RGBは赤・緑・青の3色を0〜255の10進数で表す方式です。 HEXはRGBの値を16進数で表したカラーコードです。 例えばRGB(255, 0, 0)と#FF0000は同じ赤色を表します。
HEXはRGBより高画質ですか？
いいえ。 RGBとHEXは色の表記方法が異なるだけなので、同じRGB値を表している場合、HEXにしたことで画質が高くなるわけではありません。
WebサイトではRGBとHEXのどちらを使えばいいですか？
どちらもCSSで利用できます。 基本的な色指定ではHEXが扱いやすい場合が多く、透明度を含めた指定や数値による色の調整ではRGB・RGBAが便利です。
RGBからHEXへ変換できますか？
はい。 RGBの各値を10進数から16進数へ変換することでHEXカラーコードに変換できます。
HEXからRGBへ変換できますか？
はい。 HEXカラーコードのRR・GG・BBをそれぞれ16進数から10進数へ変換することでRGBに変換できます。
#FFFFFFとRGB(255,255,255)は同じ色ですか？
はい。 どちらも赤・緑・青の値が最大になっているため、同じ白色を表します。
まとめ
RGBとHEXは、どちらもデジタル環境で色を表すために利用される方法です。 RGBは赤・緑・青の3つの値を0〜255の10進数で表し、HEXはそのRGB値を16進数のカラーコードとして表します。
- RGBはRed・Green・Blueの3色で色を表す
- RGBの各値は通常0〜255で指定する
- HEXはRGBの値を16進数で表したカラーコード
- 6桁HEXは#RRGGBBという形式で表す
- RGBとHEXは相互に変換できる
- WebデザインやCSSではHEXがよく利用される
- 画像編集などではRGBが利用されることが多い
例えば、
RGB(255, 0, 0) = #FF0000
のように、表記方法が違っても同じ色を表すことができます。
RGBとHEXの違いを理解しておくと、Webデザインや画像編集、CSSでカラーコードを扱うときに便利です。
関連ツール
- RGBからHEXに変換 ：RGBカラーをHEXカラーコードへ変換
- HEXからRGBに変換 ：HEXカラーコードをRGBへ変換
- カラーコード一覧 ：HTML・CSSで使えるカラーコードを確認