CSS 颜色

CSS 中的 `color` 属性用于设置 HTML 元素的颜色。通常，此属性用于设置元素的背景颜色或字体颜色。

在 CSS 中，我们使用颜色值来指定颜色。我们也可以将此属性用于边框颜色和其他装饰效果。

我们可以通过以下方式定义元素的颜色

• RGB 格式。
• RGBA 格式。
• 十六进制表示法。
• HSL。
• HSLA。
• 内置颜色。

让我们详细了解以上方法的语法和描述。

RGB 格式

RGB 格式是“红色、绿色和蓝色”的缩写，用于通过简单地指定 R、G、B 的值来定义 HTML 元素的颜色，这些值范围在 0 到 255 之间。

此格式的颜色值通过 `rgb()` 属性指定。此属性允许三个值，可以是百分比或整数（范围从 0 到 255）。

此属性并非所有浏览器都支持；因此，不建议使用它。

语法

RGBA 格式

它几乎与 RGB 格式相同，除了 RGBA 包含 A（Alpha），它指定了元素的透明度。Alpha 的值范围在 **0.0 到 1.0** 之间，其中 **0.0** 表示完全透明，**1.0** 表示不透明。

语法

十六进制表示法

十六进制可以定义为六位数的颜色表示。这种表示法以 **# 符号**开头，后跟从 **0 到 F** 的六个字符。在十六进制表示法中，前两位数字表示红色 (RR) 颜色值，接下来的两位数字表示绿色 (GG) 颜色值，最后两位数字表示蓝色 (BB) 颜色值。

十六进制表示法中的黑色是 #000000，白色是 #FFFFFF。十六进制表示法中的一些代码是 #FF0000、#00FF00、#0000FF、#FFFF00 等等。

语法

简短十六进制代码

它是十六进制表示法的简写形式，其中每个数字都经过重新创建以得到等效的十六进制值。

例如，#7B6 在十六进制中变为 #77BB66。

简短十六进制中的黑色是 #000，白色是 #FFF。简短十六进制中的一些代码是 #F00、#0F0、#0FF、#FF0 等等。

HSL

它是色相、饱和度和亮度的缩写。让我们分别了解它们。

色相：它可以定义为色轮上的度数，从 0 到 360。0 代表红色，120 代表绿色，240 代表蓝色。

饱和度：它的值以百分比表示，其中 100% 表示完全饱和，即没有灰色阴影；50% 表示 50% 灰色，但颜色仍然可见；0% 表示完全不饱和，即完全灰色，颜色不可见。

亮度：颜色的亮度可以定义为我们想要为颜色提供的亮度，其中 0% 表示黑色（没有光），50% 表示既不暗也不亮，100% 表示白色（完全亮度）。

让我们看看颜色属性中 HSL 的语法。

语法

HSLA

它与 HSL 属性完全相同，只是它包含 A（Alpha），用于指定元素的透明度。Alpha 的值范围在 **0.0 到 1.0** 之间，其中 **0.0** 表示完全透明，**1.0** 表示不透明。

语法

内置颜色

顾名思义，内置颜色是指通过使用诸如 red、blue、green 等名称来使用的预定义颜色集合。

语法

让我们看看内置颜色列表及其十进制值和十六进制值。

下面是包含上述属性的 CSS 颜色说明的图示。

示例