قيم الألوان المقبولة في CSS

CSS color

يمكن تحديد الألوان في CSS عبر الطريقة التالية:

  • لون العشرية
  • لون HEX الشفاف
  • لون RGB
  • RGBA 颜色
  • HSL 颜色
  • HSLA 颜色
  • 预定义/跨浏览器的颜色名称
  • 使用 currentcolor الكلمات المفتاحية

لون العشرية

استخدم #RRGGBB لتعريف اللون بالعشرية، حيث RR (الأحمر)، GG (الأخضر) و BB (الأزرق) هي أرقام عشرية تقوم بتحديد مكونات اللون (المكونات). يجب أن تكون جميع القيم بين 00 و FF.

على سبيل المثال، القيمة #0000ff تظهر كالأزرق، لأن جزء الأزرق تم ضبطه على أعلى قيمته (ff)، بينما تم ضبط الجزء الآخر على 00.

实例

تعريف ألوان HEX المختلفة:

#p1 {background-color: #ff0000;}   /* الأحمر */
#p2 {background-color: #00ff00;}   /* الأخضر */
#p3 {background-color: #0000ff;}   /* الأزرق */

亲自试一试

لون HEX الشفاف

استخدم #RRGGBB لتعريف اللون بالعشرية. إذا كنت ترغب في زيادة الشفافية، أضف数字ين إضافيين بين 00 و FF.

实例

تعريف لون HEX الشفاف:

#p1a {background-color: #ff000080;}   /* الأحمر الشفاف */
#p2a {background-color: #00ff0080;}   /* الأخضر الشفاف */
#p3a {background-color: #0000ff80;}   /* الأزرق الشفاف */

亲自试一试

لون RGB

قيمة اللون RGB تتكون من وظيفة rgb()规定，语法如下：

rgb(red, green, blue)

كل معامل (red, green, blueتعريف شدة اللون، يمكن أن يكون عدد صحيح بين 0 و 255 أو نسبة مئوية (من 0% إلى 100%).

تزى، فيديو RGB(0,0,255) يكشف عن اللون الأزرق، لأنه تم ضبط المعامل الأزرق على أعلى قيمته (255)، بينما تم ضبط المعامل الآخر على 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);}   /* 蓝色 */

亲自试一试

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

亲自试一试

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

亲自试一试

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

亲自试一试

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

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

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

实例

定义不同的颜色名：

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

亲自试一试

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

currentcolor 关键字

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

实例

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

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

亲自试一试