rgbカラーチャート（Web用カラー・配色の基本）

WEBブランディングをするには、色を選ぶことも大切です。
色が与える印象を考えて、それぞれ伝えたいイメージに合う色を選びましょう。

そのためにはまず、色を出すためのRGBについて基礎的なことを知りましょう。

私たちが日頃使っているテレビ、パソコン、スマホなどのモニターは、赤（Red）、緑（Green）、青（Blue）というRGBの3色で色を出しています。

「光の三原色」というもので、光の反射量の違いによってすべての色を出すことができます。
３色すべての光が反射した場合には白になり、反対に反射がなければ黒になります。

ホームページやバナーなどを作成する時には、基本的に色はRGBで指定されています。

RGBとCMYKの違い

「光の三原色」対して「色の三原色」とは、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）の３色のことです。
「色の三原色」インクのように色を混ぜることでいろいろな色を出すことができます。

印刷の場合は、それにブラックを加えて、CMYKの４色で色を出しています。
（ちなみに、Kのブラックは、Blackのkだと思っていたのですが、Key Plate（意味：基本的な、重要な）のKのことのようです。）

シアン、マゼンタ、イエローの３色では、印刷で完全な黒を出すことが技術的に難しく、ブラックを加える必要があったようです。

ホームページで使っている画像を印刷用にしようとCMYKに変換すると、たいていが濁った色になってしまいます。
少しだけ彩度を上げるなど色の調整をした方がいいと思います。

できれば、印刷用のデータにするには、WEBとは画像解像度も違うので、改めて作ることをおすすめします。

RGBの色指定

色の指定方法には、主に２通りの方法があります。

1. RGBそれぞれに0～255の数値を指定する　⇒　rgb(n, n, n)
2. RGBそれぞれを16進数で指定する（HTMLカラーコード）　⇒　#rrggbb

RGB指定　rgb(n, n, n)		HTML指定　#rrggbb
rgb(255, 0, 0)		#ff0000
rgb(255, 153, 0)		#ff9900
rgb(255, 255, 0)		#ffff00
rgb(51, 153, 51)		#339933
rgb(102, 204, 255)		#66ccff
rgb(0, 0, 255)		#0000ff
rgb(255, 0, 255)		#ff00ff
rgb(255, 255, 255)		#ffffff
rgb(0, 0, 0)		#000000

RGBでもカラーコードでも、どちらでも自分がわかりやすい方で大丈夫です。

RGBの数値で指定する場合は、rgb(n, n, n)形式に透明度（alpha）を加えてrgba(n, n, n, a)で指定することもできます。
alphaの数値は、不透明の場合：１、半透明：0.5、透明：0と指定します。
例）赤の場合　rgba(255, 0, 0, 1)　ですが、rgba(255, 0, 0, 0)と指定すると、色がなく透明になります。

※色指定の方法は他に、色名で指定する方法や、色相・彩度・明度で指定するHSBという方法もありますが、色名を覚えて入力するのも大変ですし、HSBは感覚的に難しいので省略します。

WEBセーフカラー

WEBセーフカラーとは、HTMLカラーコードを6段階（00、33、66、99、CC、FF）に分けて、その組み合わせでできる216色のことです。

どの環境でもほぼ同じ色で表示されるので、パソコンやスマホなどの端末による色の違いを気にする必要がなく使える色です。

はっきりした色を使いたいときは、この中から選ぶのも１つの方法です。

WEBセーフカラー一覧

※各色、上段はRGB指定、下段はHTMLカラーコード指定です。

WEBセーフカラーを選ばなくても問題ない

とはいえ、このWEBセーフカラーが決められたのは、数十年も前の話で、「Netscape Navigator」というブラウザソフトの表示で保証したものだとか。
「Netscape Navigator」懐かしい～！昔、私も使ってました。今はサポート終了しています。

それにWEBセーフカラーは、はっきりした色が多く、淡い色を使いたい時にイメージが合わない場合も多いです。
グラデーションを使う時は、中間色のところではRGBセーフカラーにはならないので、意味がありません。

しかも液晶画面もどんどん進化していて、色の再現性も高くなっています。

RGBセーフカラーではなくても、イメージに合う色を使って大丈夫です。

WEBセーフカラーではない色の例

濃いめの赤やオレンジ、落ち着いたピンク、金色に近い色、抹茶色、藤色など、素敵な色を出すことができます。

※各色、上段はRGB指定、下段はHTMLカラーコード指定です。

まとめ

RGBについて、参考になりましたでしょうか？

大事なのは、RGBの色の指定方法と、RGBは印刷のCMYKとは違うということです。

色の違いを理解して、色を使うようにしましょう。

（執筆者：ころまるん）