WebでRGBカラーが使われる理由とは?画面表示の色指定を解説

Webサイトの色を指定するとき、印刷物のように「CMYK」を意識することはほとんどありません。

これはWebの色がすべて「RGB」という仕組みを土台にしているためです。

この記事では、WebでRGBカラーが使われる理由と、Web制作で押さえておきたいポイントを、初心者向けに解説します。

基本の理解

まずはWebとRGBの関係と、なぜRGBが土台になっているのかを押さえましょう。

Webで使われるRGBカラーとは何か

Webで使われるRGBカラーとは、WebサイトやアプリなどディスプレイでRGB(赤・緑・青の光の3色)を使って色を表現する仕組みのことです。

印刷物のCMYKとは異なり、Webの色はすべてこのRGBを土台に指定します。

左に光るモニタ(RGB、デジタル画面の色)、右にプリンタと印刷物(CMYK、紙の印刷の色)を対比したイラスト

画面の中だけで完結するWebサイトやアプリはRGBで、紙に印刷して初めて完成する印刷物はCMYKで、というように、色の仕組みは最終的にどこで見る色なのかによって使い分けられています。

※CMYKとは、印刷で使われる色の指定方式のことで、シアン(青緑)・マゼンタ(赤紫)・イエロー(黄)・ブラック(黒)という4色のインクを重ねて色を作る仕組みです。

光を混ぜるRGBとは色の作り方が逆で、RGBは3色を混ぜるほど明るく(最終的に白に)、CMYKはインクを重ねるほど暗くなります。

たとえば絵の具(CMYKに近い仕組み)は、何色も重ねて塗るほどだんだん黒っぽく濁っていきます。

一方、スマホやパソコンの画面は、暗闇の中で赤・緑・青のスポットライトを重ねているようなもので、光を足せば足すほど明るくなり、3色を目いっぱい重ねると中心が真っ白に光ります。

RGBが「混ぜるほど明るくなる」のは、インクではなく光を扱っているためです。

この仕組みのおかげで、画面上で正確に色を再現・指定でき、デザインした通りの色をユーザーの画面にも表示できます。

HEXカラーコード(赤・緑・青それぞれを2桁ずつ、#FF6600のように計6桁の英数字で表す記号)など、Webで使われる色指定の方法はすべてこのRGBの仕組みを基礎にしています。

なぜRGBを理解しておく必要があるのか

Webデザインでは印刷物のようにCMYKで色を考える必要がなく、RGBを前提に色を扱います。

デザインツールで指定した色の数値を、そのままHTML・CSSのコードに反映させる際にも、RGBの考え方を理解している必要があります。

実際、CSSで色を指定する際はrgb(255, 0, 0)のように、赤・緑・青それぞれを0〜255の数値で指定します。

デザインツールのカラーピッカーの多くも、RGBの数値(またはそれを変換したHEXカラーコード)で色を管理しています。

たとえばFigmaやPhotoshopで色を選ぶと、画面上に#FF6600やrgb(255, 102, 0)という文字列が表示されるので、Web制作ではその文字列をそのままコピーしてCSSに貼り付けるだけで、デザインツール上と同じ色を画面に再現できます。

⚠️ 印刷物と共通のロゴなどを使う場合、

CMYKで作られたデータをRGBに変換すると、画面上での見え方が変わることがあるため注意しましょう。

これは画面(RGB)と印刷(CMYK)とで表現できる色の範囲(色域)が異なり、モニターの方が印刷よりも鮮やかで明るい色を表現できるためです。

特に蛍光ピンクや鮮やかな緑のような色は、印刷用データをそのままWeb用に変換すると、実物より少しくすんだ落ち着いた色に見えてしまうことがあります。

実践のポイント

RGBを扱う際に気をつけたい点と、よくある疑問をまとめます。

注意点・よくある間違い

印刷用に作られた色(CMYK)をそのままWebで使おうとすると、画面上での色の見え方が想定と異なることがあります。印刷物と共通の色を使う場合は、必ずRGBへの変換後に画面で確認しましょう。
RGBの数値を細かく理解していなくても実務上は困りませんが、色の変換(HEXカラーコードとの対応関係)の仕組みは知っておくと役立ちます。

印刷用データを渡すときに気をつけたいポイント(Illustrator・Photoshopの場合)

RGBとCMYKの見え方のギャップは、IllustratorやPhotoshopで印刷用データを作って入稿するまでの流れの中で、いくつかのポイントを押さえておくと防ぎやすくなります。

新規ドキュメントの作成時点でカラーモードを「CMYK」に設定する:
RGBのまま作業を進め、入稿直前にCMYKへ切り替えると、色が沈んで見えて慌てることがあります。印刷用と分かっている案件は、最初からCMYKモードで作業を始めましょう。
鮮やかな色を使う場面では、CMYKでの見え方をこまめに確認する:
蛍光ピンクや鮮やかな緑・青は、特にRGBとCMYKの差が大きい色です。
Photoshopの「表示 > 校正設定」、Illustratorの「表示 > オーバープリントプレビュー」を使うと、CMYKに変換した場合の見え方を作業中に確認できます。
入稿データはCMYKモードのまま、印刷会社の指定形式(PDF/X-1aなど)で書き出す:
RGBのまま書き出してしまうと、印刷会社側で自動変換され、意図しない色になることがあります。

具体的な数値で見ると、どのくらいギャップが出やすいかイメージしやすくなります。

以下は代表的な鮮やかな色を、単純な計算式でCMYKに換算した場合の目安です。

※実際の印刷結果はインキ・用紙・プロファイルによってさらに変わるため、正確な色は必ず校正プレビューで確認してください。

この表はあくまで「差が出やすい色・出にくい色」の傾向をつかむための目安です。

色	RGB値	CMYK換算値の目安	印刷するとどう見えるか
蛍光ピンク	R255 G0 B153 (#FF0099)	C0 M100 Y40 K0	画面のような発光感のある蛍光ピンクは再現できず、濃いピンク〜マゼンタ寄りの落ち着いた色になりやすい
鮮やかな緑	R0 G255 B0 (#00FF00)	C100 M0 Y100 K0	画面の発光するような緑にはならず、黄緑がかった深みのある緑に落ち着きやすい
鮮やかな青	R0 G102 B255 (#0066FF)	C100 M60 Y0 K0	紫みが少し強まり、画面よりやや落ち着いた印象の青になりやすい
オレンジ(本記事の例)	R255 G102 B0 (#FF6600)	C0 M60 Y100 K0	比較的CMYKで再現しやすい色で、上記3色に比べるとギャップは小さめ。ただし画面よりわずかに沈んだ印象にはなる

蛍光ピンク・鮮やかな緑・鮮やかな青のように、画面上でひときわ発光して見える色ほど、CMYKでは再現しきれずギャップが大きくなる傾向があります。

反対に、オレンジのようにもともと控えめな色は、CMYKに変換してもギャップが比較的小さく収まります。

逆にWebサイト用の画像を作る場合は、印刷用に作られたCMYKのロゴ・写真素材をそのまま流用するのではなく、RGBに変換したうえで実際の画面で確認し、必要であれば彩度を調整すると、狙った鮮やかさに近づけられます。

よくある質問

Q. CSSでrgb()とHEXカラーコード、どちらを使えばいい?
A. どちらも同じRGBの情報を表しており、優劣はありません。固定の色を短く書きたい場合はHEXカラーコード、透明度もあわせて指定したい場合はrgba()が使いやすい、というように場面で使い分けるとよいでしょう。
rgba()の「a」はAlpha(アルファ、透明度)の略で、rgba(255, 0, 0, 0.5)のように4つ目の数値に0(完全に透明)〜1(不透明)を指定すると、背景を透けさせられます。
Q. RGBの数値0〜255とは何を表している?
A. 赤・緑・青それぞれの光の強さを表しており、0が「その色の光がまったくない」、255が「その色の光が最大」を意味します。HEXカラーコードの00〜FFと同じ範囲を、10進数で表したものです。
※普段使う0〜9の数字(10進数)に対して、HEXカラーコードは0〜9のあとにA〜Fを使い、1桁で16個の値を表せる「16進数」で書かれています。16進数のFFは10進数の255と同じ値です。16進数とHEXカラーコードの仕組みはHEXカラーコードとはという記事で詳しく解説しています。