作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
在创建网站时，颜色是设计和开发的有用部分。 它有助于设定一种情绪并传达一种美感。 颜色还可以帮助读者快速扫描和识别内容。
使用 CSS，有四种生成颜色的方法，每种方法都有其独特的优势。 本教程将向您展示如何使用颜色关键字、十六进制颜色值、rgb() 颜色格式，最后是 hsl() 颜色格式。 您将使用所有四种方法和相同的 HTML 集来体验每种颜色格式如何处理相同的内容。 在整个教程中，您将使用 color、border 和 background-color 属性将这些颜色格式应用于 HTML。
先决条件
- 了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
- 类型选择器、组合选择器和选择器组的知识，您可以在 如何选择 HTML 元素以使用 CSS 设置样式 中找到这些知识。
- 在您的本地计算机上保存为
index.html的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试整个 如何用 HTML 构建网站系列。
设置示例 HTML 和 CSS
在本节中，您将为在整个教程中编写的所有视觉样式设置 HTML 基础。 您还将创建 styles.css 文件并添加设置内容布局的样式。
首先在文本编辑器中打开 index.html。 然后，将以下 HTML 添加到文件中：
索引.html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
接下来，进入<head>标签并添加一个<meta>标签来定义HTML文件的字符集，然后是页面的标题，[ X146X] 标记定义移动设备应如何呈现页面，最后是 <link> 元素，用于加载稍后制作的 CSS 文件。
这些添加在以下代码块中突出显示：
索引.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Colors With CSS</title>
<meta name="viewport" content="width=device-width" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
添加 <head> 内容后，接下来移动到 <body> 元素，该元素将添加来自 维基百科关于颜色 的文章。 将此代码块中突出显示的部分添加到文本编辑器中的 index.html 文件中：
索引.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Colors With CSS</title>
<meta name="viewport" content="width=device-width" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<article>
<header>
<h1>About Color</h1>
</header>
<p>Color is the characteristic of visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple. This perception of color derives from the stimulation of photoreceptor cells by electromagnetic radiation. Color categories and physical specifications of color are associated with objects through the wavelengths of the light that is reflected from them and their intensities. This reflection is governed by the object's physical properties such as light absorption, emission spectra, etc.</p>
<hr />
<p>By defining a color space, colors can be identified numerically by coordinates, which in 1931 were also named in global agreement with internationally agreed color names like mentioned above (red, orange, etc.) by the International Commission on Illumination. The RGB color space for instance is a color space corresponding to human trichromacy and to the three cone cell types that respond to three bands of light: long wavelengths, peaking near 564–580 nm (red); medium-wavelength, peaking near 534–545 nm (green); and short-wavelength light, near 420–440 nm (blue). There may also be more than three color dimensions in other color spaces, such as in the CMYK color model, wherein one of the dimensions relates to a color's colorfulness.</p>
<footer>
Adapted from Wikipedia’s article on <a href="https://en.wikipedia.org/wiki/Color">Color</a>
</footer>
</article>
</body>
</html>
内容位于 <article> 标记中，用于定义称为 地标 的指定区域，这是您要引起注意的设计的一部分。 这个元素可以有自己的 <header> 和 <footer> 标签。 <header> 包含带有内容标题的 <h1> 标记，<footer> 元素包含用于引用来源的内容。 在主要内容的两个 <p> 标记之间是一个 <hr /> 标记，它是一个创建水平规则线的自闭合标记。 作为一条内容，水平线可用于拆分内容或指示内容的变化。
这样就完成了 index.html 所需的工作。 保存对文件的更改，然后在 Web 浏览器中打开 index.html。 网页将如下图所示：
现在您将开始处理本教程所需的基本样式。 创建一个名为 styles.css 的文件并在文本编辑器中打开它。
首先，创建一个 body 类型选择器并添加 font-famiy: sans-serif 以使用浏览器的默认无衬线字体。 然后添加一个 line-height: 1.5 以在 font-size 的 1 和一半的文本之间提供默认行间距：
样式.css
body {
font-family: sans-serif;
line-height: 1.5;
}
接下来，通过为 margin、padding、width 和 max-width 创建类型选择器，为 <article> 元素添加样式，以及 box-sizing: border-box 为 <article> 重新定义 Box Model。 这将确保 padding 值不会添加到容器的整个宽度。
为每个属性的值添加以下代码块的突出显示部分：
样式.css
...
article {
margin: 2rem auto;
padding: 2rem;
width: 90%;
max-width: 40rem;
box-sizing: border-box;
}
首先，值为 2rem auto 的 margin 将使页面上的 article 容器居中。 2rem 的 padding 将在本教程后面添加颜色属性时在容器周围提供足够的空间。 width 允许容器的宽度随着屏幕大小的变化而流动，直到达到 40rem 的 max-width 值（相当于 640px） .
接下来，编写一个 h1 类型选择器，并给元素一个 2rem 的 font-size。 然后，添加 0 0 1rem 的 margin 以删除默认的 margin-top 并为 margin-bottom 提供新值。 最后，通过向选择器块添加 text-align: center; 来使文本居中：
样式.css
...
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
}
接下来，您将对 <hr> 元素应用一些基本样式。 浏览器默认为 <hr> 元素创建一个没有高度、全宽和边框的框。 虽然这个容器是自闭的，不包含内容，但它可以接受很多样式。
首先给它一个 0.25rem 的 height 值。 然后，添加 2rem auto 的 margin 属性以在 <hr> 上方和下方创建空间并使元素居中。 添加带有 max-width: 18rem; 的 width: 90%; 元素，因此 <hr> 元素始终小于文章容器，并且永远不会大于 18rem。 最后，使用 border-radius 属性对 <hr> 元素的末端进行四舍五入，值为 0.5rem：
样式.css
...
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
}
最后，创建一个 footer 选择器块并添加一个值为 2rem 的 margin-top 属性，然后是 0.875rem 的 font-size：
样式.css
...
footer {
margin-top: 2rem;
font-size: 0.875rem;
}
将更改保存到 styles.css。 然后，在您的网络浏览器中返回 index.html 并重新加载页面。 内容现在已准备好将颜色应用于基本样式。 下图显示了它将如何在您的浏览器中呈现。
在本节中，您在 index.html 文件中设置了 HTML，并在 styles.css 文件中创建了基本样式。 下一节将向您介绍颜色关键字，您将使用这些关键字将颜色应用于内容。
使用关键字值应用颜色
从 Web 上的颜色开始，使用预定义的颜色关键字会很有帮助。 在本节中，您将使用一些颜色关键字将颜色应用于 HTML 的内容。
随着时间的推移，已经有超过一百个颜色关键字值被添加到列表中。 万维网联盟在他们的Wiki上有一个详尽的颜色关键字值列表。 颜色关键字值对于快速设计或识别和调试 CSS 问题很有用，例如通过将 color 属性设置为 magenta 使元素在柔和的调色板中脱颖而出。 关键字涵盖了所有色调，每种色调都有不同的色调和色调，包括灰色。
首先转到 article 类型选择器并添加 background-color、border 和 color 属性。 对于 background-color，请使用浅棕色 seashell 关键字。 给 border 一个 0.25rem 的粗细，一个 solid 样式，颜色使用 sandybrown 关键字。 最后，对于 color 属性，使用 maroon 关键字：
样式.css
...
article {
margin: 2rem auto;
padding: 2rem;
width: 90%;
max-width: 40rem;
box-sizing: border-box;
background-color: seashell;
border: 0.25rem solid sandybrown;
color: maroon;
}
...
将您的更改保存到 styles.css 并返回浏览器以刷新 index.html 页面。 页面现在将有一个视觉定义的 article 区域，具有浅棕色背景颜色和稍深的棕色粗边框。 文本内容将是深红色，并且在其他棕色的背景下可能看起来更像是深棕色。 下图显示了页面在浏览器中的显示方式：
接下来，在文本编辑器中返回 styles.css。 转到 h1 选择器并添加 color 属性。 使用棕色色调的互补色，为 color 属性值添加 teal 关键字：
样式.css
...
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
color: teal;
}
...
现在，继续补色的概念，转到 hr 元素并添加 0.25rem solid teal 的 border 属性。 之后，添加一个 background-color 属性，其值为关键字 darkturquoise：
样式.css
...
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
border: 0.25rem solid teal;
background-color: darkturquoise;
}
...
将这些更改保存到您的 styles.css 文件并在浏览器中刷新 index.html。 两个段落之间的 <hr> 元素将有一个较粗的 teal 边框，内部带有较浅的蓝绿色，如下图所示：
接下来，返回文本编辑器并转到 styles.css 文件中的 footer 选择器。 在这里，添加一个 color 属性并使用 chocolate 作为值：
样式.css
...
footer {
margin-top: 2rem;
font-size: 0.875rem;
color: chocolate;
}
在文本编辑器中保存对 styles.css 的更改，然后返回浏览器并刷新 index.html。 您的浏览器会将 chocolate 呈现为比 maroon 更浅的棕色色调，但在 saddlebrown 边框处不那么浅：
在返回代码编辑器之前，请注意 <footer> 元素中链接的颜色。 它使用链接的默认浏览器颜色，即蓝色，除非您访问过该链接，在这种情况下，颜色为紫色。 现在将使用 color 的一个特殊值，称为 inherit，它不是定义特定颜色，而是使用其父容器的颜色，在本例中为 <footer>。
要在 color 属性上使用 inherit 值，请在文本编辑器中返回 styles.css，然后在 footer 选择器的结束标记后添加footer a 的新组合器将样式范围限定为 <footer> 元素内的 <a> 元素。 然后，添加一个值为 inherit 的 color 属性，因此 <a> 将继承 footer 上设置的 color 值，如以下代码块的突出显示部分所示：
样式.css
...
footer a {
color: inherit;
}
将更改保存到 styles.css 文件并在 Web 浏览器中刷新 index.html。 <a> 现在与其他 footer 文本颜色相同，并保留下划线，将文本区分为链接。 下图显示了它在浏览器中的显示方式：
注意： inherit 值仅适用于可以接受前景 color 值的颜色，例如 border-color 和 color。 其他属性，例如 background-color 或 box-shadow，可以使用称为 currentColor 的特殊值访问定义的 color 值。 它的工作方式与 inherit 相同，但适用于 inherit 不是有效值的情况。
您在本节中使用了颜色关键字来设置与内容具有不同对比度的几种颜色。 您还使用了 inherit 值来重用颜色值，而无需显式定义值。 在下一节中，您将使用十六进制颜色代码系统来调整内容的颜色。
使用十六进制应用颜色
十六进制或十六进制颜色值是将颜色应用于 Web 上的元素的最常用方法。 在本节中，您将使用十六进制颜色来重新定义和调整内容的视觉风格。
了解十六进制系统是什么以及它是如何工作的很重要。 Hexadecimal是一个以0-9为数值，字母af为范围为10-15的16进制估值系统]。 十六进制值用于控制每个原色（红色、绿色和蓝色）的强度从 0，表示为 00，直到 255，表示为 ff。 十六进制值跟在 # 之后，表示颜色类型是十六进制颜色代码，然后是每个颜色通道的两位数字，从红色开始，然后是绿色，然后是蓝色。
十六进制颜色代码可以用两种方式编写。 第一种是长格式，更常见也更详细，包含六个数字，每个颜色通道两个。 这方面的一个例子是用 #ffff00 创建的黄色。 编写十六进制颜色代码的第二种方法是一种简短形式，它可以只写三个数字，浏览器会将其解释为每个单个值的加倍。 简而言之，黄色可以用 #ff0 创建。 如果专门使用，简短的十六进制颜色值允许更快但更有限的调色板。
要开始使用十六进制颜色代码，请在文本编辑器中打开 styles.css 并转到 article 元素选择器。 对于 background-color 属性值，使用 #f0f0f0，它是一种非常浅的灰色。 接下来，对于 border 属性颜色值，使用 #ccc 的短格式十六进制代码，即中间灰色。 最后，对于正文 color 属性，使用深灰色短格式十六进制代码 #444：
样式.css
...
article {
...
background-color: #f0f0f0;
border: 0.25rem solid #ccc;
color: #444;
}
...
注意： 处理文本内容时，在 background-color 和文本 color 值之间保持良好的颜色对比非常重要。 这有助于为广大读者和网站用户提供文本的可读性。 要了解有关可访问颜色对比度的重要性的更多信息，请观看此 Designing with Accessible Color Contrast on the Web 视频系列 。 此外，由 WebAIM 提供的 这个对比度计算器是一个很好的工具，可以测试您的颜色是否提供足够的对比度以使文本对包容性受众具有可读性。
接下来，将 h1 颜色值设置为深红色。 转到 styles.css 文件中的 h1 选择器并更新 color 属性以具有 #900 的值，这会将红色通道打开到大约中点并关闭绿色和蓝色通道：
样式.css
...
h1 {
...
color: #900;
}
...
继续使用红色值，更新 hr 颜色属性以匹配 h1 元素。 将 border 属性颜色设置为 #bd0000，这需要长格式的十六进制代码，因为颜色是介于 #b00 和 #a00 之间的值。 然后，使用 #f00 将 background-color 设置为全红色值。 这是 red 关键字等效的十六进制值：
样式.css
...
hr {
...
border: .25rem solid #bd0000;
background-color: #f00;
}
...
最后，要继续将 footer 文本作为主文本的较轻版本，请转到 footer 属性并将 color 属性更改为 [ X172X]：
样式.css
...
footer {
...
color: #888;
}
...
将您的更改保存到 styles.css 并返回浏览器以刷新 index.html 并查看您的更改。 如下图所示，article 容器现在由几种灰色组成，标题和规则线变体为红色：
在本节中，您使用了几个十六进制颜色代码值来定义整个 styles.css 样式文档的颜色。 在下一节中，您将使用 rgb() 颜色代码将这些十六进制值转换为更清晰的数值。
使用 rgb() 应用颜色
十六进制颜色值是用有限数量的字母数字值定义的，rgb() 对每个原色通道仅使用 0 到 255 范围内的数字值。 仅对这些使用数值可以比十六进制更快地理解 rgb() 格式创建的颜色。
就像十六进制格式和 rgb() 格式的结构所示，括号内的颜色表示为红色通道值，绿色通道值，然后是蓝色通道值。 在 rgb() 中格式化的黑色是 rgb(0, 0, 0)，而白色则被格式化为 rgb(255, 255, 255)。 这也意味着全红色是 rgb(255, 0, 0)，而全绿色是 rgb(0, 255, 0)，依此类推。
要开始重构代码以使用 rgb() 值而不是十六进制值，使用 HEX 到 RGB 转换器会很有帮助，例如 这个 HEX 到 RGB 转换器嵌入在 Duck Duck Go 搜索引擎中[ X215X]。 使用数学方法，可以使用每个通道的十六进制值对数值进行解码。 在红色通道的十六进制代码为 fe 的情况下，这意味着 f 表示从 0-15 的 16 个计数的 15 次迭代，使得 f[X160X ] 等于 16×15 或 240。 十六进制 fe 的 e 等于 base-16 序列中的 14。 将这两个值相加，rgb() 值的红色通道为 254。
此图表将帮助您识别每个十六进制值的值，以将它们转换为 rgb() 所需的数值。 第一行是十六进制序列中第一个字符的值，即十六进制值乘以 16。 第二行是十六进制序列中第二个字符的值，即十六进制值乘以 1：
| 计算 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 一个 | 乙 | c | d | 电子| f ------|------|-----|-----|-----|-----|-----|----- |-----|-----|-----|-----|-----|-----|-----|-----|- -|----- 第一个十六进制数字| x*16 | 0 | 16 | 32 | 48 | 64 | 80 | 96 | 112 | 128 | 144 | 160 | 176 | 192 | 208 | 224 | 240 秒十六进制数字| x*1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
打开您的 styles.css 文件并转到文本编辑器中的 article 选择器块。 用 #f0f0f0 的值识别 background-color 属性。 使用转换工具或上图的数学公式，这将成为 rgb(240, 240, 240)，因为序列中的 f 位于第二个位置并且等于 240。 将这两个值相加是 240：
样式.css
...
article {
...
background-color: rgb(240,240,240);
border: 0.25rem solid #ccc;
color: #444;
}
...
接下来，对于 border 和 color 值，因为它们被写为短格式，因此在转换为 rgb() 时将它们扩展为长格式会很有帮助。 #ccc 短格式变为长格式 #cccccc。 这将创建 (12 * 16) + 12 的公式，结果为 204。 将该值应用于每个通道，#ccc 变为 rgb(204, 204, 204)。 应用此新值后，如以下突出显示的部分所示，可以将相同的方法应用于 #444 的 color 值，变为 rgb(68, 68, 68)：
样式.css
...
article {
...
background-color: rgb(240,240,240);
border: 0.25rem solid rgb(204, 204, 204);
color: rgb(68, 68, 68);
}
接下来，转到 h1 和 hr 颜色属性。 对于所有这三个属性，颜色仅使用红色通道，这意味着绿色和蓝色通道的 rgb() 将为 0：
样式.css
...
h1 {
...
color: rgb(153, 0, 0);
}
hr {
...
border: 2px solid rgb(189, 0, 0);
background-color: rgb(255, 0, 0);
}
...
对于 h1 color 属性，#900 缩写形式扩展为 #990000，使用图表可以得到 99 序列计算为 (16 * 9) + 9，对于 rgb(153, 0, 0) 的结果，它等于 153。 按照 hr 属性的相同公式，border 十六进制值中的 bd 变为 189。 f 的缩写 background-color 属性值扩展为 ff 结果为 255，这是一个颜色的最大值在 rgb() 和十六进制颜色格式中。
继续在 styles.css 文件中的文本编辑器中工作，识别 footer 选择器并更新 color 属性上使用的灰色。 由于该值是#888的简写形式，因此可以展开为#888888，利用图表和公式，最终值变为rgb(136, 136, 136)：
样式.css
...
footer {
...
color: rgb(136, 136, 136);
}
...
保存对 styles.css 文件的更改，然后在 Web 浏览器中重新加载 index.html 文件。 十六进制值与上一步没有区别，因为这些 rgb() 值是等价的。
十六进制和 rgb() 格式等同于相同的数值，但 rgb() 格式更易读，比前一种格式更具优势。 这使开发人员可以更快地做出明智的更改，并调整通道的强度以产生颜色，例如添加更多的红色以使颜色感觉更温暖。
为了证明这一点，将 article 和 footer 选择器中每种灰色的红色通道值加 5。 对于 article 属性，将 background-color 红色通道更改为 245，将 border 红色通道更改为 209，并将 color 属性红色通道到 73。 然后，将 footer 选择器的 color 属性红色通道更改为 141。 这些更改显示在以下代码块中：
样式.css
...
article {
...
background-color: rgb(245,240,240);
border: 0.25rem solid rgb(209, 204, 204);
color: rgb(73, 68, 68);
}
...
footer {
...
color: rgb(141, 136, 136);
}
...
保存对 styles.css 的更改，返回浏览器并刷新 index.html。 灰色将变得更暖色调，因为它们的红色多于绿色或蓝色。 下图显示了冷灰色和暖灰色之间的比较：
在本节中，您了解了 rgb() 颜色格式以及如何将十六进制颜色值转换为更易于使用的数值。 您还向 rgb() 颜色格式的红色通道添加了更多内容，以创建更温暖的各种灰色。 在下一节中，您将使用 hsl() 颜色格式，它代表色相、饱和度和亮度。
使用 hsl() 应用颜色
十六进制和 rgb() 颜色格式与原色的组合值有更紧密的联系，hsl() 使用来自 色轮 的颜色，具有饱和度和亮度级别，并且生成最终颜色。
与 rgb() 格式一样，hsl() 格式由逗号分隔序列中的三个值组成。 第一个值是 hue，它是色轮上的度数标记。 第二个值是 saturation，它是一个百分比值，其中 100% 表示全彩，0% 表示无颜色，从而产生白色、黑色或灰色取决于序列中最终数字的值。 Lightness 是一个百分比值，范围从 100% 处的白色到 0% 处的黑色。
色环从 0 度开始，也就是红色，然后围绕彩虹变成橙色、黄色、绿色、蓝色、紫色，然后在 360 度完成时返回红色。 这个度数是序列的第一个值，可以单独用一个数字表示，也可以使用任何角度单位来表示。 饱和度和亮度都是百分比值，并且需要存在百分比符号，即使值是 0。
使用 hsl() 格式的最大优势是，当存在相似值时，颜色可以更具凝聚力和互补性。 例如，可以通过确定色调值和饱和度百分比来快速组合单色配色方案，然后将所有其他颜色设置为亮度变化。 同样，尽管色调或亮度水平不同，但具有相似饱和度的颜色看起来会更好地匹配。
从十六进制或 rgb() 转换为 hsl() 格式的颜色并不那么简单。 颜色转换工具可以帮助将值从十六进制更改为hsl()。
要开始使用 hsl() 颜色格式，请在文本编辑器中打开 styles.css 并转到 article 和 footer 选择器。 回到本教程前面的灰度值，您可以将色调和亮度值分别设置为 0 和 0%。 由于这些是灰度的，因此只需要调整亮度值：
样式.css
...
article {
...
background-color: hsl(0, 0%, 94%);
border: 0.25rem solid hsl(0, 0%, 80%);
color: hsl(0, 0%, 27%);
}
...
footer {
...
color: hsl(0, 0%, 45%);
}
...
background-color 是非常浅的灰色，因此在 94% 处更接近 100%。 article 的 border 值有点暗，但仍然是浅灰色，亮度值为 80%。 接下来，article 的 color 值以更暗的 27% 出现。 最后，footer 文本的 color 使用 45% 的亮度值，为引文参考文本提供更浅但仍然可读的灰色。 仅使用亮度值，单色灰色调色板就可以快速组合在一起。
接下来，向下移动到 h1 和 hr 选择器块。 与 article 颜色属性类似的设置将发生：对于接下来的三个属性，色调和饱和度值将保持不变。 色调值设置为 0，饱和度设置为 100%，呈现完全饱和的红色。 亮度将再次区分这些红色值：
样式.css
...
h1 {
...
color: hsl(0, 100%, 25%);
}
hr {
...
border: 2px solid hsl(0, 100%, 35%);
background-color: hsl(0, 100%, 50%);
}
...
h1 color 通过具有 25% 的亮度值获得深红色。 虽然 hr 将具有 35% 亮度值的深红色 border，但 background-color 通过具有 50%。 随着该值从 50% 上升，红色变为粉红色直至变为白色，低于 50% 时红色变为栗色直至变为黑色。
保存对 styles.css 的更改，返回浏览器并刷新 index.html 以查看以 hsl() 颜色格式编写的样式的外观。 下图显示了这将如何显示：
现在，返回文本编辑器并转到 styles.css 文件中的 article 和 footer 选择器。 您现在将只调整色调和饱和度值，但保持亮度值不变。 在两个选择器的所有四个颜色属性上将色调值设置为 200。 然后，对于 article 选择器上的颜色属性，将饱和度值设置为 50%。 最后，将 footer color 属性的饱和度设置为 100%。 请参考以下代码块中突出显示的部分，了解这些颜色值的显示方式：
样式.css
...
article {
...
background-color: hsl(200, 50%, 94%);
border: 0.25rem solid hsl(200, 50%, 80%);
color: hsl(200, 50%, 27%);
}
...
footer {
...
color: hsl(200, 100%, 45%);
}
...
保存对 styles.css 文件的更改，然后在 Web 浏览器中重新加载 index.html。 如下图所示，灰色现在是具有不同亮度和饱和度的青色。 由于 50% 饱和度，article 颜色更加柔和，而 100% 饱和度使 footer 颜色更加鲜艳。
使用 hsl() 颜色格式的最大优势之一是创建补色调色板。 补色总是在色环的另一边。 红色的补色是绿色。 红色在色相值的 0 度标记处，其补色在 180 度标记处。 在 article 和 footer 颜色的色调值为 200 的情况下，减去 180 将得到 的互补色调值20，橙色。
转到文本编辑器中 styles.css 文件中的 h1 和 hr 选择器。 对于每个颜色属性的色调值，将色调从 0 更改为 20 以将颜色从红色设置为橙色的补色：
样式.css
...
h1 {
...
color: hsl(20, 100%, 25%);
}
hr {
...
border: 2px solid hsl(20, 100%, 35%);
background-color: hsl(20, 100%, 50%);
}
...
将您的更改保存到 styles.css 并返回到 Web 浏览器以刷新 index.html。 通过对色调值的一些修改，一个令人愉快的调色板已经走到了一起。 下图显示了它在浏览器中的显示方式：
在本节中，您使用了 hsl() 颜色格式，使用色相、饱和度和亮度等颜色理论方面来创建颜色。 您还可以使用公式创建互补色调色板，以在色环上获得相反的颜色。
结论
在本教程中，您使用了四种使用 CSS 在网站上定义颜色的方法。 关键字颜色值允许快速访问 CSS 规范所概述的预定义颜色。 十六进制颜色是最常见和广泛使用的格式，它以少量字符保存大量信息。 rgb() 颜色格式使用逗号分隔列表中的数值将十六进制值的值转换为更全面的格式。 最后，hsl() 颜色格式允许将颜色理论的概念应用于网站开发，通过使用色环的色调、饱和度和亮度来创建独特和互补的调色板。 所有这四种格式都可以在一个网站上一起使用，每一种都发挥自己的优势。
如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。
