CSS 顏色

CSS 支持 140 多種顏色名稱，以及十六進制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度。

RGBA 顏色

RGBA 顏色值是 RGB 顏色值的擴展，帶有 alpha 通道 - 該通道規定顏色的不透明度。

RGBA 顏色值是這樣規定的：rgba(red, green, blue, 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);}  /* 帶不透明度的紅色 */
#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;}  /* 帶不透明度的藍色 */

親自試一試