在此页

• 句法
• 可访问性关注
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

color CSS property sets the foreground color value of an element's text and text decorations , and sets the currentcolor 值。 currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

For an overview of using color in HTML, see 使用 CSS 将颜色应用到 HTML 元素 .

句法

/* 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 */
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()> 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.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* Global values */
color: inherit;
color: initial;
color: unset;
				

color property is specified as a single <color> 值。

Note that the value must be a uniform color . It can't be a <gradient> , which is actually a type of <image> .

值

<color>

Sets the color of the textual and decorative parts of the element.

可访问性关注

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.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

形式定义

初始值	Varies from one browser to another
适用于	所有元素。它还适用于 ::first-letter and ::first-line .
继承	yes
计算值	If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0) .
动画类型	a color

形式句法

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
					

范例

Making text red

The following are all ways to make a paragraph's text red:

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: rgba(255, 0, 0, 0.5); }
p { color: hsla(0, 100%, 50%, 0.5); }
					

规范

规范	状态	注释
CSS Color Module Level 4 The definition of 'color' in that specification.	工作草案	Adds commaless syntaxes for the rgb() , rgba() , hsl() ，和 hsla() functions. Allows alpha values in rgb() and hsl() , turning rgba() and hsla() into (deprecated) aliases for them. Adds color keyword rebeccapurple . Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value. 添加 hwb() , device-cmyk() ，和 color() 函数。
CSS Color Module Level 3 The definition of 'color' in that specification.	推荐	Deprecates system-colors. Adds SVG colors. Adds the rgba() , hsl() ，和 hsla() 函数。
CSS Level 2 (Revision 1) The definition of 'color' in that specification.	推荐	添加 orange color and the system colors.
CSS Level 1 The definition of 'color' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
color	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 3	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

另请参阅

• <color> data type
• Other color-related properties: background-color , border-color , outline-color , text-decoration-color , text-emphasis-color , text-shadow , caret-color , column-rule-color ，和 color-adjust
• 使用 CSS 将颜色应用到 HTML 元素

元数据

• 最后修改： Jul 16, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Color
4. 特性

   1. color
   2. color-adjust
   3. opacity