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

{{InteractiveExample("CSS Demo: color")}}

```css interactive-example-choice color: rebeccapurple;


```css interactive-example-choice
color: #00a400;

```css interactive-example-choice color: rgb(214, 122, 127);


```css interactive-example-choice
color: hsl(30deg 82% 43%);

```css interactive-example-choice color: hsla(237deg 74% 33% / 61%);


```css interactive-example-choice
color: hwb(152deg 0% 58% / 70%);

```html interactive-example

London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. 


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

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

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

语法

/* 关键字值 */
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 属性被指定为 {{cssxref("<color>")}} 类型的单值。

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

值

  • {{cssxref("<color>")}}
    • : 设置元素的文本和装饰部分的颜色。
  • currentcolor
    • : 将颜色设置为元素的 color 属性值。但是，如果设置为 color 的值，currentcolor 将被视为 inherit。

无障碍考虑

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

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

形式定义

{{cssinfo}}

形式语法

{{csssyntax}}

示例

使文本为红色

以下方式可以使得文本显示为红色：

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);
}