颜色

CSS 播客 - 006：颜色（第一部分）

颜色是任何网站的重要组成部分，CSS 中提供了许多颜色类型、函数和处理选项。

如何确定要使用哪种颜色类型？如何使颜色呈半透明状态？ 在本课程中，您将了解有哪些选项可帮助您为项目和团队做出正确的决策。

CSS 具有各种不同的数据类型，例如字符串和数字。颜色就是其中一种类型，它会使用其他类型（例如数字）来进行自身定义。

数字颜色

您很可能最早接触 CSS 颜色时是通过数字颜色。我们可以使用几种不同形式的数值颜色值。

十六进制颜色

h1 {
  color: #b71540;
}

十六进制表示法（通常简称为十六进制）是 RGB 的简写语法，用于为红色、绿色和蓝色（这三种颜色是原色）分配数字值。

十六进制范围为 0-9 和 A-F。在六位数序列中使用时，这些值会转换为 0-255 的 RGB 数值范围，分别对应于红色、绿色和蓝色通道。

您还可以使用任何数字颜色定义 alpha 值。Alpha 值是透明度的百分比。在十六进制代码中，您需要在六位数序列中再添加两个数字，使其成为八位数序列。例如，如需以十六进制代码设置黑色，请写入 #000000。如需添加 50% 的透明度，请将其更改为 #00000080。

由于十六进制标度为 0-9 和 A-F，因此透明度值可能与您预期的不太一致。以下是添加到黑色十六进制代码 #000000 的一些关键常用值：

• 完全透明的 Alpha 值为 0%（即 00）：#00000000
• 50% 的 Alpha 值为 80：#00000080
• 75% 的 Alpha 值为 BF：#000000BF

如需将两位十六进制数转换为十进制数，请取第一个数字并将其乘以 16（因为十六进制数以 16 为基数），然后再加上第二个数字。以 BF 为例，假设 alpha 为 75%：

1. B 等于 11，11 乘以 16 等于 176
2. F 等于 15
3. 176 + 15 = 191
4. 透明度值为 191，即 255 的 75%

RGB（红色、绿色、蓝色）

h1 {
  color: rgb(183, 21, 64);
}

RGB 颜色是使用 rgb() 颜色函数定义的，使用数字或百分比作为参数。数字需要在 0-255 范围内，百分比则需要介于 0% 到 100% 之间。RGB 采用 0-255 的比例，因此 255 相当于 100%，0 相当于 0%。

如需在 RGB 中设置黑色，请将其定义为 rgb(0 0 0)，即红色、绿色和蓝色均为零。黑色也可以定义为 rgb(0%, 0%, 0%)。白色则恰恰相反：rgb(255, 255, 255) 或 rgb(100%, 100%, 100%)。

您可以通过以下两种方式之一在 rgb() 中设置 alpha。 在红色、绿色和蓝色参数的后面添加 /，或使用 rgba() 函数。Alpha 可以使用百分比或介于 0 到 1 之间的小数来定义。例如，如需在现代浏览器中设置 50% 的 Alpha 值黑色，请编写：rgb(0 0 0 / 50%) 或 rgb(0 0 0 / 0.5)。如需更广泛的支持，请使用 rgba() 函数，并写入：rgba(0, 0, 0, 50%) 或 rgba(0, 0, 0, 0.5)。

HSL（色调、饱和度、亮度）

h1 {
  color: hsl(344, 79%, 40%);
}

HSL 代表色相、饱和度和亮度。色相描述的是色轮上的值，介于 0 到 360 度之间，从红色（既是 0 也是 360）开始。色相为 180 或 50% 时，颜色会在蓝色范围内。 它是我们看到的颜色的来源。

饱和度是指所选色相的鲜艳程度。完全去饱和的颜色（饱和度为 0%）将显示为灰度。最后，亮度是描述添加光线的白到黑的比例的参数。亮度为 100% 时，始终会得到白色。

使用 hsl() 颜色函数，您可以通过编写 hsl(0 0% 0%) 或 hsl(0deg 0% 0%) 来定义纯黑色。这是因为色相参数定义了色轮上的角度，如果您使用数字类型，则介于 0-360 之间。您还可以使用角度类型，即 (0deg) 或 (0turn)。饱和度和亮度均以百分比定义。

在 hsl() 中，alpha 的定义与 rgb() 相同，即在色相、饱和度和亮度参数后面添加 /，或者使用 hsla() 函数。Alpha 可以使用百分比或介于 0 到 1 之间的小数来定义。例如，如需设置 50% 的 Alpha 值黑色，请使用 hsl(0 0% 0% / 50%) 或 hsl(0 0% 0% / 0.5)。使用 hsla() 函数，编写：hsla(0, 0%, 0%, 50%) 或 hsla(0, 0%, 0%, 0.5)。

颜色关键字

CSS 中包含 148 种已命名颜色。这些是简单的英语名称，例如紫色、番茄和黄花蒿。根据 Web Almanac，一些最受欢迎的名称包括黑色、白色、红色、蓝色和灰色。我们的最爱包括黄金雀、浅蓝色和亮粉色。

除了标准颜色之外，您还可以使用以下特殊关键字：

• transparent 是完全透明的颜色。 它也是 background-color 的初始值
• currentColor 是 color 属性的上下文计算动态值。如果文本颜色为 red，然后将 border-color 设置为 currentColor，它也会是红色。如果您在其中定义 currentColor 的元素未定义 color 的值，则系统将改为通过级联计算 currentColor

在 CSS 规则中的哪些位置使用颜色

如果 CSS 属性接受 <color> 数据类型作为值，则会接受上述任何一种表示颜色的方法。如需设置文本样式，请使用 color、text-shadow 和 text-decoration-color 属性，它们都接受颜色作为值或颜色作为值的一部分。

对于背景，您可以将颜色设置为 background 或 background-color 的值。颜色还可用于渐变，例如 linear-gradient。渐变是一种可在 CSS 中以编程方式定义的图像。渐变接受两种或更多颜色，颜色格式可以是任意组合，例如十六进制、RGB 或 HSL。

最后，border-color 和 outline-color 用于设置框的边框和轮廓的颜色。 box-shadow 属性还接受颜色作为值之一。

检查您的理解情况

测试您对颜色的了解

资源

• 一个实用演示，展示了如何将角度与 HSL 搭配使用
• 有关颜色的全面指南
• 有关广色域颜色的全面指南
• [视频] 有关如何读取十六进制代码的说明
• 十六进制代码的运作方式