CSS3の色
CSSは、色名、16進数表現のRGBカラーをサポートしています。
また、CSS3も導入されています。
- RGBA色
- HSL色
- HSLAの色
- 不透明度
ブラウザのサポート
表中の数字は完全にCSS3カラー値/プロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| RGBA, HSL, and HSLA | 4.0 | 9.0 | 3.0 | 3.1 | 10.1 |
| 不透明度 | 4.0 | 9.0 | 2.0 | 3.1 | 10.1 |
RGBA色
RGBAカラー値を持つRGBカラー値の拡張であるalpha色の不透明度を指定します-チャネル。
RGBA（赤、緑、青、：RGBA色値で指定されているalpha ）。 alphaパラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数です。
RGBA（255、0、0、0.2）。
RGBA（255、0、0、0.4）。
RGBA（255、0、0、0.6）。
RGBA（255、0、0、0.8）。
次の例では、異なるRGBA色を定義します。
例
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
»それを自分で試してみてください HSL色
HSLは、色相、彩度、明度の略です。
HSL（色相、彩度、明度）：HSLカラー値がで指定されています。
- フエ（0から360まで）、カラーホイール上程度です。
- 0（または360）は赤です
- 120は緑色です
- 240は青です
- 彩度は、パーセント値である100％がフルカラーです。
- 明度もパーセンテージです。 0％は、暗い（黒）であり、100％は白です。
HSL（0、100％、30％）。
HSL（0、100％、50％）。
HSL（0、100％、70％）。
HSL（0、100％、90％）。
次の例では、異なるHSL色を定義します。
例
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
»それを自分で試してみてください HSLAの色
HSLAの色の値が付きHSLカラー値の拡張であるalpha色の不透明度を指定します-チャネル。
HSLA（色相、彩度、明度、：HSLAの色の値がで指定されているalpha ）、 alphaパラメータは不透明度を定義します。 alphaパラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数です。
HSLA（0、100％、30％、0.3）。
HSLA（0、100％、50％、0.3）。
HSLA（0、100％、70％、0.3）。
HSLA（0、100％、90％、0.3）。
次の例では、異なるHSLAの色を定義します。
例
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
»それを自分で試してみてください 不透明度
CSS3の不透明度プロパティが指定されたRGB値の不透明度を設定します。
不透明プロパティ値が0.0（完全に透明）から1.0（完全に不透明）の間の数字でなければなりません。
RGB（255、0、0）;不透明度：0.2。
RGB（255、0、0）;不透明度：0.4。
RGB（255、0、0）;不透明度：0.6。
RGB（255、0、0）;不透明度：0.8。
上記のテキストにも不透明になることに注意してください。
次の例では、不透明度が異なるRGB値を示しています。
例
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */
»それを自分で試してみてください