HTML 颜色名称 – 在 HTML 中的使用

颜色在网页设计中起着至关重要的作用，它能唤起人们的情感、传达信息并创造出具有视觉吸引力的体验。在 HTML 和 CSS 领域，颜色名称提供了一种无需十六进制或 RGB 值即可指定颜色的便捷方法。颜色有多种命名方式。它们通常以植物、动物或其他外形相似的事物命名。例如，橙色就是用来描述橙色水果的。颜色还可以根据历史上用来创造颜色的颜料来命名，颜色的名称还可能受到有趣的故事以及与该颜色相关的感觉或情绪的影响。

本文将探讨 HTML 颜色名称的世界、它们的用途、局限性以及颜色在网页设计中的意义。在这里，我们将计算根据 RGB 颜色模型有多少种颜色，HTML 标准中有多少种颜色，一些颜色的名称是如何产生的，以及为什么我们仍然使用这些名称而不仅仅是颜色代码。

有多少种颜色？

世界上的颜色远远不止传统的彩虹色。如果您查看一下 RGB 系统，就会发现有 256^3 = 16,777,216 种颜色，而且它们都有自己的名字！面对数以百万计的颜色，人们不得不发挥创造力来为它们命名。虽然大多数颜色只是一种更常见颜色的色调，但了解这些名称的来源以及它们可能象征的意义总是很有趣的。

HTML 颜色名称

W3C 颜色名称规范区分了基本色和扩展色。HTML4 有一个包含 140 个名称的颜色名称列表，其中包括 16 种基本颜色–水蓝色、黑色、蓝色、紫红色、灰色、绿色、酸橙色、栗色、海军蓝、橄榄色、紫色、红色、银色、茶色、白色和黄色。在 HTML5 中，您总共可以使用 147 个颜色名称，其中包括 17 种基本颜色。HTML5 中增加的基本颜色名称是橙色。

图中展示了 17 种基本颜色的 HEX 代码：

文本 “颜色名称列表 – 含 HEX 代码的 17 种基本 HTML 颜色”

您还可以使用 HTML 颜色代码(HEX、RGB、RGBA、HSL 和 HSLA)在网站上定义颜色。更多信息，请访问 HTML 颜色代码 一文。

一段历史

HTML 颜色名称从何而来？颜色最初是麻省理工学院发布的图形用户界面 X Window System(X) 的产物。1986 年，X10R3 版本的图形用户界面颜色列表包括 69 种基本色调。随后，1988 年的 X11R2 增加了三种颜色，包括相同色调的灰色和灰色。据说惠普公司的程序员记不住正确的拼写，决定使用两种拼写以防出错。

1989 年，保罗-拉维林(Paul Raveling)对 X11R4 进行了重大升级，推出了 papaya whip和 lemon chiffon 等一系列淡雅的中性色调，以及 blanched almond 和peach puff等其他知名度较高的色调。在 80 年代，由于机器制造商的不同，显示器之间的颜色差异很大。美国国家标准协会(ANSI)发布了网络色彩属性标准，但拉维林未能受到该协会的制裁，于是他决定自己动手。拉维林从现已倒闭的辛克莱油漆公司(Sinclair Paints)中提取了这些名称，并为自己的惠普显示器校准了颜色。

X11 之后又有了一套更大胆的颜色名称，这要归功于另一位程序员约翰-C-托马斯(John C. Thomas)。他更改了色调的名称，以减少用户的混淆。据称，一盒 72 支 Crayola 蜡笔帮了他大忙。由此诞生了 aquamarine、orchid 和 salmon 等。

2001 年，万维网联盟(W3C)发布了 CSS 3 颜色模块的第一个工作草案，其中包括颜色。颜色鬃毛数据库引起了激烈的讨论和严厉的批评。颜色命名方案受到了批评。例如，dark gray 比 gray 更浅；并非所有颜色都有深色或浅色版本；颜色分布不均，偏向红色和绿色，远离蓝色。

其他争议点还包括语言和文化问题。对于许多母语不是英语的人来说，一些颜色名称似乎令人生厌；另一些人则认为 indian red具有潜在的种族含义，并认为许多颜色名称具有地区性。应该指出的是，这些问题今天仍然存在。

下图显示了 RGB 立方体模型，以及保罗-拉维林和约翰-托马斯加入的颜色。拉维林使用辛克莱油漆的名称添加了一组米白色色调。托马斯则使用 Crayola 的名称添加了大胆的色调：

文本 “拉维林的托马斯颜色在 RGB 立方体中的分布，用于 HTML 颜色名称列表”

2014 年，HTML 颜色名称列表中出现了一种新的颜色。为了纪念受人尊敬的程序员和 CSS 作家 Eric Meyer 的女儿 Rebecca Meyer，Rebecca purple应运而生。颜色(#663399)是女孩最喜欢的颜色。丽贝卡六岁时死于脑癌。

文本 “RebeccaPurple 颜色(含 HEX 和 RGB 编码)”

颜色名称的演变

那么，我们为什么需要 HTML 颜色名称呢？毕竟我们可以使用颜色代码！答案有很多，但最主要的可能是，人们并不认为颜色是一组数字和字母；使用颜色名称来表示一个人更为自然。颜色名称的历史是一个引人入胜的话题，它说明了语言、文化和技术的演变。从古埃及人到现代网页设计师，几千年来人们一直使用颜色名称来描述和定义周围的世界。

颜色的名称会随着时间的推移而改变，我们今天认为的某种颜色在过去可能并非如此。例如，我们现在所知的 “橙色 “在古代被称为 “黄红色”。紫色曾经是皇室专用的颜色，因为它是用昂贵的染料制成的。颜色名称的起源可以追溯到古代，当时人们通常用自然界的物体或文化现象来命名颜色。例如，“红色 “是以梵文 “raktam “命名的，意思是血。绿色 “来自古英语单词 “grēne”，原意是 “幼嫩 “或 “未成熟”，反映了植物幼叶的颜色。

当今最流行的一些颜色名称是 HTML 颜色名称，用于定义网页设计中的颜色。这些名称包括 “矢车菊蓝”、“薰衣草”、“柠檬雪纺”、“木瓜脆”、“淡金黄 “和 “白烟 “等颜色。设计师使用色彩名称来唤起他们作品中的某种情绪和意境，这可以成为传达他们愿景的有力工具。

关于 HTML 颜色名称的一些要点

要使用 HTML 颜色名称，必须正确拼写颜色名称！HTML 颜色名称不区分大小写，因此可以使用小写和大写字母。例如，“darkred”、“DarkRed “和 “DARKRED “都是有效的。
HTML 颜色名称的颜色范围有限。它们可能无法涵盖所有可能的色调或变化。如果您需要一种 HTML 颜色名称无法表示的特定颜色，您可能需要使用 HEX、RGB 或其他颜色代码。您可以使用颜色转换器这种免费的在线工具，在 HTML 颜色名称、RGB、HEX、HSL、HSV、HWB、LAB、CMYK、LCH、XYZ 等不同颜色代码之间转换颜色。
HTML 颜色名称通常与现代浏览器高度兼容。但一些非常老旧或很少使用的浏览器可能只支持某些 HTML 颜色名称，或者在解释颜色名称时有细微差别。
值得注意的是，在各种 CSS 框架、库和设计资源中都有扩展的颜色名称列表，它们本身并不是 HTML 标准的一部分，但却经常被使用。虽然扩展颜色名称并不能在所有浏览器和平台上得到普遍认可或支持，但在某些不考虑兼容性的情况下，它们还是可以使用的。
要在网页中使用 HTML 颜色，请确保您选择的颜色名称符合可访问性指南。使用具有足够对比度的颜色组合，以确保视障用户的可读性。诸如颜色对比度检查器之类的工具可以帮助您验证所选颜色是否符合推荐的可访问性标准。
HTML 颜色名称是主观的，在不同的语言、文化或环境中可能会有不同的解释或联想。此外，颜色本身和调色板还与特定的情绪和心情相关联，这在不同的文化中可能会有所不同！例如，在西方社会，白色与婚礼、纯洁和干净有关。然而，在许多亚洲文化中，这种颜色象征着死亡、哀悼和谦卑。在为网站本地化选择颜色时，请考虑其含义和背景。
HTML 颜色名称可以在各种 HTML 属性中使用，这些属性允许您指定颜色。我们将在文章的下一部分对此进行详细介绍。

使用 HTML 颜色名称

对于从事网页开发的人来说，HTML 和 CSS 颜色名称是家常便饭。在 HTML 和 XHTML 中，文字、背景、框架边框、表格和单个表格单元格都可以使用颜色。您可以使用以下方法设置颜色：

使用内联 style 属性。您可以在 HTML <body>、<p>、<table>、<div>、<h1> 或 <h2> 标记等中应用 style 属性。请记住，使用 style 属性会覆盖 HTML <style> 标记或外部样式表中设置的任何样式。
使用内部 CSS。内部 CSS 样式选项通过将所有样式封装在 HTML 文档的<head>中的<style>元素中，将属性应用于单个页面，因此很受欢迎。

下面是一个使用 HTML 颜色名称为文本、背景和边框着色的示例。我们使用不同的方法来指定颜色：

 1<html>
 2	<head>
 3		<title>HTML color names</title>
 4		<style>
 5			h2 {
 6			color:DarkRed;
 7			}
 8			p {
 9			color:DimGray;
10			}
11		</style>
12	</head>
13	<body style="background-color:OldLace;">
14		<h2>Color Names List</h2>
15		<p>The HTML5 standard set of 147 color names, known as X11 color names, provides a color names list to represent different hues.</p>
16		<h2>Basic Color Names</h2>
17		<p style="background-color:White; border-style:solid; border-color:DarkRed"> There are 17 basic color names in HTML5. They are widely supported across different browsers and platforms.</p>
18	</body>
19</html>

呈现的 HTML 代码如下

文本 “图像渲染 HTML 代码，用于设置文本、背景和边框颜色”。

有关如何更改文本、背景或边框颜色的详细信息，请访问文章 使用 HTML 颜色和 如何使用文章章节。本章中的文章回答了常见问题，并包含 C# 示例，提供了使用 Aspose.HTML for .NET 解决特定任务的必要信息。

局限性

HTML 颜色名称的主要局限性之一是其集合有限。这意味着您可能无法用 HTML 颜色名称来表示某些色调或变化，而需要使用其他颜色表示方法，如 HEX 或 RGB 代码。
另一个限制因素是，并非所有浏览器都能以类似方式显示 HTML 颜色名称。不同浏览器和设备对颜色的解释可能略有不同。对于需要精确配色的设计项目来说，这种不精确性尤为重要。
其他限制还涉及透明度控制和文件的印刷准备。为此，有必要使用颜色代码(RGBA、HSLA、CMYK 等)，它们是完成这些任务的理想选择。

有趣的事实

Grey 和Gray、青色和水蓝色、紫红色和品红色的 HEX 值和 RGB 值相同：

文本 “灰色和灰色、青色和水蓝色、紫红色和洋红色(含 HEX 和 RGB 编码)”

惠普公司的程序员们似乎记不住 “gray”(Gray)一词中 “a “的正确拼写，因此添加了一个重复的选项(Grey)，以避免代码中的错误。这种重复影响了其他一些 HTML 颜色名称：

Darkgray & Darkgrey – HEX #A9A9A9, RGB(169, 169, 169)
Darkslategray & Darkslategrey – HEX #2F4F4F, RGB(47, 79, 79)
Dimgray & Dimgrey – HEX #696969, RGB(105, 105, 105)
Lightslategray & Lightslategrey – HEX #778899, RGB(119, 136, 153)
Lightgray & Lightgrey – HEX #D3D3D3, RGB(211, 211, 211)
Slategray & Slategrey – HEX #708090, RGB(112, 128, 144)

我们都知道，红色对应的颜色代码为 #ff0000。HTML 颜色名称蓝色对应 #0000ff。我们希望绿色与 #00ff00 对应。但事实并非如此！颜色名称绿色对应的是 #008000。而 #00ff00 则需要使用莱姆色。

文本 “红、蓝、绿颜色(含 HEX 和 RGB 编码)”

让我们来看看灰色的深浅。我们不希望深灰色比灰色浅！

文本 “深灰色、灰色和浅灰色(含 HEX 和 RGB 编码)”

重命名 HTML 颜色的建议

讨论了三种颜色的变化，建议用新名称取代旧名称：

程序员、设计师和用户仍在继续讨论颜色名称，这没有关系。我们将举例说明一些尚未反映在正式规范中的讨论。我们建议对三种颜色进行更改，其中旧名称将被新名称取代：

IndianRed 到 ChestnutRose
Moccasin 到 Peach
NavajoWhite 到 OldPaper

IndianRed 是以印度一种著名的红色颜料命名的，与美国原住民无关。IndianRed 这个名字来源于在印度发现的红土，它由天然存在的铁氧化物组成。它最早是由苏格兰科学家弗朗西斯-布坎南-汉密尔顿(Francis Buchanan-Hamilton)鉴定出来的。1672 年，首次在英语中使用 “印度红 “作为颜色术语。

值得注意的是，IndianRed–克雷奥拉蜡笔颜色的名称–公司将其更名为栗色，可能是因为围绕这个名称的讨论。

文本 “蜡笔小新重命名前后”

软皮鞋颜色主要属于黄色系。它是橙色和棕色的混合色。也许Moccasin没有什么特别的含义。它只是一种鞋的名字。也许对这种颜色名称的潜在反对意见来自于这样一个事实，即它是一种历史上属于美国本土的鞋子。

纳瓦霍白(NavajoWhite)是一种淡粉色的黄橙色调，常用于室内绘画。颜色名称参考了纳瓦霍民族国旗的背景。虽然它是一种浅色，但并不像名字所暗示的那样是白色或米白色。它与其他颜色相似，如桃酥色、麦色和软皮鞋色。

文本 “IndianRed、Moccasin 和 NavajoWhite 颜色(含 HEX 和 RGB 编码)”

在线颜色名称

免费在线 颜色名称 应用程序可通过颜色代码值搜索颜色名称。您可以输入任何格式的颜色代码，如 HTML 颜色名称、RGB、HEX、HSL、HSV、HWB、LAB、LCH、CMYK、XYZ、OKLAB 或 OKLCH。你还会看到 “相似度 “最高的颜色名称列表。该应用程序可在电脑、平板电脑和移动设备上运行。它对需要使用颜色的艺术家和设计师很有帮助。使用我们的颜色名称应用程序识别颜色，并使用或分享它们！安全、可靠、清晰。

注：在本应用中，“相似度 “指的是余弦相似度，它基于两个向量在多维色彩空间(如 RGB、HSV)中角度的余弦值。余弦相似度的定义是两个向量的点积除以长度的乘积。数值 1 表示颜色相同，0 表示正交(无相似性)。

结论

HTML 颜色名称为网页开发中的颜色规范提供了一种便捷的方法。颜色名称在许多领域的使用证明，许多人不喜欢使用代码和数字。人们不会用 #FFA500 的术语来思考某些色调，而是用类比的方式来思考–橙色！使用名称来定义颜色对人们来说更自然。
HTML 和 CSS 提供 147 种命名颜色，这些颜色的名称灵感来自自然、情感或历史渊源，RGB 系统支持 16,777,216 种颜色。
HTML 颜色名称有几个局限性，其中包括一组受限的颜色，可能无法涵盖所有色调或变化，因此设计师需要使用 HEX 或 RGB 编码来更精确地表示颜色。
在使用 HTML 颜色名称时，正确的语法、支持和可访问性指南以及文化背景都至关重要，这些颜色名称可用于网页设计中的文本、背景和边框。

另见

HTML 颜色代码在 HTML 中添加图像