Vol.11 WEBで使用できる色

こんにちは。ワンダースター株式会社の竹内です。
今回はWEBサイトで使用できる色についてご紹介します。

WEBサイトでは様々な色を使ってデザインが可能ですが、大きく分けて2種類の色があります。
1つ目は、Photoshopなどの画像加工ソフトなどであらかじめ用意された画像をWEB上で見る色です。ロゴや、写真などが当てはまります。

2つ目は、ブラウザが表示させる色です。
こちらは、WEBを表示させるためのHTMLやCSSファイルに指定する色を書き込んで特定の色を表示させます。

モニターの色というのは、3つの色の組み合わせで作られています。
Red、Green、Blueの頭文字をとって、RGBと呼ばれるものになりますが、この3色の組み合わせで様々な色が表現できるようになっています。

それぞれの色の強さを、0～9、A～F で表現します。0が最も薄く、Fが最も濃くなります。
この数字をR、G、Bの順に並べることで色が表現できます。

例えば、#FF0000という色は何色でしょうか？

正解は、赤になります。左の2つはRの濃さ、真ん中の２つがＧの濃さ、右の2つがＢの濃さを表しますので、赤が最も濃く、それ以外は薄いということになりますから、赤色になります。

Google検索では、WEB上での色をすぐに検索することができますのでぜひ試してみてください。色記号は、最初に‘＃’を付ける必要がありますので、#99cc00 のように検索すれば検索結果として色が表示されます。

検索結果が表示されたあと、自由にスライドバーを使って色が変えられるので面白いですね。スライドバーの下に、表示した色のRGBの記号が書かれています。上記では、HEXと書かれていますが、0~Fは16個の数があり、16進数（hexadecimal）となることから 前述HEXと呼ばれます。

モニターの場合、色が濃くなれば濃くなるほど、3つの色が合わさったときに、透明に近くになります。モニターでは透明という色は存在しませんので、実際には#FFFFFFは白になります。

絵具で3原色を混ぜた場合には黒になりますからモニターとは逆になります。
ここでは詳しくは説明しませんが、色の三原色とモニターなどで使われる光の三原色の違いによるものです。

今回は以上となりますが、次回は、上記のGoogle検索結果に出てきている、CMYK、HSV、HSLとの違いなどを解説したいと思います。

次回以降で配色の効果についてなどをご説明できればと思います。

---

---

本誌掲載の写真 ・ 記事 ・ 図版を無断で転写 ・ 複写することを禁じます。