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を相互に確認しながら、 安心して使える色を管理できます。「この色、他の環境でも同じに見えるかな？」そんな不安を減らすためにも、ぜひ活用してみてください。