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

web

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

ウェブセーフカラー

ウェブセーフカラーとは

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

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

色の指定方法

色の指定には16進数指定とRGB指定があります。一般的には16進コードで指定しますが、RGBで指定しても結果は同じです。また標準カラー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進数で色を指定

CSSでは色を基本的に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進数やRGBは見ても何色か分かり難いですが、キーワード指定であれば直感的に分かりやすいのがポイントです。

p.red{
  color:red;
}

どれで指定しても問題ありませんが、可読性を考えていずれかに統一した方が良いでしょう。

\share/

  • hatebu
  • line

よく読まれている記事

HOME