如何在 CSS 中使用颜色值

笔记首页 >> 教程系列 >> 如何在 CSS 中使用颜色值

作者选择了技术多样性基金来接受捐赠，作为Write for DOnations计划的一部分。

介绍

创建网站时，颜色是设计和开发的一个有用部分。它有助于设定情绪并传达美学。颜色还可以帮助读者快速扫描和识别内容。

使用 CSS，有四种生成颜色的方法，每种方法都有其独特的优势。本教程将向您展示如何使用颜色关键字、十六进制颜色值、rgb()颜色格式，最后是hsl()颜色格式。您将在同一组 HTML 中使用所有四种方法来体验每种颜色格式如何处理相同的内容。在本教程中，您将使用color，border以及background-color性能这些颜色格式应用到HTML。

先决条件

了解 CSS 的级联和特异性功能，您可以通过阅读如何使用级联和特异性将 CSS 样式应用到 HTML 中获得。
类型选择器、组合器选择器和选择器组的知识，您可以在如何选择 HTML 元素以使用 CSS 设置样式中找到这些知识。
保存在本地计算机上的空 HTML 文件index.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 文件的字符集、页面标题、<meta>定义移动设备应如何呈现页面的标签，最后<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>元素，其中将添加来自Wikipedia 文章 color 的内容。将此代码块中突出显示的部分添加到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. 保存对文件的更改，然后index.html在 Web 浏览器中打开。网页将如下图所示：

带有大号粗体标题文本的黑色文本和两个段落，段落之间有一条规则线，全部采用衬线字体。

现在您将开始处理本教程所需的基本样式。创建一个名为的文件styles.css并在文本编辑器中打开它。

首先，创建一个body类型选择器并添加font-famiy: sans-serif以使用浏览器的默认无衬线字体。然后添加 aline-height: 1.5以在 1 和一半的文本之间提供默认行距font-size：

样式文件

body {
    font-family: sans-serif;
    line-height: 1.5;
}

接下来，添加样式的<article>元件通过与为它创造一个类型选择器margin，padding，width，和max-width，具有沿box-sizing: border-box重新定义盒模型的<article>。这将确保该padding值不会添加到容器的整个宽度。

为每个属性的值添加以下代码块的突出显示部分：

样式文件

...
article {
    margin: 2rem auto;
    padding: 2rem;
    width: 90%;
    max-width: 40rem;
    box-sizing: border-box;
}

首先，margin值为的2rem auto将使article容器在页面上居中。当您在本教程后面添加颜色属性时，paddingof2rem将在容器周围提供充足的空间。在width允许容器在宽度作为屏幕尺寸的变化流体，直到它达到max-width的值40rem（这相当于640px）。

接着，写一个h1类型选择器，并给所述元件的font-size的2rem。然后，添加一个marginof0 0 1rem以删除默认值margin-top并为提供一个新值margin-bottom。最后，通过向text-align: center;选择器块添加 a 使文本居中：

样式文件

...
h1 {
    font-size: 2rem;
    margin: 0 0 1rem;
    text-align: center;
}

接下来，您将对<hr>元素应用一些基本样式。浏览器默认为<hr>元素创建一个没有高度、全宽和边框的框。虽然这个容器是自封闭的，不包含内容，但它可以接受很多样式。

首先给它一个height值0.25rem。然后，添加一个margin属性以在元素2rem auto上方和下方创建空间<hr>并居中元素。添加width: 90%;带有 amax-width: 18rem;的<hr>元素，因此元素始终小于文章容器，并且永远不会大于18rem。最后，使用该border-radius属性将<hr>元素的末端四舍五入，其值为0.5rem：

样式文件

...
hr {
    height: 0.25rem;
    margin: 2rem auto;
    width: 90%;
    max-width: 18rem;
    border-radius: 0.5rem;
}

最后，创建一个footer选择器块并添加margin-top一个值为的属性2rem，后跟一个font-sizeof 0.875rem：

样式文件

...
footer {
    margin-top: 2rem;
    font-size: 0.875rem;
}

将更改保存到styles.css. 然后，返回到index.htmlWeb 浏览器并重新加载页面。内容现在已准备好将颜色应用于基本样式。下图显示了它将如何在您的浏览器中呈现。

带有大号粗体标题文本和两个段落的黑色文本，段落之间有一条狭窄的圆形规则线，全部采用无衬线字体。

在本节中，您将在index.html文件中设置 HTML 并在文件中创建基本样式styles.css。下一节将向您介绍颜色关键字，您将使用这些关键字将颜色应用于内容。

使用关键字值应用颜色

从网络上的颜色开始，使用预定义的颜色关键字很有帮助。在本节中，您将使用一些颜色关键字将颜色应用于 HTML 的内容。

随着时间的推移，有超过一百个颜色关键字值已添加到列表中。在万维网联盟有一个详尽的颜色关键字的值列表上的维基。颜色关键字值对于快速设计或识别和调试 CSS 问题非常有用，例如通过将color属性设置为magenta使元素在柔和的调色板中脱颖而出。关键字涵盖所有色调，每种色调都有不同的色调和色调，包括灰色。

通过转到开始article类型选择和添加background-color，border和color性能。对于background-color，使用微弱的浅棕色seashell关键字。给出border厚度0.25rem，solid样式，颜色使用sandybrown关键字。最后，对于color属性使用maroon关键字：

样式文件

...
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属性。使用棕色的互补色，teal为color属性值添加关键字：

样式文件

...
h1 {
    font-size: 2rem;
    margin: 0 0 1rem;
    text-align: center;
    color: teal;
}
...

现在，携带上的互补色的概念，转到hr元素，并添加border的属性0.25rem solid teal。之后，添加一个background-color以关键字darkturquoise为值的属性：

样式文件

...
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边界用打火机青色色内，如图所示，如下图中：

无衬线字体的棕色文本，带有浅棕褐色背景和带有蓝绿色标题文本的边框和段落之间的规则线。

接下来，返回到文本编辑器并转到文件中的footer选择器styles.css。在这里，添加一个color属性并chocolate用作值：

样式文件

...
footer {
    margin-top: 2rem;
    font-size: 0.875rem;
    color: chocolate;
}

将更改保存styles.css在文本编辑器中，然后返回浏览器并刷新index.html。您的浏览器将呈现chocolate为比更浅的棕色色调maroon，但在saddlebrown边框处不会如此浅：

浅棕色无衬线文本，带有带下划线的蓝色链接。

在返回代码编辑器之前，请注意<footer>元素中链接的颜色。它使用链接的默认浏览器颜色，即蓝色，除非您访问过该链接，在这种情况下颜色为紫色。color您现在将使用一个特殊值called inherit，它不是定义特定颜色，而是使用其父容器的颜色，在本例中为<footer>.

要inherit在color属性上使用该值，请styles.css在文本编辑器中返回 to ，然后在footer选择器的结束标记之后添加一个新的组合子 offooter a以将样式范围限定到<a>元素内部的<footer>元素。然后，添加color值为的属性inherit，因此<a>将继承在上color设置的值footer，如以下代码块的突出显示部分所示：

样式文件

...
footer a {
    color: inherit;
}

保存对styles.css文件的更改并index.html在 Web 浏览器中刷新。在<a>现在的颜色与其他相同footer的文字，并保留下划线，这区分了文本的链接。下图显示了它在浏览器中的显示方式：

浅棕色无衬线文本，链接下划线。

注意：该inherit值仅适用于可以接受前景color值的颜色，例如border-color和color。其他属性（例如background-color或box-shadow）可以使用color称为的特殊值访问定义的值currentColor。它的工作方式与相同inherit，但对于inherit不是有效值的情况。

您在本节中使用了颜色关键字来为内容设置几种不同对比度的颜色。您还使用该inherit值来重用颜色值，而无需明确定义值。在下一节中，您将使用十六进制颜色代码系统来调整内容的颜色。

用十六进制应用颜色

十六进制或十六进制颜色值是将颜色应用于 Web 元素的最常用方法。在本节中，您将使用十六进制颜色重新定义和调整内容的视觉样式。

了解十六进制系统是什么以及它是如何工作的，这一点很重要。十六进制是一个基数为 16 的估值系统，它使用0-9作为它们的数值，使用字母af作为范围从10-15 的值。十六进制值用于控制每种原色（红色、绿色和蓝色）的强度，从0表示为00，到255表示为ff。十六进制值跟在 a 之后#，表示颜色类型是十六进制颜色代码，然后是每个颜色通道的两位数字，从红色开始，然后是绿色，然后是蓝色。

十六进制颜色代码可以用两种方式编写。第一种是长格式，更常见也更详细，包含六位数字，每个颜色通道两位。一个例子是用#ffff00. 编写十六进制颜色代码的第二种方式是一种简短形式，它可以只用三位数编写，浏览器会将其解释为每个单个值的加倍。在简短形式中，黄色可以用来创建#ff0。如果专门使用，简短的十六进制颜色值允许更快但更有限的调色板。

要开始使用十六进制颜色代码，请styles.css在文本编辑器中打开并转到article元素选择器。对于background-color属性值，使用#f0f0f0，这是一种非常浅的灰色。接下来，对于border属性颜色值，使用的简短形式十六进制代码#ccc，它是中间灰色。最后，对于主要文本color属性，使用深灰色短格式十六进制代码#444：

样式文件

...
article {
    ...
    background-color: #f0f0f0;
    border: 0.25rem solid #ccc;
    color: #444;
}
...

注意：在处理文本内容时，保持 abackground-color和文本color值之间良好的颜色对比很重要。这有助于广大读者和网站用户提高文本的可读性。要了解有关无障碍颜色对比度重要性的更多信息，请观看网络视频系列上的使用无障碍颜色对比度进行设计。此外，WebAIM 提供的这个对比度计算器是一个很好的工具，可以测试您的颜色是否提供了足够的对比度，以使文本对包容性受众可读。

接下来，您将h1颜色值设置为深红色。转到文件中的h1选择器styles.css并更新color属性以使其值为#900，这会将红色通道打开到大约中点并关闭绿色和蓝色通道：

样式文件

...
h1 {
    ...
    color: #900;
}
...

继续使用红色值，更新hr颜色属性以匹配h1元素。将border属性颜色设置为#bd0000，这需要长格式的十六进制代码，因为颜色是#b00和之间的值#a00。然后，使用将设置background-color为全红色值#f00。这是与red关键字等效的十六进制值：

样式文件

...
hr {
    ...
    border: .25rem solid #bd0000;
    background-color: #f00;
}
...

最后，要继续使footer文本成为正文的浅色版本，请转到footer属性并将属性更改color为中间灰色#888：

样式文件

...
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 转换器会很有帮助，例如嵌入在 Duck Duck Go 搜索引擎中的这个 HEX 到 RGB 转换器。使用数学方法，可以使用每个通道的十六进制值对数值进行解码。在红色通道的十六进制代码为fe 的情况下，这意味着f表示从 0-15 的 16 个计数的 15 次迭代，使f等于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
第一个十六进制数字	×*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文本编辑器中的选择器块。标识background-color具有值的属性#f0f0f0。使用转换工具或前面图表的数学公式，这将是rgb(240, 240, 240)，因为序列中的f位于第二个位置并且等于240。将这两个值加在一起是240：

样式文件

...
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)。应用此新值后，如以下突出显示的部分所示，可以对的color值应用相同的方法#444，它变为rgb(68, 68, 68)：

样式文件

...
article {
    ...
    background-color: rgb(240,240,240);
    border: 0.25rem solid rgb(204, 204, 204);
    color: rgb(68, 68, 68);
}

接下来，继续查看h1和hr颜色属性。有关这些属性的全部三个颜色只使用红色通道，这意味着rgb()将0为绿色和蓝色通道：

样式文件

...
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，对于的结果等于153rgb(153, 0, 0)。以下对于相同的公式hr属性时，BD中border的十六进制值变为189。短格式属性值中的fbackground-color扩展为ff，结果为255，这是颜色rgb()和十六进制颜色格式中颜色的最大值。

继续在styles.css文件中的文本编辑器中工作，识别footer选择器并更新color属性上使用的灰色。由于该值是简写形式#888，可以将其展开为#888888，并使用图表和公式，最终值变为rgb(136, 136, 136)：

样式文件

...
footer {
    ...
    color: rgb(136, 136, 136);
}
...

保存对styles.css文件的更改，然后index.html在 Web 浏览器中重新加载文件。十六进制值与上一步没有区别，因为这些rgb()值是等效的。

十六进制和rgb()格式等同于相同的数值，但该rgb()格式更具人类可读性，使其比前一种格式更具优势。这允许开发人员更快地做出明智的更改并调整通道的强度以产生颜色，例如添加更多红色以使颜色感觉更暖。

为了证明这一点，将article和footer选择器中每个灰色的红色通道的值加 5 。对于article属性，将background-color红色通道更改为245，将border红色通道更改为209，将color属性红色通道更改为73。然后，将footer选择器的color属性红色通道更改为141。这些更改显示在以下代码块中：

样式文件

...
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()格式由逗号分隔序列中的三个值组成。第一个值是色调，它是色轮上的度数标记。第二个值是饱和度，这是一个百分比值，其中100%表示全色，0%表示无颜色，根据序列中最后一个数字的值，结果为白色、黑色或灰色。亮度是一个百分比值，范围从100% 的白色到0% 的黑色。

色环从 0 度开始，它是红色，然后围绕彩虹变成橙色、黄色、绿色、蓝色、紫色，然后在圆圈完成 360 度时变回红色。该度数值是序列的第一个值，可以单独用数字或使用任何角度单位表示。饱和度和亮度都是百分比值，并且需要存在百分比符号，即使值为0 也是如此。

使用该hsl()格式的最大优势在于，当存在相似的值时，颜色可以更具凝聚力和互补性。例如，通过确定色调值和饱和度百分比，然后将所有其他颜色设置为亮度变化，可以快速组合单色配色方案。同样，尽管色调或亮度水平不同，但具有相似饱和度的颜色看起来会更好地匹配。

从十六进制或转换rgb()到一个hsl()格式化的颜色也不那么简单。一个颜色转换工具，可以从十六进制来帮助变化值hsl()。

要开始使用hsl()颜色格式，请styles.css在文本编辑器中打开并转到article和footer选择器。在本教程中从早期久违的灰度值，你可以设置色相和明度值是0和0%分别。由于这些是灰度，只需要调整亮度值：

样式文件

...
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是一个非常浅灰色，所以它是在接近100％ 94%。的border值article有点暗，但仍然是浅灰色，亮度值为80%。接下来，的color值article以更暗的27%. 最后，color对于footer文本使用的亮度值45%，从而为引证参考文本更轻，但仍然可读灰色。仅使用亮度值，单色灰色调色板就会迅速组合在一起。

接下来，向下移动到h1和hr选择器块。将发生与article颜色属性类似的设置：接下来三个属性的色调和饱和度值将保持不变。色调值设置为0，饱和度设置为100%，给出完全饱和的红色。亮度将再次区分这些红色值：

样式文件

...
h1 {
    ...
    color: hsl(0, 100%, 25%);
}

hr {
    ...
    border: 2px solid hsl(0, 100%, 35%);
    background-color: hsl(0, 100%, 50%);
}
...

在h1 color得到具有的明度值红色暗25%。虽然hr将具有border具有35%亮度值的更深红色，但background-color通过具有亮度值获得纯红色50%。当该值从 50% 上升时，红色变为粉红色直至变为白色，低于 50% 时红色变为栗色直至变为黑色。

将更改保存到styles.css，返回到您的浏览器，然后刷新index.html以查看您的样式在以hsl()颜色格式书写时的显示方式。下图显示了这将如何出现：

无衬线字体的深灰色文本，背景为浅灰色，边框为红色，标题文本为红色，段落之间的规则线为两种深浅的红色。

现在，返回到文本编辑器并转到文件中的article和footer选择器styles.css。您现在将只调整色调和饱和度值，但保持亮度值不变。将色调值设置为200两个选择器的所有四个颜色属性。然后，对于article选择器上的颜色属性，将饱和度值设置为50%。最后，将footer color属性的饱和度设置为100%。有关这些颜色值的显示方式，请参考以下代码块的突出显示部分：

样式文件

...
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文件的更改并index.html在 Web 浏览器中重新加载。如下图所示，灰色现在是不同亮度和饱和度的青色。该article颜色更静音，由于50%饱和，而footer颜色更加充满活力与100%饱和度。

无衬线字体的深蓝色文本，带有浅蓝色背景和边框，标题文本为红色，段落之间的规则线为两种深浅的红色。

使用hsl()颜色格式的最大优势之一是创建互补的调色板。互补色始终位于色环的另一侧。红色的互补色是绿色。红色在色调值的 0 度标记处，其补色在 180 度标记处。在色相值为200的article和footer颜色的情况下，减去180将得到20的互补色相值，即橙色。

在文本编辑器中转到文件中的h1和hr选择styles.css器。对于每个颜色属性的色调值，将色调从更改0为20以将颜色从红色设置为橙色的互补色：

样式文件

...
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 样式中的其他教程。

觉得文章有用？

点个广告表达一下你的爱意吧！