CSSの色
CSSは、140以上の色名、HEX値、RGB値、RGBA値、HSL値、HSLA値、および不透明度をサポートしています。
RGBAカラー
RGBAカラー値は、アルファチャネルを使用したRGBカラー値の拡張です。これは、色の不透明度を指定します。
RGBAカラー値は、rgba(赤、緑、青、アルファ)で指定されます。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(hue、saturation、lightness)で指定されます。
- 色相はカラーホイールの度数です(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色値の拡張です。
HSLAカラー値は、hsla(hue、saturation、lightness、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 */
不透明度
CSSopacity
プロパティは、要素全体の不透明度を設定します(背景色とテキストの両方が不透明/透明になります)。
opacity
プロパティ値は、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;
上記のテキストも透明/不透明になることに注意してください。
次の例は、不透明度のあるさまざまな要素を示しています。
例
#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 */