nilai warna yang sah dalam CSS

Warna CSS

warna dalam CSS dapat ditentukan dengan cara berikut:

  • warna heksadesimal
  • warna HEX dengan kehalusan
  • warna RGB
  • RGBA 颜色
  • HSL 颜色
  • HSLA 颜色
  • 预定义/跨浏览器的颜色名称
  • 使用 currentcolor kata kunci

warna heksadesimal

untuk menentukan warna hexapen, di mana RR (merah), GG (hijau) dan BB (biru) adalah bilangan bulat heksadesimal yang menentukan komponen warna (komponen). Semua nilai mesti berada di antara 00 hingga FF.

contoh, nilai #0000ff dipaparkan warna biru, kerana komponen biru diatur ke nilai tertinggi (ff), sementara komponen lain diatur ke 00.

实例

mengdefinikan warna HEX yang berbeza:

#p1 {background-color: #ff0000;}   /* merah */
#p2 {background-color: #00ff00;}   /* hijau */
#p3 {background-color: #0000ff;}   /* biru */

Coba sendiri

warna HEX dengan kehalusan

untuk menambahkan kehalusan, tambahkan dua angka ekstra di antara 00 dan FF.

实例

mengdefinikan warna HEX dengan kehalusan:

#p1a {background-color: #ff000080;}   /* merah dengan kehalusan */
#p2a {background-color: #00ff0080;}   /* hijau dengan kehalusan */
#p3a {background-color: #0000ff80;}   /* biru dengan kehalusan */

Coba sendiri

warna RGB

nilai warna RGB disusun oleh fungsi rgb()规定，语法如下：

rgb(red, green, blue)

setiap parameter (red, green, blue）menentukan kekuatan warna, boleh jadi bilangan bulat antara 0 hingga 255 atau persen (dari 0% hingga 100%).

contoh, nilai rgb(0,0,255) dipaparkan warna biru, kerana parameter blue diatur ke nilai tertinggi (255), sementara parameter lain diatur ke 0.

此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

实例

定义不同的 RGB 颜色：

#p1 {background-color: rgb(255, 0, 0);}   /* 红色 */
#p2 {background-color: rgb(0, 255, 0);}   /* 绿色 */
#p3 {background-color: rgb(0, 0, 255);}   /* 蓝色 */

Coba sendiri

RGBA 颜色

RGBA 颜色值是 RGB 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

RGBA 颜色通过 rgba() 函数规定，语法如下：

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

定义带有不透明度的不同 RGB 颜色：

#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);}   /* 带不透明度的蓝色 */

Coba sendiri

HSL 颜色

HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。

使用 hsl() 函数指定 HSL 颜色值，该函数的语法如下：

hsl(hue, saturation, lightness)

色相是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。

饱和度是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。

亮度也是一个百分比； 0％ 是黑色，100％ 是白色。

实例

定义不同的 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%);}    /* 柔和的绿色 */

Coba sendiri

HSLA 颜色

HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

定义带有不透明度的不同 HSL 颜色：

#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);}    /* 带不透明度的柔绿色 */

Coba sendiri

预定义/跨浏览器的颜色名称

HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。

例如：blue、red、coral、brown 等：

实例

定义不同的颜色名：

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Coba sendiri

所有预定义名称的列表都可以在我们的 颜色名称参考手册 中找到。

currentcolor 关键字

currentcolor 关键字引用元素的 color 属性值。

实例

以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

Coba sendiri