CSS3 色

CSS3 色

CSS は、色名、16進数、RGB をサポートしています。

さらに、CSS3 では次の指定も加えられました：

• RGBA カラー
• HSL カラー
• HSLA カラー
• opacity

ブラウザ・サポート

表中の数字は、完全にCSS3 色の値/プロパティをサポートした最初のブラウザのバージョンです。

RGBA カラー

RGBA カラー値は、色の不透明度を指定するαチャンネルによって、RGB カラー値を拡張したものです。

RGBA カラー値は、次のように指定します：rgba(red, green, blue, alpha)。 alpha パラメータは、0.0（完全に透明）から 1.0（完全に不透明）の間の数です。

次の例は、いろいろな RGBA カラーを定義しています：

HSL カラー

HSL は、Hue（色相）、Saturation（彩度）および Lightness（明度）の略です。

>HSL カラー値は、次のように指定します：hsl(hue, saturation, lightness)。

1. Hue（色相）は、カラーホイールの角度（0 ～ 360）です：
   • 0 (または 360) は赤色
   • 120 は緑色
   • 240 は青色
2. Saturation（彩度）の値はパーセントです：100% がフルカラーです。
3. Lightness（明度）の値もパーセントです： 0％ は、暗い（黒）で、100％ は白です。

次の例は、いろいろな HSL カラーを定義しています：

HSLA カラー

HSLA カラー値は、色の不透明度を指定するαチャンネルによって、HSL カラー値を拡張したものです。

HSLA カラー値は、次のように指定します：hsla(hue, saturation, lightness, alpha)。ここで、alpha パラメータは不透明度を定義します。 alpha パラメータは、0.0（完全に透明）から 1.0（完全に不透明）の間の数です。

次の例は、いろいろな HSLA カラーを定義しています：

Opacity（不透明度）

CSS3 opacity プロパティは、指定した RGB 値の不透明度を設定します。

opacity プロパティ値は、0.0（完全に透明）から 1.0（完全に不透明）の間の数字でなければなりません。

上では、テキストも不透明になることに注意してください。

次の例は、opacity を持つ、いろいろな RGB 値を表示します：

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯