颜色 | CSS-Tricks

CSS 中的 color 属性设置文本和文本装饰的颜色。

p {
  color: blue;
}

color 属性可以接受任何 CSS 颜色值。

p {
  color: aqua;
}

命名颜色也称为关键字颜色、X11 颜色或 SVG 颜色。所有命名颜色默认情况下都是不透明的，除了 transparent，它是完全透明或“清晰”的。查看我们的命名颜色和十六进制等效项代码段，了解命名颜色的列表。

十六进制颜色，或十六进制颜色，使用字母数字值指定。前一对字符代表红色值，第二对字符代表绿色值，第三对字符代表蓝色值，所有值范围从 00 到 FF。

p {
  color: #00FFFF;
}

如果红色、蓝色和绿色值的配对都是双倍的，您可以将十六进制值缩写为 3 个字符的简写——例如，#00FFFF 可以缩写为 #0FF。

.full-hex {
  color: #00FFFF; /* aqua */
}
.abbreviated-hex {
  color: #0FF; /* also aqua */
}

RGB 颜色使用三个数字值（范围从 0 到 255）或百分比值（范围从 0% 到 100%）的逗号分隔列表指定。第一个值代表红色值，第二个代表绿色值，第三个代表蓝色值。 RGB 颜色默认情况下是不透明的。

p {
  color: rgb(0, 255, 255);
}

RGBa 添加了第四个值用于 alpha 通道，它设置颜色的不透明度。 alpha 值是在 0.0（完全透明）到 1（完全不透明）范围内的数字。

p {
  color: rgba(0, 255, 255, .5);
}

HSL 颜色使用三个值的逗号分隔列表指定：色相的度数（范围从 0 到 360 的数字）、饱和度 百分比（范围从 0% 到 100%）和亮度百分比（范围从 0% 到 100%）。 HSL 颜色默认情况下是不透明的。

p {
  color: hsl(180, 100%, 50%);
}

HSLa 添加了第四个值用于 alpha 通道以控制颜色的不透明度。 alpha 值是在 0.0（完全透明）到 1（完全不透明）范围内的数字。

p {
  color: hsla(180, 100%, 50%, .5);
}

查看 CodePen 上的 CSS-Tricks 的 Pen 颜色值 (@css-tricks)。

color 属性会级联。如果您在 body 上设置它，所有后代元素将继承该颜色，除非它们在用户代理样式表中设置了自己的颜色。

边框会继承 color，除非在 border 声明中指定了颜色值。

color 属性应用于 text-decoration 线。在支持 text-decoration-color 属性的浏览器中，您可以为文本及其装饰线指定不同的颜色。

color 也应用于列表项标记（如项目符号和数字）。您无法为列表项标记设置单独的颜色，但可以使用 list-style 属性将它替换为图像。

虽然命名颜色和十六进制颜色没有 alpha 通道，但您可以在所有当前浏览器和 IE9+ 中使用 opacity 属性设置它们的不透明度。

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	任何	任何 *	任何	任何