前端必知必会-CSS颜色Color

---

CSS 颜色

颜色使用预定义的颜色名称或 RGB、HEX、HSL、RGBA、HSLA 值指定。

CSS 颜色名称

在 CSS 中，可以使用预定义的颜色名称指定颜色：

CSS/HTML 支持 140 种标准颜色名称。

CSS 背景颜色

您可以设置 HTML 元素的背景颜色：

示例

<h1 style="background-color:DodgerBlue;">Hello World</h1> 
<p style="background-color:Tomato;">Lorem ipsum...</p> 

CSS 文本颜色

您可以设置文本颜色：

示例

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS 边框颜色

您可以设置边框的颜色：

示例

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS 颜色值

在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值和 HSLA 值指定颜色：

与颜色名称“Tomato”相同：
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

与颜色名称“Tomato”相同，但透明度为 50%：
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

示例

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);"...</h1>

CSS RGB 颜色

RGB 颜色值代表红色、绿色和蓝色光源。

在 CSS 中，可以使用以下公式将颜色指定为 RGB 值：

rgb(红色、绿色、蓝色)

每个参数（红色、绿色和蓝色）定义颜色的强度，范围在 0 到 255 之间。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为其最高值 (255)，其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。

通过混合以下 RGB 值进行实验：

灰色阴影通常使用所有 3 个光源的相等值来定义：

示例

CSS RGBA 颜色

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

RGBA 颜色值指定为：

rgba(红色、绿色、蓝色、alpha)

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

通过混合以下 RGBA 值进行实验：

CSS HEX 颜色

十六进制颜色用以下代码指定：#RRGGBB，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的组成部分。

HEX 值
在 CSS 中，可以使用以下形式的十六进制值指定颜色：

#rrggbb

其中 rr（红色）、gg（绿色）和 bb（蓝色）是 00 到 ff（与十进制 0-255 相同）之间的十六进制值。

例如，#ff0000 显示为红色，因为红色设置为最高值（ff），而其他设置为最低值（00）。

要显示黑色，请将所有值设置为 00，如下所示：#000000。

要显示白色，请将所有值设置为 ff，如下所示：#ffffff。

通过混合以下十六进制值进行实验：

灰色阴影通常使用所有 3 个光源的相等值来定义：

示例

3 位十六进制值

3 位十六进制代码是一些 6 位十六进制代码的简写。

3 位十六进制代码的形式如下：

#rgb

其中 r、g 和 b 分别代表红、绿和蓝分量，值介于 0 和 f 之间。

仅当每个分量的值（RR、GG 和 BB）相同时，才可使用 3 位十六进制代码。因此，如果我们有 #ff00cc，则可以这样写：#f0c。

示例

body {
background-color: #fc9; /* 与 #ffcc99 相同 */
}

h1 {
color: #f0f; /* 与 #ff00ff 相同 */
}

p {
color: #b58; /* 与 #bb5588 相同 */
}

CSS HSL 颜色

HSL 代表色调、饱和度和亮度。

在 CSS 中，可以使用色调、饱和度和亮度 (HSL) 指定颜色，形式如下：

hsl(色调、饱和度、亮度)

色调是色轮上的度数，范围从 0 到 360。0 表示红色，120 表示绿色，240 表示蓝色。

饱和度是一个百分比值。0% 表示灰色，100% 表示全色。

亮度也是一个百分比。 0% 为黑色，50% 既不亮也不暗，100% 为白色

通过混合以下 HSL 值进行实验：

示例

饱和度
饱和度可以描述为颜色的强度。

100% 为纯色，没有灰色阴影。

50% 为 50% 灰色，但您仍然可以看到颜色。

0% 完全是灰色；您再也看不到颜色了。

示例

亮度
颜色的亮度可以描述为您想要赋予颜色多少亮度，其中 0% 表示无亮度（黑色），50% 表示 50% 亮度（既不暗也不亮），100% 表示全亮度（白色）。

示例

灰色阴影
灰色阴影通常通过将色调和饱和度设置为 0 来定义，并将亮度从 0% 调整到 100% 以获得更深/更浅的阴影：

示例

HSLA 值
HSLA 颜色值是 HSL 颜色值的扩展带有 alpha 通道 - 指定颜色的不透明度。

HSLA 颜色值指定为：

hsla(色调、饱和度、亮度、alpha)

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

通过混合以下 HSLA 值进行实验：

示例

---

总结

本文介绍了的CSS颜色Color使用，如有问题欢迎私信和评论