標準カラー16色とウェブセーフカラー

web

色はサイトの装飾の中でも重要な要素です。サイト製作で使用するウェブセーフカラーと、基本的な色の指定方法について学びましょう。

ウェブセーフカラー

ウェブセーフカラーとは

ウェブサイトは様々なOSやブラウザによって閲覧されます。環境毎にカラーパレットが違うので、指定した色が正確に表現される保障はありません。

そこで環境を問わずに表示される216色を選定したのがウェブセーフカラーです。ウェブサイトで色を指定する場合、ウェブセーフカラーを指定すればほぼ想定通りの色で表現することができます。

色の指定方法

色の指定には16進数指定とRGB指定があります。一般的には16進コードで指定しますが、RGBで指定しても結果は同じです。また標準カラー16色にはキーワード語が用意されており、より直感的に指定することができます。

標準カラー16色
キーワード16進RGB
black#000000RGB(0,0,0)
navy#000080RGB(0,0,128)
blue#0000FFRGB(0,0,255)
green#008000RGB(0,128,0)
teal#008080RGB(0,128,128)
lime#00FF00RGB(0,255,0)
aqua#00FFFFRGB(0,255,255)
maroon#800000RGB(128,0,0)
purple#800080RGB(128,0,128)
olive#808000RGB(128,128,0)
gray#808080RGB(128,128,128)
silver#C0C0C0RGB(192,192,192)
red#FF0000RGB(255,0,0)
fuchsia#FF00FFRGB(255,0,255)
orange#FFA500RGB(255,165,0)
yellow#FFFF00RGB(255,255,0)
white#FFFFFFRGB(255,255,255)

16進数で指定指定

#16進数6桁で指定します。ウェブセーフカラーなどの1・2桁目と3・4桁目と5・6桁目が同じコードの場合、それぞれを纏めて3桁で指定することもできます。

/*6桁で赤色指定*/
p.red{color : #FF0000;}

/*3桁で赤色指定*/
p.red{color : #F00;}

RGBの指定

Red、Green、Blue3色の数値を指定します。赤色の場合は赤を255、緑と青を0で指定します。

p.red{color : RGB(255,0,0);}

標準カラー16色のキーワード指定

標準カラー16色はキーワードが設定されており、色名で指定することができます。 16進数やRGBは見ても何色か分かり難いですが、キーワード指定であれば直感的に分かりやすいのがポイントです。

p.red{color : red;}

アマルウェブ HOME