颜色

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

颜色是任何网站的重要组成部分，在 CSS 中，有许多颜色类型选项 功能和处理方式。

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

CSS 具有各种不同的数据类型， 例如字符串和数字。 Color 就是其中之一，并且使用了其他类型， 比如用数字来描述自己的定义

数字颜色

您首次在 CSS 中接触颜色很可能是通过数字颜色。 我们可以采用几种不同形式处理数值颜色值。

十六进制颜色

h1 {
  color: #b71540;
}

十六进制记数法（通常简称为十六进制）是 RGB 的简写语法， 该函数为红绿蓝分配一个数值， 即三种主要颜色。

十六进制范围为 0-9 和 A-F。 当以 6 位数序列使用时， 它们将转换为 0-255 的 RGB 数值范围 分别对应于红色、绿色和蓝色通道。

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

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

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

要将两位十六进制数转换为十进制数， 用第一个数字乘以 16（因为十六进制数是 16）， 然后加上第二个数字。以 75% alpha 的 BF 为例：

1. B 等于 11，乘以 16 等于 176
2. F 等于 15
3. 176 + 15 = 191
4. 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%)。

alpha 可通过以下两种方式之一在 rgb() 中设置。 在红色、绿色和蓝色参数后面添加 /。 或使用 rgba() 函数。 alpha 可以用百分比或 0 到 1 之间的小数来定义。 例如，如需在现代浏览器中将 50% 的 Alpha 黑色设置为 50%，请写入 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 之间的小数来定义。 例如，如需设置 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。 其中一些最热门的名称 根据网络年鉴， 分别为黑色、白色、红色、蓝色和灰色。 其中最爱的包括金线花、爱丽蓝色和艳粉色。

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

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

在 CSS 规则中的什么位置使用颜色

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

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

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

检查您的理解情况

测试您对颜色的掌握情况

资源

• 介绍如何通过 HSL 使用角度的实用演示
• 关于颜色的全面指南
• 有关广色域色彩的全面指南
• [视频] 关于如何读取十六进制代码的说明
• 十六进制代码的运作方式