color

摘要

本页解释了 HTML 和 CSS 中可用的不同颜色指定机制。

基本的 HTML 颜色关键词

HTML 4.01 规范定义了 16 个颜色关键词。无论用户显示卡的颜色分辨率如何，这些颜色始终可以正确渲染。例如，您可以使用以下 CSS 指定纯红色文本：

color: red; /* color rendered pure red */

层叠样式表，级别 2 修订版 1 (CSS2.1) 规范包括“橙色” (#FFA500)，总共 17 个颜色关键词。

扩展的颜色关键词

除了上述颜色之外，大多数浏览器还支持扩展的颜色关键词列表。以下链接指向按各种方式排序的颜色表。命名的颜色不能代表完整的颜色光谱；因此，为了获得最佳结果，请使用 RGB 或 HSL 颜色值。基本和扩展的颜色关键词在 CSS 颜色模块级别 3 扩展颜色关键词部分中定义。

十六进制和 RGB 表示法

RGB 颜色值可以通过两种方式指定：

一个“#”，紧接着三个两位十六进制数字，分别指定三个颜色通道的强度：红色、绿色和蓝色。

color: #FF0000; /* Text rendered pure red because the red channel is set to its highest value, FF.*/

还有一种简写表示法，长度为三位数字而不是六位数字，例如 #FFF。所有旧的和新的浏览器都支持这种语法，但是，不同的浏览器、操作系统和显示器有时会略有不同地显示颜色。三位十六进制颜色调色板比六位十六进制颜色调色板短。因此，虽然简写可以节省一些字节大小，但结果是可用的颜色选项较少。考虑纯红色示例：

color: #FF0000; /* Six total, two hexadecimal digits in each of the three parts.  */
color: #F00; /* Three total, one hexadecimal digits in each of the three parts. */

RGB() 函数，其中包含三个由逗号分隔的值，分别指定三个颜色通道的强度：红色、绿色和蓝色。上述红色可以使用以下任一种方式指定：

color: rgb(255,0,0) /* text rendered pure red because the red channel is set to its highest integer value, 255.*/
color: rgb(100%,0%,0%) /* text rendered pure red because the red channel is set to its highest percentage value, 100%.*/

为什么是 255？现代计算机使用 256 位颜色，这意味着它们可以显示大约 1670 万种不同的颜色 (256 x 256 x 256；十六进制数字有 16 个不同的值，0-9 然后是 a-f — 16 x 16 = 255)。由于计算机从 0 而不是 1 开始计数，因此值范围是 0-255，而不是 1-256。

RGBA 表示法

在现代浏览器（Opera、Firefox、Chrome、Safari 和 Internet Explorer 9+）中，支持 RGB 颜色模型的一个对应物 — RGBA — 也可以接受一个“alpha”值，指定颜色的不透明度。RGBA 值的格式与 RGB 相同，但添加了一个介于 0（完全透明，因此不可见）和 1（完全不透明）之间的数值。

color: rgba(255,0,0,0.5) /* text rendered semi-transparent red */
color: rgba(100%,0%,0%,0.5) /* text rendered semi-transparent red */

HSL 和 HSLA 表示法

现代浏览器（Opera、Firefox、Chrome、Safari 和 Internet Explorer 9+）还支持一个 <acronym title="色相饱和度明度">HSL</acronym> 颜色模型，它也是一个接受三个值的函数：

色相采用 0-360 范围内的度数值，表示颜色在标准色轮上旋转了多少度。下表可以让你了解它是如何工作的。

度数	Name	颜色
0°	red
60	yellow
120	lime
180	cyan
240	blue
300	magenta
360	red

饱和度表示为百分比，其中 100% 是完全颜色饱和度，而 0% 是灰色阴影。
亮度也表示为百分比，其中 50% 是正常，0% 是纯黑色，而 100% 是纯白色。

HSL 还有一个相应的函数，它接受一个 alpha 通道值 — HSLA hsla() alpha 对应物，允许你使用介于 1 和 0 之间的数值来指定不透明度。

color: hsl(0, 100%, 50%) /* red */
color: hsla(0, 100%, 50%, 0.5) /* semi-transparent red */

color: hsl(120, 100%, 50%) /* lime green */
color: hsl(120, 100%, 20%) /* dark green */
color: hsl(120, 100%, 80%) /* light green */
color: hsl(120, 75%, 75%)  /* pastel green */

系统颜色

注意：CSS2 系统颜色值已被弃用，转而支持 CSS3 appearance 属性。如果你想模拟用户界面相关元素或控件的外观，请使用“appearance”属性，而不是尝试通过系统颜色的组合来模仿用户界面元素。

也可以指定系统颜色，例如，你可以指定希望文本与突出显示的文本颜色相同；这些仅受 Windows 支持。与命名的颜色不同，系统颜色没有数字 RGB 等效值，因为确切的颜色直到在用户的系统上查看网页时才知道。这样，系统颜色就是用户定义的，因为用户可以从 Windows 控制面板中选择自己的系统颜色方案。下表演示了在默认颜色设置的 Windows Vista 系统上显示的适当的文本和背景颜色。

named system colors.png

请注意，系统颜色名称在 https://w3org.cn/TR/css3-color/ CSS 颜色模块级别 3 推荐规范中已被弃用，并且由于它们仅适用于 Windows，因此不建议使用它们。

有关完整的系统颜色列表，请参阅用户定义的系统颜色。

currentColor

你可以使用 currentColor 值将颜色设置为元素的计算 color 属性值。例如，以下示例中 div 的背景颜色将为红色，与父元素的 color 相同。

<article style="color:red">
  <p>This is a sample article</p>

  <div style="background-color:currentColor">
    <p>This is some kind of highlight box.</p>
  </div>
</article>

透明关键词

请注意，CSS 颜色模块级别 3 规范定义了一个关键词 transparent，这在需要时覆盖先前设置的颜色时非常有用。它等效于 rgba(0,0,0,0)，即完全透明的黑色。

直到 CSS3 中定义为真实值，此值以前仅定义为 background 和 border 属性的覆盖值。transparent 在所有现代浏览器（包括 IE9+）的所有属性上都受支持。