color

color CSS 属性设置颜色值的前景色以及文本装饰,并设置currentcolor (en-US)值。currentcolor可以对其他颜色属性用作不直接的值,比如border-color

尝试一下

对于在 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.0 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.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* 全局值 */
color: inherit;
color: initial;
color: unset;

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

注意值必须是规则的 color。它不可以是<gradient>(实际上为<image>的一部分)。

<color>

设置元素的文本或装饰的颜色。

Accessibility concerns

It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

形式定义

初始值canvastext
适用元素all elements and text. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
计算值computed color
Animation typeby computed value type

形式语法

color = 
<color>

示例

使文本为红色

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

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

浏览器兼容性

BCD tables only load in the browser

参见