Webの色はRGBで指定しよう
ウェブ上の色(ウェブカラー)について学習しましょう。
ウェブの色
HTMLは文書構造を示す技術なので、HTMLでは色を付けません。
ウェブページなどのコンテンツに色を付けるには、基本的にCSSを使います。
CSSのcolorプロパティやbackground-colorプロパティの値に具体的な色を指定することで、文字や背景に色を付けることができます。
具体的な色を指定する方法はいくつかありますが、ここでは入門者らしく、よく使う方法だけを効率的に学習しましょう。
![RGB RGB](/image/css/webcolors/rgb.png)
基本的な考え方はRGBを指定するということです。RGBとはRedGreenBlue、つまり赤緑青の三色のことです。
赤緑青の三色の絵の具の量をそれぞれどれくらい混ぜた色なのか、という考え方でウェブ上の色を指定します。
三色の量を0から255で指定する方法
CSSでウェブカラーを指定する方法のひとつが、三色の絵の具の量を0から255までの数値で表現するという方法です。
CSSを次のように書くと赤のウェブカラーになります。
.red{ color:rgb(255,0,0); }
これはサンプルです。赤いですか?
赤を255、緑と青は0の割合で混ぜると、色は真っ赤になるという仕組みです。
では、赤の数値を240に減らしてみましょう。
.red{ color:rgb(240,0,0); }
これはサンプルです。赤味が弱まりましたか?
少しわかりにくいので、どんどん並べてみましょう。
255、 240、 220、 200、 180、 160、 140、 120、 100、 80、 60、 40、 20、 0
このように、赤の数値を減らしていくと赤味が減って最終的には黒になります。
三色をすべて0にすると黒になり、255にすると白になります。
原色として三色用意すれば、あらゆる色を生成できるとされています。この方法では256段階を3つ指定するので、256x256x256=約1677万もの色を表現できる計算になります。
256段階ではなく、100段階として次のように%を使う方法も用意されています。
.red{ color:rgb(100%,0%,0%); }
こちらの方法の方が直感的に色を想像しやすいかもしれません。
なお、0から255までの数値方式と%方式は3色内では混合して使えないようです。
三色の量を16進数2桁で指定する方法
この方法は、ウェブカラーをRGBで表現するときにそれぞれの量を16進数2桁で表します。ウェブカラーの指定方法としては、こちらの方がメジャーかもしれません。
16進数というのは0からFまでの16文字を使って16パターンを表現する方法です。16進数を2桁並べて、16x16=256パターンを表現します。0から255までの数値方式と同じ種類のウェブカラーを表現できます。
CSSでは(括弧)やカンマは使わずに#を頭に付けてウェブカラーを表現します。
.red{ color:#FF0000; }
色の英語名で指定する方法
redやblueといった代表的なウェブカラーであれば、ダイレクトに色の名前を書いて指定することができます。
代表的といっても100種類以上は用意されているので、大体の色は表現できます。
CSSでは決められたスペルでウェブカラーの名前を記述するだけです。
.red{ color:red; }