CSS カラー

CSSサポート 140種類以上の色名、十六進値、RGB値、RGBA値、HSL値、HSLA値および不透明度を含みます。

RGBA色

RGBA色値はRGB色値の拡張で、アルファチャンネルを持ちます - このチャンネルは色の不透明度を定義します。

RGBA色値は以下のように定義されています：rgba(red, green, blue, アルファ) アルファ パラメータは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);}  /* 透明度のある赤 */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* 透明度のある緑 */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* 透明度のある青 */

自分で試してみる

HSL色

HSLとは色相、彩度、明るさ（Hue、SaturationおよびLightness）を指します。

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%);}  /* 緑色 */
#p2 {background-color: hsl(120, 100%, 75%);}  /* 薄い緑色 */
#p3 {background-color: hsl(120, 100%, 25%);}  /* 濃い緑色 */
#p4 {background-color: hsl(120, 60%, 70%);}   /* 淡い緑色 */

自分で試してみる

HSLA 項目

HSLA 項目値は、Alpha チャンネルを含む 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);}  /* 透明度のある緑色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 透明度のある薄い緑色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 透明度のある濃い緑色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* 透明度のある淡い緑色 */

自分で試してみる

不透明度

CSS opacity 属性は、整个要素の不透明度を設定します（背景色とテキストも不透明/透明になります）。

opacity 属性値は、0.0（完全透明）と1.0（完全不透明）の間の数字でなければなりません。

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

上記のテキストも透明/不透明になります！

以下の例では、透明度を持つ異なる要素が表示されます：

例

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 透明度を持つ赤 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 透明度を持つ緑 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 透明度を持つ青 */

自分で試してみる