HTML 颜色代码 – 关于 HEX、RGB、RGBA、HSL 和 HSLA 的全部内容

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

HTML 颜色

HTML 颜色是用于显示网页的颜色。它们与使用各自的颜色代码描述和定义这些颜色的方法密切相关。例如，HTML 颜色可以用常用的英文颜色名称或 HEX 值、RGB 三胞胎、HSL、RGBA 和 HSLA 值来指定。

色彩在形成网页内容的感知价值以及人们在浏览网页时的情感体验方面起着至关重要的作用。在 HTML 和 XHTML 中，文字、背景、框架边框、表格和单个表格单元格都可以使用颜色。

HTML 颜色名称

HTML 颜色名称对于从事网络开发的人来说是家常便饭。W3C 的颜色名称规范区分了基本颜色和扩展颜色。HTML4 有 140 种颜色名称，包括 16 种基本色–水蓝色、黑色、蓝色、紫红色、灰色、绿色、青绿色、栗色、海军蓝、橄榄色、紫色、红色、银色、茶色、白色和黄色。在 HTML5 中，您总共可以使用 147 个 HTML 颜色名称，其中包括 17 种基本颜色。HTML5 中的附加颜色名称是橙色。

图中用 HEX 和 RGB 编码说明了 16 种基本颜色：

文本 “16 种基本 HTML 颜色(含 HEX 代码和 RGB 代码)”

HTML 颜色代码

HTML 颜色代码是一种表示计算机可以读取和显示的颜色格式的方法。颜色代码在 HTML 和 CSS 中用于创建网页设计颜色方案。它们主要用于网页设计师、前端开发员、程序员和数字插图画家。

RGB 颜色

RGB(Red, Green, Blue)是一种加色模型，描述了如何使用三种基本颜色对任何颜色进行编码。它是电视屏幕、电脑、图像扫描仪、视频投影仪、数码相机和移动设备上光线显示色彩的基础。

文本 “作为加色法色彩模型的 RGB 色彩”

R、G 和 B 的值分别是所确定颜色的红色、绿色和蓝色分量的强度(范围从 0 到 255)。也就是说，亮蓝色可以定义为 (0,0,255)，红色可以定义为 (255,0,0)，亮绿色 – (0,255,0)，黑色 – (0,0,0)，白色 – (255,255,255)。RGB 是摄影、电视和计算机制图中常用的色彩编码模式。由于每种颜色有 256 种不同的数量选项。因此，总共可以有 256^3 = 16,777,216 种不同的 RGB 颜色。将这三种颜色混合在一起，就可以得到一个 RGB 颜色代码，例如 RGB(125,50,210)。

传达颜色的最典型方式之一是通过图表或图形模型等视觉系统，其中每种颜色都有自己的独立坐标集。例如，RGB 颜色系统可以表示为一个立方体，每个面上有 256 个离散点：

文本 “作为表示 RGB 颜色系统的图形模型的 RGB 立方体”

从历史上看，RGB 模式一直被选为网络开发的主要模式，因为它与屏幕的操作直接相关，屏幕使用红、绿、蓝像素来显示颜色。

十六进制颜色

HEX 代码是最常用的颜色代码。HEX 代码是三字节十六进制数(六个变量)。六位数的颜色编号分为三组，每组两位数，分别指定加色中的红、绿、蓝量。每个两位十六进制数对的数值范围为 00 到 FF。这样就有超过 1600 万种可能的颜色。

代码表示如下：#RRGGBB，其中每个两位数的值都是三种颜色(红、绿、蓝)的范围，您可以选择代表每种颜色的最终值。例如，#00FF00 显示为绿色，因为绿色部分被设置为最大值 (FF)，而其他部分被设置为 00。

RGBA 颜色

RGBA(Red, Green, Blue, Alpha)色值是 RGB 色值的扩展，其中的阿尔法通道决定了颜色的不透明度。alpha 参数是一个介于 0.0 和 1.0 之间的数字，0.0 表示 “完全透明”，1.0 表示 “完全不透明”。例如，rgba(255, 0, 0) 显示为纯红色，rgba(255, 0, 0, 0.5) 显示为不透明度为 50%的红色。

图中显示了不同透明度的 YellowGreen 颜色的 RGBA 值：

文本 “颜色名称为 “YellowGreen “的 RGBA 值，透明度不同”。

RGBA 值与 RGB 值不同，没有十六进制符号。

HSL 颜色

许多人认为 RGB 色彩代码是非直观的，是以硬件为导向的。HSL(Hue, Saturation, Lightness)色彩模型是 20 世纪 70 年代由计算机图形学研究人员开发的，旨在更贴近人类视觉感知色彩属性的方式。在 HSL 模型中，每个色相的颜色都围绕中性色的中心轴呈放射状排列，从底部的黑色到顶部的白色。与 RGB 表示法相比，HSL 表示法对颜色进行了重新排列，使其更加直观。它通常用于计算机图形应用，如颜色选择器和图像分析。

图中(a)是 HSL 模型的三维图解；图片来自 commons.wikimedia.org/wiki/。图 (b) 显示的是亮度值为 50% 时 HSL 模型的二维图解。

文本 “HSL 颜色模型”

HSL 是 RGB 颜色模型在圆柱坐标中的表示。色调定义了基本颜色。色相基本上是色轮上的任何颜色；它是色轮上从 0 到 360 的一个度数。因此，0 代表红色，120 代表绿色，240 代表蓝色。饱和度是颜色的强度或纯度。它决定了颜色的鲜艳程度。0% 是灰色，100% 是完全饱和的颜色。明度是色彩的亮度或亮度。明度决定颜色的黑白色调程度。例如，50% 没有色调，0% 完全是黑色，100% 完全是白色。

HSL 颜色示例

下表列出了一种色调。从颜色圈中选择红色，色相=0。表格的 X 轴代表饱和度(100%、75%、50%、25%、0%)。Y 轴代表明度。50% 为 “正常”。

文本 “HSL 示例：一组色相=0 的不同颜色，红色”

HSLA 颜色

HSLA(Hue, Saturation, Lightness, Alpha)色值是 HSL 色值的扩展，其中的阿尔法通道决定了颜色的不透明度。HSLA 颜色值由色相、饱和度、亮度和 alpha 指定，其中 alpha 参数指定不透明度。alpha 参数是一个介于 0.0 和 1.0 之间的数字，0.0 表示 “完全透明”，1.0 表示 “完全不透明”。例如，hsla(0, 100%, 50%, 1) 显示为纯红色，hsla(0, 100%, 50%, 0.5) 显示为不透明度为 50% 的红色：

文本 “不同不透明度红色的 HSLA 颜色代码”

为什么 HTML 不支持其他颜色格式？

HTML 和 CSS 专为在屏幕上显示网页内容而设计。屏幕使用 RGB(红、绿、蓝)色彩模型，与显示器再现色彩的方式相匹配。RGB 及其衍生物(RGBA、HEX、HSL、HSLA)对于基于屏幕的色彩表现非常直观。

HTML 和 CSS 不支持 CMYK、HSV、HWB、Lab、Oklab、LCH、Oklch 和 XYZ 等其他颜色格式，原因有很多。让我们来看看其中的一些原因：

CMYK色彩模型主要用于印刷，显示油墨在纸张上的混合情况。它不适合使用光来显示颜色的数字屏幕。
色彩格式 HSV、HWB、Lab、Oklab、LCH、Oklch 和 XYZ在图形设计、图像处理和色彩科学中较为常见。它们用于需要精确色彩处理的任务，但与网络开发关系不大。
支持多种色彩模型将要求浏览器在这些模型和 RGB 之间进行转换以进行显示，从而导致额外的开销和潜在的性能问题。
保持色彩模型的简单性，并将其限制在几个可理解的选项(RGB、HEX、HSL)内，可降低开发人员的复杂性。这样就能确保大多数使用案例都能得到处理，而无需理解或在不同颜色模型之间进行转换。

虽然传统 CSS 不支持高级颜色模型，但 CSS 颜色模块 4 级及更高版本引入了复杂的颜色空间，如 lab()、lch() 和 oklab() 等。这些创新技术尚未在所有浏览器中得到广泛支持，但它们表明，随着对更精确色彩控制需求的增长，人们正朝着支持更多色彩空间的方向迈进。

结论

HTML 颜色可以通过名称、RGB、RGBA、HEX、HSL 或 HSLA 值来定义，并应用于 HTML 文档中的背景或文本。

下图说明了如何通过名称、RGB、RGBA、HEX、HSL 和 HSLA 值指定茶色：

文本 “茶色用名称、HEX、RGB、RGBA、HSL 和 HSLA 值表示”

HTML 和 CSS 是专为在屏幕上显示网页内容而设计的。屏幕使用 RGB(红、绿、蓝)色彩模型，该模型直接映射显示器产生色彩的方式。RGB 及其衍生物(RGBA、HEX、HSL、HSLA)是基于屏幕的直观色彩表示方法。不过，随着 CSS 规范的不断发展，未来可能会逐渐支持更多的色彩空间和更复杂的色彩处理。

另见

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

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

HTML 教程 HTML 颜色名称