color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

尝试一下

color: rebeccapurple;

color: #00a400;

color: rgb(214, 122, 127);

color: hsl(30deg 82% 43%);

color: hsla(237deg 74% 33% / 61%);

color: hwb(152deg 0% 58% / 70%);

<section id="default-example">
  <div class="example-container">
    <p id="example-element">
      London. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall. Implacable November weather.
    </p>
  </div>
</section>

#example-element {
  font-size: 1.5em;
}

.example-container {
  background-color: white;
  padding: 10px;
}

对于在 HTML 中使用颜色的概述，请参考使用 CSS 为 HTML 元素应用颜色。

语法

css
/* 关键字值 */
color: currentcolor;

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

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

/* <rgb()> 值 */
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.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> 值 */
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 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* <hwb()> 值 */
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%);

/* 全局值 */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;

color 属性被指定为 <color> 类型的单值。

注意值必须是一致的 color 值。它不可以是 <gradient>（实际上为 <image> 类型之一）。

值

<color>

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

currentcolor

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

无障碍考虑

有一点很重要，要确保文本颜色与文本所在背景之间的对比度足够高，以便低视力的人群能够阅读页面内容。

颜色的对比度是通过比较文本和背景颜色值的亮度确定的。要符合当前的 Web 内容无障碍指南（WCAG），文本至少要有 4.5:1 的比例，大文本（比如标题）至少要有 3:1 的比例。具有加粗和至少 18.66px 大小，或者具有至少 24px 大小的文本称为大文本。

形式定义

初始值canvastext
适用元素所有元素和文本. It also applies to ::first-letter and ::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% 透明 */
p {
  color: #ff000080;
}
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}

规范

Specification
CSS Color Module Level 4
# the-color-property
Scalable Vector Graphics (SVG) 2
# ColorProperty

浏览器兼容性

参见