CSS 播客 - 006：颜色第一部分
颜色是任何网站的重要组成部分，在 CSS 中有多种颜色类型、功能和处理方式选项。
如何确定要使用哪种颜色类型？ 如何使颜色变为半透明？ 在本课程中，您将了解您可以通过哪些选项为项目和团队做出正确的决策。
CSS 具有各种不同的数据类型，例如字符串和数字。 颜色是其中一种类型，它使用其他类型（例如，数字作为自己的定义）。
数字颜色
您在 CSS 中首次看到颜色时，很可能是通过数字颜色进行的。我们可以以几种不同形式处理数字颜色值。
十六进制颜色
h1 {
color: #b71540;
}
十六进制记数法（通常简称为十六进制）是 RGB 的简写语法，它将数值分配给红色、绿色和蓝色（三原色）。
十六进制范围是 0-9 和 A-F。 在六位数序列中使用时，它们会转换为 0-255 的 RGB 数值范围，分别对应于红色、绿色和蓝色通道。
您还可以使用任何数字颜色定义 Alpha 值。Alpha 值是透明度的百分比。
在十六进制代码中，您要在 6 位数序列的基础上再加两位数，形成一个 8 位数序列。例如，如需在十六进制代码中设置黑色，请编写 #000000。
如需添加 50% 的透明度，请将其更改为 #00000080。
由于十六进制刻度为 0-9 和 A-F，因此透明度值可能与您的预期不太一样。
以下是添加到黑色十六进制代码 #000000 中的一些重要的常用值：
- 0%（完全透明）为 00：
#00000000 - 50% alpha 为 80：
#00000080 - 75% alpha 为 BF：
#000000BF
如需将一个两位数的十六进制值转换为十进制数，需要将第一个数位乘以 16（因为十六进制数是以 16 为底数的），然后加上第二个数位。以 BF 为例，说明此值为 75% 的 Alpha 值：
- B 等于 11，乘以 16 等于 176
- F 等于 15
- 176 + 15 = 191
- Alpha 值为 255 的 191—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%) 来定义纯黑色。这是因为 hue 参数定义了色轮上的度数（如果您使用数字类型，则值为 0-360）。您也可以使用角度类型，即 (0deg) 或 (0turn)。饱和度和亮度均通过百分比定义。
Alpha 是在 hsl() 中定义的，方式与 rgb() 相同，即在色相、饱和度和亮度参数后面添加 /，或者使用 hsla() 函数。alpha 值可以指定为百分比或介于 0 到 1 之间的小数。例如，如需将 Alpha 值设为 50%，请使用 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 种已命名的颜色。这些是普通的英文名称，例如 purple、tomato 和 goldenrod。 根据网页年鉴，一些最常用的名称为黑色、白色、红色、蓝色和灰色。我们最喜爱的包括 goldenrod、aliceblue 和 Hotpink。
除了标准颜色之外，您还可以使用特殊关键字：
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 属性也接受 color 作为值之一。
检查您的掌握程度
考考你对颜色的掌握情况
以下哪些是有效的颜色？
rbga(400 0 1)#0f08#OOFZ2rgb(255, 0, 0)hsl(180deg 50% 50%)hotpink发现无效的 hsl 颜色。
hsl(5, 0%, 90%)hsl(.5turn 40% 60%)hsl(0, 0, 0)hsl(2rad 50% 50%)hsl(0 0% 0% / 20%)