颜色

**color** CSS 属性设置元素文本和文本装饰的前景色颜色值，并设置currentcolor值。currentcolor可用作其他属性的间接值，并且是其他颜色属性（如border-color）的默认值。

试一试

有关在 HTML 中使用颜色的概述，请参阅使用 CSS 将颜色应用于 HTML 元素。

语法

css
/* Keyword values */
color: currentcolor;

/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> values and legacy <rgba()> values*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);

/* <hsl()> values and legacy <hsla()> values */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* <hwb()> values */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

/* Global values */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;

color 属性指定为单个<color>值。

请注意，该值必须是统一的颜色。它不能是<gradient>，后者实际上是一种<image>类型。

值

<color>

设置元素的文本和装饰部分的颜色。

currentcolor

将颜色设置为元素的 color 属性值。但是，如果设置为 color 的值，则 currentcolor 将被视为 inherit。

无障碍访问

必须确保文本颜色与其放置在其上的背景颜色之间的对比度足够高，以便视力障碍者能够阅读页面内容。

颜色对比度是通过比较文本和背景颜色值的亮度来确定的。为了满足当前的网络内容无障碍指南 (WCAG)，文本内容需要 4.5:1 的对比度，标题等较大的文本需要 3:1 的对比度。较大的文本定义为 18.66px 及其以上且粗体或 24px 及其以上。

正式定义

初始值canvastext
应用于所有元素和文本。它也适用于::first-letter和::first-line。
继承是
计算值计算颜色
动画类型按计算值类型

正式语法

color = 
  <color>

示例

使文本变为红色

以下是一些使段落文本变为红色的方法

css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255 0 0);
}
p {
  color: rgb(100% 0% 0%);
}
p {
  color: hsl(0 100% 50%);
}

/* 50% translucent */
p {
  color: #ff000080;
}
p {
  color: rgb(255 0 0 / 50%);
}
p {
  color: hsl(0 100% 50% / 50%);
}

规范

规范
CSS 颜色模块 Level 4
# the-color 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅