<color>

<color>

用語の簡単な解説

色の値<color>は、キーワードかRGB数値のどちらかで指定します。

キーワードによる色指定

キーワードになる色名は以下の通り。

aqua
水色
black
blue
fuchsia
ピンク
gray
灰色
green
lime
黄緑
maroon
暗い赤
navy
暗い青
olive
オリーブ
purple
赤紫
red
silver
銀(grayより明るい灰色)
teal
青緑
white
yellow
黄色
h1 { color: red }

これら以外にも、各ユーザ環境で特定のオブジェクトに用いられている色は、対応したキーワードを用いて指定できます(システム色?)。

また最近のUAには、上の16色の他にも色指定が可能なキーワードが124色分用意されていることがありますが、このキーワードによって出力される色は環境によって左右されますのでここでは割愛します。

RGB数値による色指定

色を数値で指定する場合にはRGB色モデルという値を用います。

書法には4通りが存在し、次の例はどれも同じ赤色を表します。

h1 { color: #f00 }              /* #rgb [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f] */
h1 { color: #ff0000 }           /* #rrggbb [00 - ff]  */
h1 { color: rgb(255,0,0) }      /* integer range 0 - 255 */
h1 { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

RGBは、それぞれR=赤(Red)、G=緑(Green)、B=青(Blue)という光の三原色に対応しています。

数値の指定はどれだけその色を出力するかであると考えてください。

光の三原色は全ての色を出力すると白になり、全ての色を出力しなければ黒になります。

例えば#ffffffやrgb(255,255,255)は白、#000000やrgb(0,0,0)は黒を表します。

基本的にRGB値の差が近いほど彩度が減少し、差が大きいほど彩度が増します。

RGB値が等しい
モノクロ
RG値が近く、B値より大きい
黄色系
RB値が近く、G値より大きい
紫系
GB値が近く、R値より大きい
青緑系

また#000・#000000形式の指定の際、それぞれ0・3・6・9・c・f、00・33・66・99・ccffという数値のみで指定された6*6*6の216色をWebセーフカラーといい、この色を使ったページ制作が推奨されています。

この値を使用するプロパティ

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。