RGBとHEXの違いを教えて。色数にも違いはあるの？ sRGBって何？

Web制作やデザインツールを使っていると、必ず目にする
RGB や HEX、
そして最近よく聞く sRGB という言葉。「なんとなく使っているけど、正直よく分からない」
「RGBとHEXって、何が違うの？」
「色数に差があるの？」この記事では、そんな色に関する基本的な疑問を、
できるだけ分かりやすく整理します。※ この記事は、ディスプレイ上で表示される色（Web・画像）を前提にしています。
印刷用のCMYKについては、最後に簡単に触れる程度にとどめます。

RGBとは？

RGBとは、
Red（赤）・Green（緑）・Blue（青）
という3つの光の強さを組み合わせて色を表す方法です。

私たちが見ている
スマートフォン、パソコン、テレビなどの画面は、
すべてこのRGB方式で色を表示しています。

RGBの数値の意味

RGBは、次のように数値で表されます。

RGB(255, 0, 0)   → 赤
RGB(0, 255, 0)   → 緑
RGB(0, 0, 255)   → 青
RGB(255, 255, 255) → 白
RGB(0, 0, 0)     → 黒

それぞれの色は 0〜255 の256段階。

0 → 光が出ていない
255 → 最大の明るさ

この3色の組み合わせで、画面上の色が作られています。

HEXとは？

HEX（ヘックス）とは、
RGBの数値を16進数で書いた表記方法です。

Web制作やCSS、デザインツールでは、
RGBよりもHEXの方がよく使われています。

HEXの基本構造

HEXカラーコードは、次の形式になっています。

#RRGGBB

RR → 赤（00〜FF）
GG → 緑（00〜FF）
BB → 青（00〜FF）

例えば：

RGB(255, 0, 0) → #FF0000
RGB(0, 0, 0)   → #000000
RGB(255,255,255) → #FFFFFF

つまり、HEXはRGBを別の書き方にしただけなのです。

RGBとHEXで色数に違いはあるの？

結論から言うと、
RGBとHEXで表現できる色数はまったく同じです。

RGBは各色256段階なので：

256 × 256 × 256 = 16,777,216色

約1677万色。

HEXも、RGBと1対1で対応しているため、
色数や色の範囲に違いはありません。

違うのは、
「どう書くか」だけです。

sRGBって何？

ここで重要なのが sRGB です。

sRGBは、
RGBの一種ではなく、「RGBのルール（色の基準）」
のようなものです。

実は、

RGB(255, 0, 0)

という数値だけでは、
「どんな赤なのか」は完全には決まりません。

そのRGB値を
どの基準で解釈するか
を決めるのが、色空間（カラースペース）です。

sRGBは世界標準のRGB

sRGBは、

Webブラウザ
一般的なモニター
スマートフォン
PNG / JPG画像

などで事実上の標準として使われているRGBの基準です。

そのため、
「誰の環境でも同じ色に見えやすい」
という大きなメリットがあります。

Adobe（Photoshop / Illustrator）ではどう設定する？

PhotoshopやIllustratorなどのAdobe製品では、
作業する色空間を設定できます。

ディスプレイ表示やWeb用の画像を扱う場合、
おすすめは以下です。

CMYKについて（簡単に）

補足として、
印刷では基本的に
CMYKという別の色の仕組みが使われます。

CMYKはインクで色を作る方式のため、
RGBやsRGBとは
考え方そのものが違います。

この記事では、
ディスプレイで見る色（RGB / HEX / sRGB）
にフォーカスしているため、
詳しい説明は省略します。

まとめ

RGBとHEXは同じ色を別の書き方で表しているだけ
表現できる色数はどちらも約1677万色
sRGBはRGBの世界共通ルール
Webや画像ではsRGBが最も安全な選択

Color Collectorでは、
RGB・HEX・sRGBを相互に確認しながら、
安心して使える色を管理できます。

「この色、他の環境でも同じに見えるかな？」
そんな不安を減らすためにも、
ぜひ活用してみてください。