Webデザインで使用するRGBとは？CMYKとは違う色の話

RGBとは、Red・Green・Blueの頭文字をとった光の三原色です。
主にテレビやパソコン、スマホなどのモニタの色を光で表現するために使われます。

Webデザインする時に使う基本のカラーモードはRGBですね。
インデックスカラー、Webセーフカラー、HSBについてもご紹介します。

Adobe Photoshop などで画像を編集する時は、画像ファイルのカラーモードがCMYKではなくRGBになっていることを必ず確認します。

RGBとは？

Red・Green・Blue の光の三原色

RGBとは、主にモニタなどで色を表現する光の色です。

R: Red =赤
G: Green =緑
B: Blue =青

RGBは光の三原色といわれます。

RGBで表現できる色数は約1677万色

RGBは赤・緑・青の光の三原色を組み合わせてさまざまな色を表現します。
通常モニタの表現でフルカラーと呼ばれるものは約1677万色です。

パソコンではRGBの値を組み合わせて色を再現しています。それぞれ表現できる色は256通り。

R: Red =0と1〜255
G: Green =0と1〜255
B: Blue =0と1〜255

RGBの3色を組み合わせて表現できるのは256×256×256で、約1677万色となります。

RGBの加法混合

RGBの各色を混ぜていくことを加法混合といいます。
言葉よりも、下記のように覚えるとカンタンです。

真っ暗な黒の背景色から開始して光を加えていくのが加法混合です。

2つの基本カラーを重ねると二次カラーを作成することができます。
G＋B＝シアン
B＋R＝マゼンタ
R＋G＝イエロー

どこかで見たことある色名ですね。
シアン、マゼンタ、イエローは印刷用のCMYKの基本カラーです。

RGBカラーを他の表現で利用する

RGBの約1677万色の中から一部の色を使うものや、RGBの値以外で色指定するものがあります。

インデックスカラーは256色

インデックスカラーとは、
RGBの約1677万色のうちから256色を選んで画像を構成するものです。
256色のカラーテーブルは画像データによって違いがあります。

色数が減るのでファイルサイズを小さくすることができます。Webサイト用のGIF画像やロゴによく使われています。
RGBで編集して、Web用にGIFで書き出す時にインデックスカラーを使用することが多いです。

元のファイルのカラーモードがインデックスカラーの場合、
Adobe Photoshop でインデックスカラーのまま編集すると使えない機能があるので、一時的にRGBに変更して編集します。

Webセーフカラーは216色

Webセーフカラーとは、
RGBの約1677万色のうちから決められた216色
16進数で表す時に「00,33,66,99,CC,FF」のみを使って色を指定します。
頭に半角シャープを付けて6ケタで表記します。

赤緑青がそれぞれ6段階ずつ、R6×G6×B6=216色です。

黒は #000000
白は #ffffff
赤は #ff0000

CSSでも記述することがあるのでよく使うWebセーフカラーは覚えてしまいますが、現代ではWebセーフカラーにこだわらなくても大丈夫です。
昔、パソコンで一度に表示できる色数が少なかった頃の名残りです。

この色をちょっと薄くしたい、などで便利に使えることもあります。

Webセーフカラー web216 – Web Safe Colors
https://www.colordic.org/s/

色選びが楽になるHSB(HSV)

HSBはとても効率的に色選びができます。
Webサイトを作るときにPhotoshopの色選択で私が1番使用しているのがHSBです。

HSBはRGBのようなカラーモードの名称ではありません。
RGBのR255, G255, B255の数値ではなく、
RGBの色指定を色相・彩度・明度の値で指定します。

何が便利かというと、

同じ彩度(S)と明度(B)を保ち、赤や青などの違う色が作れる(H 色相)

同じ色相(H 赤など)と明度(B)を保ち、鮮やかにしたりくすませたりできる(S 彩度)

同じ色相(H 赤など)と彩度(S)を保ち、明るくしたり暗くしたりできる(B 明度)

これ、ものすごく効率的で便利です。

CMYKとは？RGBとの色の違い

CMYKについて超カンタンに説明します。
Webデザインをする時にCMYKは使いません。

RGBが「光」なのに対して、
CMYKを簡単に言えば「インクの色」です。
CMYKは印刷物などに使うカラーモードです。

RGBではなくCMYKで画像ファイルを編集すると色が違うので、意図しない色になってしまうことがあります。

クライアントから提供されたロゴデータや画像データなど、印刷用と併用のためCMYKになっていることがあります。
Adobe Illustrator のロゴデータは特にCMYKが多いです。

企業のロゴの色は、
CI(コーポレートアイデンティティ)として、CMYKの色指定、RGBの色指定がそれぞれ決められていることがあります。
CMYKのデータを提供されたら、RGBに変換した時の色の数値をクライアントに確認することをおすすめします。

おわりに

最近クライアントから提供されたWebサイト用のPhotoshopのロゴデータ(PSD)が、フィルタや色調補正がかかったCMYKのファイルでした。
ロゴのRGBの色を確認したら、RGBのPSDデータをいただき無事にWebサイトを公開できました。

Webサイトを間違いなく制作するために、RGBになっているかどうかを必ず確認しましょう。