CSS: 色の指定方法

CSSでを指定する方法は、 RGB色名が一般的に使用されています。

これらの方法に加えてCSS3では新たにRGBA、HSL、HSLA、CurrentColor という方法が追加されました。 一方、これまで使用できていたシステムカラーによる指定はCSS3では非推奨となっています。

では RGB から見ていきます。

RGB

RGB は、赤(red)、緑(green)、青(blue)のそれぞれの頭文字をとったものです。
RGBで指定する方法は、「#rrggbb」、「#rgb」、「#rgb(n, n, n)」、「#rgb(n%, n%, n%)」の4通りあります。

#rrggbb
「#」の後に赤(red)、緑(green)、青(blue)のそれぞれの値を「00~ff」の間で16進数で2桁ずつ、合計6桁で指定します。
(例: #00ff11)
#rgb
「#」の後に赤(red)、緑(green)、青(blue)のそれぞれの値を「0~f」の間で16進数で1桁ずつ、合計3桁で指定します。 この方法では、rgbのそれぞれの数値を繰り返した値に変換されます。
(例: #0f1 --> これは #00ff11 に変換されます。)
rgb(n, n, n)
()カッコの中に赤(red)、緑(green)、青(blue)のそれぞれの値を「0~255」の間で10進数で指定します。
(例: rgb(0, 0, 255) )
rgb(n%, n%, n%)
()カッコの中に赤(red)、緑(green)、青(blue)のそれぞれの値を「0~100」の間でパーセンテージで指定します。
(例: rgb(0%, 0%, 100%) )

RGBA

上記のRGBの後に透明度を表すアルファ値を加えた方法です。

透明度は「0.0 ~ 1.0」の間で指定し、 0.0 が透明、0.5 が半透明、1.0 が不透明(通常表示)となります。 透明度は 16進数での指定はできないので、「rgb(n, n, n, a)」、 「rgb(n%, n%, n%, a)」の2通りの方法になります。

rgb(n, n, n, a)
rgb(10進数指定)の後に透明度を表すアルファ値を指定します。
(例: rgb(0, 0, 255, 0.5) )
rgb(n%, n%, n%, a)
rgb(パーセンテージ指定) の後に透明度を表すアルファ値を指定します。
(例: rgb(0%, 0%, 100%, 0.5) )

HSL


HSLA


currentColor

該当要素の color プロパティに指定されている色を指定します。 例えば、文字色とボーダーの枠線色を同じにしたい時に使うと便利です。

色名

「white」や「black」等の色名で指定します。大文字と小文字は区別されません。

CSS2.1 では基本色として17色が定義されていましたが、 大幅に追加され、CSS3 では 147色が定義されました。

ただし、ブラウザによっては表示されない色もありますので注意が必要です。

HTML・CSS入門