Webサイトの雰囲気やイメージを決めるのに「色」は非常に重要な要素であるというだけではなく、背景色とテキストの色のコントラストが、文字の視認性や読み易さを左右することにもなります。デザイン性だけでなくアクセシビリティや、目への優しさなども考慮したWebサイトにするためにも適切な色を指定することを心がける必要があるでしょう。

HTMLでマークアップされただけのドキュメントでは基本的には白い背景に黒い文字色の表現になり、文字や背景の色を変更するためにはCSSで指定することになります。

Webで色を扱う上での基礎的な知識とともに文字や背景に色を設定する方法について解説します。

文字や背景に色を付けるプロパティ

文字色はcolorプロパティを、背景色はbackground-colorプロパティを使って指定することができます。

div {
    background-color : 色を指定する値;
    color : 色を指定する値;
}

色を指定する値には具体的な色を表す「キーワード」、 RGBの3つの色の成分を16進数で表す 「カラーコード」、RGBを0〜255の数値で指定する「rgb関数」、または「rgba関数」などを設定することができます。

Webで使用するRGBの基礎知識

CSSでの色指定の方法について見る前に、コンピュータで色を指定するときに使用する表現形式「RGB」について理解しておきましょう。

RGBとは、Red（レッド・赤）・Green（グリーン・緑）・Blue（ブルー・青）の頭文字をとった「光の三原色」のことで、この三つの原色の光の成分を混ぜてさまざまな色を再現する色の表現法のことです。3色の光の強さ（発光量）をそれぞれどれくらい混ぜるのかで色を表現します。
RGBは主にテレビ、パソコン、スマートフォンなどのスクリーンモニターの色を光で表現するために使われます。

RGBのそれぞれの色は「0～255」の256段階の強さ（明度）で表現され最小（もっとも暗い）は0、最大（もっとも明るい）は255となります。

光の3原色の原理は、RGBの各光を混ぜるほど明るくなることから「加法混色」と呼ばれています。

RGB各色が256通りで表されるので、この3色を組み合わにより「256×256×256」で16,777,216通りの色が表せることになります。

このRGBの3色で組み合わせでできる約1677万色のことを「フルカラー」といいます。

CSSでの色の指定方法

CSSでは色の値を指定する方法が3種類あります。

カラーコードで色を指定

6桁の16進数で表されるカラーコードで色を指定する方法は、R（赤）、G（緑）、B（青）の3色の強さを00～FF までの範囲で表します。

色を指定するにはRGB各色の強さを表現するために16進数では、0、1、2、3、4、5、6、7、8、9、a、b、c、d、fというように、0～fまでの16種類の英数字を使って表します。16進数では1桁あたり16あるといことですね。2桁の16進数で表すことで、RGBの各色を16×16で256通りの色の段階を表現できることになります。

カラーコードでは、「#（ハッシュ）」を先頭に付けて「RRGGBB」というように記述します。

次のコードはp要素にcolorプロパティを使って文字色を、background-colorプロパティを使って背景色を、それぞれ16進数で指定しています。

<p>文字色は colorプロパティ、背景色は background-colorプロパティを使って色を指定します。</p>

p {
    background-color: #FF0000; /* 赤色 */
    color: #FFFFFF; /* 白色 */
}

RGBの色の値をrgb関数で指定

rgb関数で色を指定するには、rgb(R, G, B)の書式で記述します。16進数のカラーコードと違い、RGB各色の強さを256段階に表すのに10進数（0～255）が使用されることです。

p {
    background-color: rgb(255, 0, 0); /* 赤色 */
    color: rgb(255, 255, 255); /* 白色 */
}

CSS3では新たに追加された、rgba関数で指定する色と透明度をを同時に指定する方法があります。rgba関数で色を指定するには、rgb(R, G, B, A) の書式で記述します。RGBでの指定方法と似ていますが、最後のAは透過度（アルファ値）を指定することができます。透過度は0～1.0で表現され、0が透明あり、1が不透明になります。例えば、0.5を指定すると、50%の透過度になります。

<div class="alpha100">背景色の透過度1（完全に不透明）</div>
<div class="alpha50">背景色の透過度0.5（透明度50%）</div>
<div class="alpha0">背景色の透過度0（完全に透明）</div>

.alpha100 {
    background-color: rgba(255, 0, 0, 1.0); /* 完全に不透明 */
}
.alpha50 {
    background-color: rgba(255, 0, 0, 0.5); /* 透明度50% */
}
.alpha10 {
    background-color: rgba(255, 0, 0, 0.0); /* 完全に透明 */
}

カラーキーワードで色を指定

定義された、つまり決められた色（RGB値）を持つ色の名前「カラーキーワード」で指定する方法です。例えばred、blue、black、yellowといったもので、色名はそれぞれの色を表すわかり易い名前です。カラーキーワードは大文字と小文字の区別をしません。

カラーキーワードの一覧

div {
    background-color: lime; /* ライムグリーン */
}

transparentキーワード

「transparent」は透明色を表すキーワードです。transparentを指定されると色は透明になり背後の要素の背景が見えるようになります。これはアルファチャンネルの値が最大値（1.0）の黒色（#000000）である 「rgba(0, 0 ,0 , 0.0)」と指定されているのと同じになります。

div {
    background-color: transparent;
}