---
title: color
slug: Web/CSS/color
tags:
  - CSS
  - CSS 属性
  - CSS 文本
  - CSS 颜色
  - HTML 样式
  - HTML 颜色
  - Web
  - color
  - 参考
  - 布局
translation_of: Web/CSS/color
---
<div>{{CSSRef}}</div>

<div><code>color</code>CSS属性设置<a href="/zh-CN/docs/Web/CSS/color_value">颜色值</a>的前景色以及<a href="/zh-CN/docs/Web/CSS/text-decoration">文本装饰</a>，并设置{{cssxref("currentcolor")}}值。<code>currentcolor</code>可以对其他颜色属性用作不直接的值，比如{{cssxref("border-color")}}。</div>

<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>

<div>对于在HTML中使用颜色的概述，参考<a href="/zh-CN/docs/">使用CSS对HTML元素实现颜色</a>。</div>

<h2 id="语法">语法</h2>

<pre class="brush: css no-line-numbers notranslate">/* 关键词 */
color: currentcolor;

/* &lt;named-color&gt;值 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* &lt;hex-color&gt;值 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* &lt;rgb()&gt;值 */
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%);

/* &lt;hsl()&gt;值 */
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;</pre>

<p><code>color</code> 属性被指定为一个单个的 {{cssxref("&lt;color&gt;")}}值。</p>

<p>注意值必须是规则的 {{cssxref("color")}}。它不可以是{{cssxref("&lt;gradient&gt;")}}（实际上为{{cssxref("&lt;image&gt;")}}的一部分）。</p>

<h3 id="值">值</h3>

<dl>
 <dt>{{cssxref("&lt;color&gt;")}}</dt>
 <dd>设置元素的文本或装饰的颜色。</dd>
</dl>

<h2 id="Accessibility_concerns">Accessibility concerns</h2>

<p>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.</p>

<p>Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, 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 <a href="/zh-CN/docs/Web/CSS/font-weight">bold</a> or larger, or 24px or larger.</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="正规定义">正规定义</h2>

<p>{{cssinfo}}</p>

<h2 id="正规语法">正规语法</h2>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="使文本为红色">使文本为红色</h3>

<p>以下方式可以使得文本显示为红色：</p>

<pre class="brush: css notranslate">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); }</pre>

<h2 id="指定">指定</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
   <td>{{Spec2('CSS4 Colors')}}</td>
   <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br>
    Adds color keyword <code>rebeccapurple</code>.<br>
    Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br>
    Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Adds the <code>orange</code> color and the system colors.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("css.properties.color")}}</p>

<h2 id="另请参阅">另请参阅</h2>

<ul>
 <li>颜色 {{cssxref("&lt;color&gt;")}} 数据类型</li>
 <li>其他颜色相关属性：{{cssxref("background-color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}}、{{cssxref("column-rule-color")}}和{{cssxref("color-adjust")}}</li>
 <li><a href="/zh-CN/docs/Web/HTML/Applying_color">使用CSS对HTML元素应用颜色</a></li>
</ul>