Webカラーについて学ぼう！

色の指定方法

色の指定方法は大きく分けて２種類あり、「#」を先頭につけたRGBで指定できるカラーコードでの指定方法や、「red、green、blue」のように色の名前で指定できるカラーネームでの指定方法があります。
右の「CSSでの指定例」を見てください。背景色がオレンジで表示してある文字が色の値ですが、「#」から始まる６桁の数字とアルファベットはカラーコードによる指定で、「black」と言うように色の名前で指定してある文字がカラーコードによる指定です。

色名（カラーネーム）

RGBによる指定は、コンピュータに色を認識させるための表記のため、人にとってはカラーコードからその色を連想するのは難しいですよね？これが色の名前で指定できればもっと簡単に色を思い浮かべることができ、指定もしやすいはずです。そのためカラーネームは色を考える最には、便利な方法と言えます。
環境の違いがあっても安全に指定できるカラーネームは16色で、全部で147色あるすべてのカラーネームについては、かなり古いブラウザでは正常に色を表示してくれない可能性はあるかもしれませんが、まず問題はないと思われます。

カラーネームによる指定は大文字、小文字を区別しませんが、半角で入力する必要があります。

カラーネーム16色については「aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow」があり、カラーネーム16色、カラーネーム146色のチャートについては以下のリンクを参照ください。

＞標準16色カラーネームチャート
＞147色カラーネームチャート

カラーコード（RGB値）

コンピュータで色を表現する場合にはRGBが用いられます。 RGB の、「R」とは「red」つまり赤のことを示し、「G」とは「green」つまり緑のことを示し、「B」とは「blue」つまり青のことを示します。
これは光の三原色といい、簡単に言うとテレビが三色の光を微妙に調整して、その粒を画面いっぱいにしき詰め、いろいろな色を表現しているのと同じ原理です。注意しておきたいのは、絵の具やインク等の三原色とは違うということです。これも簡単に言うと絵の具の赤、青、緑をすべて同じ量だけ混ぜ合わせると黒になってしまいますが、光を照らし合わせると白になります。

カラーコードは「#」に続けてRGBの値を６桁の16進数で指定します。聴きなれない言葉が出できたかもしれませんが簡単に理解できます。16進数について説明すると、普通、数字は「1、2、3、4、5、6、7、8、9」まで行ったら次は「1」が繰り上がり、「10」になります。（これを10進数という）当たり前のことです。16進数とはこの「1〜9」の数字に、アルファベットの「a〜f」を数字として足し、一桁が9までで終わらず、「a〜f」まで行ったら「1」を繰り上げましょうと言うことです。ですから16進数は「1、2、3、4、5、6、7、8、9、a、b、c、d、e、f」の15の数まで行ったら16個目で「1」を繰り上げましょうと言うことになります。そこで初めて「10」となります。十の位も同様に16個目で「1」繰り上げ「100」となりそのまま続いていきます。つまり一つの桁に15個の数字があると仮定すればいいのです。

さきほど「カラーコードは「#」に続けてRGBの値を６桁の16進数で指定します。」といいましたが、この６桁の、前２つが「R」つまり赤を示し、中の２つの桁が「G」つまり緑を示し、後ろの２つが「B」つまり青を示していて、それぞれの値が「00」に近いほど弱くなり、「ff」に近いほど強くなります。ですから、赤を表現したい場合は始めの２桁を「ff」と一番強くしその後ろの４桁を「00」と指定、つまり「ff0000」と指定すれば赤で表示されます。

そしてこのRGBの３色それぞれが、「16×16= 256段階」の階調をもち、これらそれぞれを組み合組み合わせて「256×256×256 = 1677万7216色」の表現が可能です！

16進数の「a〜f」の指定は大文字、小文字を区別しませんが、半角で入力する必要があります。

＞Web セーフカラー チャート
＞配色チャート

Webセーフカラー

上記で説明したように1677万7216色という色は、VRAM（ビデオメモリ）の容量によりディスプレイ上ですべて同一の色に表現されるわけではありません。もし表現しきれない色があった場合、そのユーザーが使用しているブラウザが近似色を出力することになります。ブラウザにより出力される近似色自体異なるので、違う色が表示されるという問題が発生します。WEBセーフカラーとは古いコンピュータでも扱うことができる8ビットカラーの256色のうちMacintoshとWindowsで異なる40色を除いた216色をいいます。
しかしながら、必ずしも Webセーフカラーの 216色以外を使ってはいけないというわけではなく、同一色が表示されないと困るといった場合を除いては、Webセーフカラーの216色以外を使用してもかまいません。逆にWebセーフカラーの216色を使用して、サイト全体の配色を指定していくのは難しく、表現の幅がかなり限定されてしまうため、思い通りの配色ができない場合が多々あるでしょう。

現在のインターネットユーザーの環境の向上 で1677万7216色の表現ができる環境のユーザーが増えていますので、積極的にWebセーフカラーの 216色以外の色を使用しても良いでしょう。

＞Web セーフカラー チャート
＞配色チャート