CSS入門 | CSS基本プロパティ | CSSの色

Tags:

CSSで色を表現する方法には、主に次の3つがある。

  1. 色名で表現
  2. RGB色値で表現
  3. 16進数色値で表現

色名で表現

色名で色を表現できる。 W3Cで定義された16個のHTML4標準色名は次のとおりである。

aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow

HTMLで色名は大文字と小文字を区別しない。

<style>
    .blue { color: blue; }
    .green { color: green; }
    .silver { color: silver; }
</style>

RGB色値で表現

モニターやスクリーンは、赤(Red)、緑(Green)、青(Blue)を混ぜて色を表現する。 そのため、HTMLでもこの3つの色を使って色を表すRGB色を使用する。

RGB色の基本色であるRed、Green、Blueは、それぞれ0から255までの範囲を持つ。

<style>
    .blue { color: rgb(0,0,255); }
    .green { color: rgb(0,128,0); }
    .silver { color: rgb(192,192,192); }
</style>

16進数色値で表現

16進数色値は、RGB色値をそれぞれ16進数に変換したものである。 したがって、RGB色の基本色であるRed、Green、Blueは、それぞれ00からFFまでの範囲を持つ。

たとえば、緑を表すRGB色値rgb(0,255,0)は、16進数色値では#00FF00になる。

<style>
    .blue { color: #0000FF; }
    .green { color: #008000; }
    .silver { color: #C0C0C0; }
</style>

CSS3の色

CSS3で新しく追加された色の表現方法は次のとおりである。

  1. RGBA色値で表現
  2. HSL色値で表現
  3. HSLA色値で表現
  4. opacityプロパティ

CSS3で追加された色値とopacityプロパティの対応バージョン

CSS3で追加された色値とopacityプロパティをサポートする主なWebブラウザーのバージョンは次のとおりである。

プロパティ ie chrome firefox safari opera
RGBA色値、HSL色値、HSLA色値 9.0 4.0 3.0 3.1 10.1
opacity 9.0 4.0 2.0 3.1 10.1

RGBA色値で表現

RGBA色値は、RGB色値にアルファチャンネル値を加えた色値である。

アルファチャンネルとは、色の透明度を表すチャンネルである。 アルファチャンネル値は、完全に透明な0.0から透明度がまったくない1.0までの値を持つ。

<style>
    #header_01 {background-color: rgba(0,255,0,0);}
    #header_02 {background-color: rgba(0,255,0,0.2);}
    #header_03 {background-color: rgba(0,255,0,0.4);}
    #header_04 {background-color: rgba(0,255,0,0.6);}
    #header_05 {background-color: rgba(0,255,0,0.8);}
    #header_06 {background-color: rgba(0,255,0,1);}
</style>

HSL色値で表現

HSL色値は、光の三原色で色を表すRGB色値とは異なり、色相、彩度、明度を使って色を表現する。 HSL色値のHSLは、それぞれHue、Saturation、Lightnessを意味する。

色相は0から360までの値を持ち、色相環の角度を表す。 色相値が0または360なら赤、120なら緑、240なら青になる。

<style>
    #header_01 {background-color: hsl(0, 100%, 50%);}
    #header_02 {background-color: hsl(90, 100%, 50%);}
    #header_03 {background-color: hsl(180, 100%, 50%);}
    #header_04 {background-color: hsl(270, 100%, 50%);}
    #header_05 {background-color: hsl(360, 100%, 50%);}
</style>

彩度は0%から100%までの値を持ち、色の淡さや濃さを表す。 彩度値が0%なら灰色になり、100%なら本来の色になる。

<style>
    #header_01 {background-color: hsl(0, 0%, 50%);}
    #header_02 {background-color: hsl(0, 20%, 50%);}
    #header_03 {background-color: hsl(0, 40%, 50%);}
    #header_04 {background-color: hsl(0, 60%, 50%);}
    #header_05 {background-color: hsl(0, 80%, 50%);}
    #header_06 {background-color: hsl(0, 100%, 50%);}
</style>

明度は0%から100%までの値を持ち、色の明るさや暗さを表す。 明度値が0%なら黒、50%なら本来の色、100%なら白になる。

<style>
    #header_01 {background-color: hsl(0, 100%, 0%);}
    #header_02 {background-color: hsl(0, 100%, 20%);}
    #header_03 {background-color: hsl(0, 100%, 40%);}
    #header_04 {background-color: hsl(0, 100%, 50%);}
    #header_05 {background-color: hsl(0, 100%, 60%);}
    #header_06 {background-color: hsl(0, 100%, 80%);}
    #header_07 {background-color: hsl(0, 100%, 100%);}
</style>

HSLA色値で表現

HSLA色値は、HSL色値にアルファチャンネル値を加えた色値である。

<style>
    #header_01 {background-color: hsla(0, 100%, 50%, 0);}
    #header_02 {background-color: hsla(0, 100%, 50%, 0.2);}
    #header_03 {background-color: hsla(0, 100%, 50%, 0.4);}
    #header_04 {background-color: hsla(0, 100%, 50%, 0.6);}
    #header_05 {background-color: hsla(0, 100%, 50%, 0.8);}
    #header_06 {background-color: hsla(0, 100%, 50%, 1);}
</style>

opacityプロパティ

opacityプロパティは、色の透明度を設定する。 opacityプロパティ値は、完全に透明な0.0から透明度がまったくない1.0までの値を持つ。

<style>
    #header_01 {background-color: rgb(0,255,0); opacity:0}
    #header_02 {background-color: rgb(0,255,0); opacity:0.2}
    #header_03 {background-color: rgb(0,255,0); opacity:0.4}
    #header_04 {background-color: rgb(0,255,0); opacity:0.6}
    #header_05 {background-color: rgb(0,255,0); opacity:0.8}
    #header_06 {background-color: rgb(0,255,0); opacity:1}
</style>

opacityプロパティとアルファチャンネルの違い

上で見たopacityプロパティとアルファチャンネルは、どちらも透明度を調整するという共通点を持つ。

opacityプロパティは、透明度を設定した要素のすべての子要素まで同じ透明度にする。 しかし、アルファチャンネルは透明度を設定した要素だけに透明度を設定するという違いがある。

次の例は、opacityプロパティとアルファチャンネルの違いを示す。

<style>
    #para_01 {background-color: rgb(255,0,0); opacity:0}
    #para_06 {background-color: rgb(255,0,0); opacity:1}
    #para_07 {background-color: rgba(255,0,0,0);}
    #para_12 {background-color: rgba(255,0,0,1);}
</style>