ホームページで色の指定をする方法

サイトで色を指定する場合「16進数」「RGB値」「色名指定」等、複数の方法が存在します。どの方法でも同じように色を表現できるので、この違いは何?と質問されることがあるのですが、時代と共にブラウザが順次対応できる範囲を広げただけなので、どの方法でも間違いではありません。ただ、色名指定<16進数<RGB値の順で表現できる色の範囲は広がるので、広範囲の色表現できるのはRGB値です。

様々なサイト修正を行った経験から傾向を見ると、古いサイトは「色名指定」、比較的新しいサイトは「16進数」が多いように思います。また、最近ではRGB値を使ったサイトも増えてきています。

色名指定

色の名前を直接記述する方法です。赤色を使う場合には「red」青の場合は「blue」というように指定します。昔から使われていた方法で、色の名前と英語がわかれば使えるので、他の2つに比べてわかりやすいのですが、微妙な色や、色名がわからないと使えないという不便さがあったり、知っている色名の中からデザインをしていくと単調になりやすくなります。

【サンプル】
Red:色の指定方法★
Blue:色の指定方法★
Green:色の指定方法★
Tomato:色の指定方法★
MediumSlateBlue:色の指定方法★
LightSeaGreen:色の指定方法★

16進数指定

16進数の色指定は色を 0~9+A~F の16段階のRGBで色を指定する方法です。#シャープのマークの後、6文字で色を指定できます。RGBは光の三原色で色を表現しています。光りの三原色の場合、色を重ねる程に明るい色になり、全く色をつけないと黒になります。0という数値は全く色を使っていない状態、数字が大きくなるほど、色の使用量が多くなります。0→9→A→Fというように、0は光を使っていない状態、Fが一番強く光を使っている状態です。
そして#マークの後にくる6文字の指定は以下の通りです。

# 00 00 00
左R(レッド)中央G(グリーン)右B(ブルー)
赤色の指示をしたい時には「#FF0000」
青の指定は「#0000FF」と記述します。
【サンプル】
#000000色の指定方法★
#110000色の指定方法★
#220000色の指定方法★
#330000色の指定方法★
#440000色の指定方法★
#550000色の指定方法★
#660000色の指定方法★
#770000色の指定方法★
#880000色の指定方法★
#990000色の指定方法★
#aa0000色の指定方法★
#bb0000色の指定方法★
#cc0000色の指定方法★
#dd0000色の指定方法★
#ee0000色の指定方法★
#FF0000色の指定方法★

RGB値で指定

他の二つに比べて、一番新しい色の指定方法です。上記16進数と同じようにRGBの指定プラス使用している色を半透明にすることもできます。文字色の指定で使うことは少ないですが、背景色ので使いやすい指定方法です。今まで一般的に使われていなかったのは比較的新しい指定方法なことと、ブラウザによっては対応していないものもあった為、積極的には使われていませんでしたが、Dreamweaverのデフォルトで使えるようになったこともあり、最近のサイトでは使われていることも多くなってきました。色の指定はしやすく、透明度も指定できて、この方法がベストのように感じるかもしれませんが、この方法は上記に比べて記述が長くなるため、記述数を極力最小にしたい場合(サイトの表示スピード)には適しません。必要な箇所のみこの方法を取る…というのが現在は多いように思います。

rgba(255,0,0,0.5)  括弧の中(赤,緑,青,濃度)
0<255で色の数値を記述。濃度は1=100%、0.5=50%
【サンプル】
255,255,255,1色の指定方法★
0,255,0,0.8色の指定方法★
255,0,0,0.6色の指定方法★
255,255,0,0.4色の指定方法★
550,50,50,0.2色の指定方法★