CSS 播客 - 006：颜色（第一部分）
颜色是任何网站的重要组成部分，在 CSS 中，颜色类型、函数和处理方式有很多选择。
您如何决定使用哪种颜色类型？如何使颜色半透明？在本课程中，您将学习有哪些选项可以帮助您为您的项目和团队做出正确的决策。
CSS 具有各种不同的数据类型，例如字符串和数字。颜色是其中一种类型，并使用其他类型，例如数字，用于其自身的定义。
数值颜色
您很可能最早接触 CSS 中的颜色是通过数值颜色。我们可以使用几种不同的形式来处理数值颜色值。
十六进制颜色
h1 {
color: #b71540;
}
十六进制表示法（通常缩写为 hex）是 RGB 的简写语法，它为红色、绿色和蓝色分配一个数值，这三种颜色是原色。
十六进制范围是 0-9 和 A-F。当在六位数字序列中使用时，它们被转换为 RGB 数值范围，即 0-255，分别对应于红色、绿色和蓝色通道。
您还可以使用任何数值颜色定义 alpha 值。Alpha 值是透明度的百分比。在十六进制代码中，您在六位数字序列中添加另外两位数字，使其成为八位数字序列。例如，要在十六进制代码中设置黑色，请写入 #000000。要添加 50% 的透明度，请将其更改为 #00000080。
由于十六进制刻度是 0-9 和 A-F，因此透明度值可能与您期望的略有不同。以下是一些添加到黑色十六进制代码 #000000 的关键常用值
- 0% alpha（完全透明）是 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 值为 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%)。
alpha 在 rgb() 中以两种方式设置。要么在红色、绿色和蓝色参数之后添加 /，要么使用 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))。饱和度和亮度都用百分比定义。
Alpha 在 hsl() 中定义，方式与 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 种命名颜色。这些是简单的英文名称，例如 purple、tomato 和 goldenrod。根据 Web Almanac，一些最流行的名称是 black、white、red、blue 和 gray。我们最喜欢的包括 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 属性也接受颜色作为值之一。
检查您的理解情况
测试您的颜色知识
以下哪些是有效颜色？
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%)