RGB
Updated / Published
RGBとはコンピュータで色を表現する際に用いられる表記法の一つで、R = Red(赤), G = Green(緑), B = Blue(青)の光の三原色を指します。この3色それぞれが256段階の階調をもち、これらを組み合わることで256色×256色×256色 = 1677万7216色の表現が可能です。
HTML や CSS などウェブページにおける色の表現にはRGBを用いる以外に、視覚ブラウザなどの UA が内臓している機能で色を指定するカラーネーム、ユーザのコンピュータが保持しているシステム情報名称で色を指定するシステムカラー、加えて CSS3からはCMYKやHSLで色を指定することができますが、対応状況などから色の指定はもっぱらRGBで行うことになります。
以下、ここではCSSで用いられるRGB値の表し方を紹介します。
16進数で表すRGB値
R・G・B の順に2桁ずつ、合計6桁を16進数で表記する RGB値で指定します。16進数RGB値にはハッシュ（#）を前置することになっています。
16進数とは "0" から "9" までの人間が日常生活で普段から使っている10種類の数字に加え、"A" から "F" までの6種類の文字を数字として用いる表現方法のことです。"A" が10進数で言う "10" に、"B, C, D, E" と続いて、"F" が "15" にあたる数字に対応します。そして、10進数で言う "16" になると、16進数では桁が一つ繰り上がり "10" となります。たとえば、10進数の "26" という値は、16進数では "1A" と表記します。
color:#ff0000;
color:#f00; /*省略型*/なお、R・G・Bの各色2桁の値が同じであれば、1桁を省略して表記することができます。
10進数で表すRGB値
rgb( )の括弧内にR・G・B の順に各色を 0～255 の範囲の10進数で指定し色の段階を表します。また、各色の括弧内の値は、カンマ (,) で区切ります。
background-color:rgb(255,0,0);
background-color:rgb(255,0,0,0.1); /*CSS3は透明度の指定が可能*/CSS3では、最後にカンマ (,)区切りと、0（完全に透明）～1（完全に不透明）の数値で透明度（alpha）を指定できます。
パーセンテージで表すRGB値
rgb( )の括弧内にR・G・B の順に各色を 0%～100% の範囲のパーセンテージで指定し色の段階を表します。また、各色の括弧内の値は、カンマ (,) で区切ります。
background-color:rgb(100%,0,0);
background-color:rgb(100%,0,0,0.1);/*CSS3は透明度の指定が可能*/10進数で表す場合と同様に、CSS3では、最後にカンマ (,)区切りと、0（完全に透明）～1（完全に不透明）の数値で透明度（alpha）を指定できます。