使用 HTML 颜色 – 背景、边框和文本颜色

如何使用 HTML 颜色

设计不是 HTML 的核心功能，因此没有专门的 HTML 颜色标记。不过，您可以使用以下方法更改任何文本的颜色：

使用内联style属性 为网页添加颜色是内联 CSS 定型的一部分。要在 HTML 中设置文本或背景颜色，需要使用 style 属性。你可以在 HTML 的<body>、<p>、<table>、<div>、<h1>或<h2>标记等中应用style属性。请记住，使用样式属性会覆盖 HTML <style> 标记或外部样式表中设置的任何样式。
使用内部 CSS内部 CSS 样式选项通过将所有样式封装在 HTML 文档<head>中的<style>元素中，将属性应用于单个页面，因此非常流行。

文字颜色

您可以使用内联 style 属性或 <style> 元素来更改文本颜色，然后使用 color 属性来设置该值。color 属性为元素的文本和文本装饰设置前景颜色值。color 属性可接受 HTML 颜色名称、RGB、RGBA、HEX、HSL 或 HSLA 值。

由于多种原因，HTML 和 CSS 不支持 CMYK、HSV、HWB、LAB、XYZ 等颜色模型(参见文章 HTML 颜色编码)。HTML 和 CSS 专注于易于使用并针对数字屏幕进行了优化的色彩模型，而支持更多色彩模型会使浏览器在处理色彩时变得更加复杂，需要更强的处理能力在不同模型之间进行转换。

使用 HTML 颜色名称的文本颜色

颜色名称是 HTML 颜色的具体名称。现代浏览器支持 140 多种 HTML 颜色名称，您可以在元素中使用其中任何一种。例如，您可以使用内联 style 属性为文本着色，如下例所示：

1<html>
2	<body>
3		<h2 style="color:DarkCyan;">How to set text color using HTML color names?</h2>
4		<h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
5        <h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.</h4>
6	</body>
7</html>

如下面的示例所示，使用内部 CSS 也可以实现同样的文字着色效果：

 1<html>
 2	<head>
 3		<style>
 4			h2 {
 5				color:DarkCyan;
 6			}
 7			h3 {
 8				color:DarkRed;
 9			}
10			h4 {
11				color:DarkBlue;
12			}
13		</style>
14	</head>
15	<body>
16		<h2>How to set text color using HTML color names?</h2>
17		<h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
18		<h4>There are over 140 named colors to choose from that you can use.</h4>
19	</body>
20</html>

呈现的 HTML 代码如下

文本 “该图像可渲染上面的 HTML 代码”

如果您想以编程方式更改 HTML 文件中的文本、背景或边框颜色，请访问 如何使用文章 章节。本章中的文章回答了常见问题，并包含 C# 示例，提供了使用 Aspose.HTML for .NET 库解决特定任务的必要信息。

您可以从 编辑 CSS 部分了解更多有关应用内联、内部和外部 CSS 以及使用 Aspose.HTML API 编辑 CSS 的信息。关于如何使用 Aspose.HTML API 更改文本颜色的 C# 示例，请参阅文章 如何更改 HTML 中的文本颜色。

文本颜色使用 RGB、RGBA 或 HEX 颜色代码

要为 HTML 文本着色，可以使用 RGB 或 HEX 这两种最常用的颜色代码。RGB 值通过混合红色、绿色和蓝色值来确定 HTML 颜色。HEX 颜色值的工作原理与 RGB 几乎相同，但看起来有所不同。如果您想了解有关 RGB、RGBA 和 HEX 代码的更多信息，请访问 HTML 颜色代码 这篇文章。

使用 RGB 或 HEX 颜色代码是为网页添加颜色的最常见方法。有必要为要着色的文本元素添加一个 style 属性。在下面的示例中，我们使用 <h2>、<h3> 和 <h4>元素来应用内联 style 属性和带有 RGB、RGBA 和 HEX 代码的 color 属性：

1<html>
2	<body>
3		<h2 style="color:rgb(50,150,200);">How to use Text Color?</h2>
4		<h3 style="color:rgba(220,30,100,1);"> 1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
5		<h4 style="color:#1A8D7E"> 2. Specify the color using RGB, RGBA or HEX code.</h4>
6	</body>
7</html>

如下面的示例所示，使用内部 CSS 也能达到同样的效果：

 1<html>
 2	<head>
 3		<style>
 4			h2 {
 5				color:rgb(50,150,200);
 6			}
 7			h3 {
 8				color:rgba(220,30,100,1);
 9			}
10			h4 {
11				color:#1A8D7E;
12			}
13		</style>
14	</head>
15	<body>
16		<h2>How to use Text Color?</h2>
17		<h3>1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
18		<h4>2. Specify the color using RGB, RGBA or HEX code.</h4>
19	</body>
20</html>

呈现的 HTML 代码如下：

文本 “该图像渲染了使用 HEX 或 RGB 颜色代码设置文本颜色的 html 代码”。

文字颜色使用 HSL 或 HSLA 颜色代码

HSL(色相、饱和度、亮度)是 RGB 颜色模型在圆柱坐标中的表示。色调定义了基本颜色，在 RGB 色轮上以 0 到 360 度来衡量。饱和度是颜色的强度或纯度，用 0(黑白)到 100(鲜艳)的百分比来定义。明度是色彩的亮度或亮度。它的百分比从 0(黑色)到 100(白色)。

HSLA 颜色值是 HSL 颜色值的扩展，带有一个决定颜色不透明度的 alpha 通道。HSLA 颜色值由色相、饱和度、明度和 alpha 指定，其中 alpha 参数指定不透明度。alpha 参数是一个介于 0.0 和 1.0 之间的数字，0.0 表示 “完全透明”，1.0 表示 “完全不透明”。

使用与之前相同的 style 属性，在 color 属性中用 HSL 或 HSLA 值替换 RGB/RGBA/HEX 代码或颜色名称：

1<html>
2	<body>
3		<h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codes</h2>
4		<p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.</p>
5		<p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.</p>
6	</body>
7</html>

与上例一样，您可以使用内部 CSS(<style> 元素)，并在 CSS 选择器中用 HSL 或 HSLA 值替换 RGB/RGBA/HEX 代码或颜色名称。

呈现的 HTML 代码如下

文本 “该图像渲染了使用 HSL 和 HSLA 颜色代码设置文本颜色的 html 代码”。

总结

1.要更改文本颜色，可以使用内联 style 属性或内部 CSS。 1.要指定所需的颜色，可以使用 HTML 颜色名称或 RGB、RGBA、HEX、HSL 或 HSLA 颜色代码。

从历史上看，RGB 模型一直被选为网络开发的主要模型，因为它与屏幕的操作直接相关，屏幕使用红、绿、蓝像素来显示颜色。HTML 和 CSS 致力于为所有浏览器和设备提供简单、一致的颜色定义模型。RGB 及其衍生物(HEX、RGBA、HSL、HSLA)非常直观，与数字屏幕高度兼容。

背景颜色

特定 HTML 元素的背景颜色

您可以使用 style 属性指定 HTML 元素的背景颜色，然后使用 background-color 属性设置该值。background-color 属性可接受颜色名称、RGB、RGBA、HEX、HSL 或 HSLA 值。在这里，我们想展示如何使用不同的颜色格式和不同的透明度设置同一种颜色 YellowGreen。否则，最好使用内部 CSS 为某一类型的所有元素指定一种颜色。

确定要为哪个元素更改背景颜色。如果是段落，请查找<p>开头标签。也可以是<h1>…<h6>、<div>或<table>标签。在本例中，我们要为 <h2> 元素添加背景颜色：

 1<html>
 2	<body>
 3		<p>The color name is "YellowGreen":</p>
 4		<h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
 5		<h2 style="background-color:#9ACD32;">#9ACD32</h1>
 6		<h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
 7
 8		<p>RGBA values of name "YellowGreen" color, with different transparent:</p>
 9		<h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)</h2>
10		<h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)</h2>
11		<h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)</h2>
12
13		<p>HSLA values of name "YellowGreen" color, with different transparent:</p>
14		<h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)</h2>
15		<h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)</h2>
16		<h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)</h2>
17	</body>
18</html>

呈现的 HTML 代码如下

文本 “该图像渲染了使用 HEX、RGB、RGBA、HSL 和 HSLA 颜色代码设置背景颜色的 html 代码”。

整个网页的背景颜色

值得注意的是，在上面的示例中，background-color 属性提供的是文本背景的颜色，而不是整个文档的颜色。如果要更改整个页面的 HTML 颜色，则应使用<body>部分开头标签中 style属性的 “background-color “属性：

 1<html>
 2	<body style="background-color:#e0e0e0">
 3		<h2 style="background-color:YellowGreen;">YellowGreen</h2>
 4		<h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
 5		<h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)</h2>
 6		<h2 style="background-color:#9ACD32;">#9ACD32</h2>
 7		<h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
 8		<h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)</h2>
 9	</body>
10</html>

该图像会显示 HTML 代码，用于设置文本(黄绿颜色名称在不同颜色代码中指定)和整个网页的背景颜色。

文本 “图像渲染 HTML 代码，用于设置文本和整个网页的背景颜色”。

再举一个例子，通过在<body>部分的开头标签中使用带有 “background-color “属性的 style属性来实现整个网页背景着色的效果：

1<html>
2	<body style="background-color:#ffe0e0;">
3		<h2>How to set Background Color for the whole web page?</h2>
4		<p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
5	</body>
6</html>

您还可以使用内部 CSS 为整个页面设置背景颜色：

 1<html>
 2	<head>
 3		<style>
 4			body {
 5				background-color:#ffe0e0
 6			}
 7		</style>
 8	</head>
 9	<body>
10		<h2>How to set Background Color for the whole web page?</h2>
11		<p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
12	</body>
13</html>

文本 “该图像渲染了用于设置整个网页背景颜色的 HTML 代码”。

边框颜色

您可以将 style 属性与 border-style 和 border-color 属性一起使用，以指定文本元素的边框颜色。CSS border-color属性定义了元素四个边框的颜色。只有先定义了用于设置边框的border-style属性，border-color属性才会起作用。该属性不会单独起作用。如果未设置此属性，则会继承元素的颜色。border-color 属性可接受颜色名称、RGB、RGBA、HEX、HSL 或 HSLA 值。

1<html>
2	<body>
3		<p> The border-color property only works when the border-style property is defined first, which is used to set the borders.</p>
4		<h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?</h2>
5		<p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.</p>
6		<h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?</h2>
7	</body>
8</html>

文本 “该图像渲染了为文本设置边框颜色的 HTML 代码。”

另见

探索 HTML 颜色名称的世界！了解如何在网页设计中使用 HTML 颜色名称，以及何时选择其他颜色名称。
文章 如何更改 HTML 中的文本颜色？ 展示了如何使用 Aspose.HTML for .NET 库来控制 HTML 文档中的文本颜色。
在 如何更改 HTML 中的背景颜色？ 一文中，您将找到 C# 示例，展示设置或更改整个 HTML 文档及其单个元素背景颜色的不同方法。
文章 如何更改 HTML 中的边框颜色？ 讨论了使用 Aspose.HTML for .NET 库设置或更改 HTML 文件中边框颜色的各种方法。

Aspose.HTML 提供免费的在线 色轮选取器，可让您以 HEX 颜色代码创建一组颜色。您可以使用这个免费的在线应用程序，利用色彩组合规则来寻找和谐的色彩，但也有必要对色彩进行尝试。Color Wheel Picker 为你提供了一个绝佳的方式来尝试色彩，并独立创造出令人兴奋的色彩组合。该应用程序可在电脑、平板电脑和移动设备上运行。因此，你可以为任何项目制作独一无二的调色板！

什么是 HTML DOM？ CSS 选择器