CSS3 色(Color)

CSS3新しい色値の定義方法がいくつか提供されています。

では3で色を定義する方法を学びました。

前節では、colorキーワードとRGB表現法色を定義します。これに加えてCSS3新しい機能シンボルrgba()、hsl()、hsla()が要素の色値設定に追加されました。

以下の部分では、これらの色モデルについて一つずつ説明します。

RGBA色値

RGBAモデル（赤色-緑色-青色-alpha）で色を定義します。RGBA色モデルはAlphaチャンネルを持つRGB色モデルの拡張で、不透明度を指定するために使用されます。

alphaパラメータは0.0（完全透明）から1．0（完全不透明）の値です。

h1　{
　　　　color:　rgba(0,0,255,0.5);
}
p　{
　　　　background-color:　rgba(0%,0%,100%,0.3);
}

HSL色値

色はまたhsl()機能シンボルを使用してHSLモデル（色相）-鮮度-0）。色相は色車や円（つまり円で表現された虹）の角度（0から360）。この角度はより少ない単位で与えられますが、角度は通常度で測定されるため、単位はCSSに含まれています。

鮮度と明度はパーセントで表示されます。100%の鮮度は全彩を示し、0%は灰色の影です。しかし、100%の明度は白色で、0%の明度は黑色です。50%の明度は通常です。以下の例を確認してください：

h1　{
　　　　color:　hsl(360,70%,60%);
}
p　{
　　　　background-color:　hsl(480,50%,80%);
}

HSLA色値

hsla()機能シンボルを使用してHSLAモデル（色相鮮度）-明度-alpha）で色を定義します。HSLA色モデルはAlphaチャンネルを持つHSL色モデルの拡張で、Alphaチャンネルは色の不透明度を指定します。

alphaパラメータは0.0（完全透明）から1．0（完全不透明）の値です。

h1　{
　　　　color:　hsla(360,80%,50%,0.5);
}
p　{
　　　　background-color:　hsla(480,60%,30%,0.3);
}