---
title: CSS Color
slug: Web/CSS/CSS_Color
translation_of: Web/CSS/CSS_Color
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong>CSS Color </strong>是一个处理颜色的 CSS 模块，包括颜色类型、颜色混合、不透明度、以及你如何将这些颜色和效果应用于 HTML 内容。</span></p>

<p>不是所有把 {{cssxref("&lt;color&gt;")}}  作为值的 CSS 属性都是这个模块的一部分，但是它们确实依赖这个模块。</p>

<h2 id="参考">参考</h2>

<h3 id="属性">属性</h3>

<div class="index">
<ul>
 <li>{{cssxref("color")}}</li>
 <li>{{cssxref("color-adjust")}}</li>
 <li>{{cssxref("opacity")}}</li>
</ul>
</div>

<h3 id="数据类型">数据类型</h3>

<div class="index">
<ul>
 <li>{{cssxref("&lt;color&gt;")}}</li>
</ul>
</div>

<h2 id="教程">教程</h2>

<dl>
 <dt><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt>
 <dd>一份用 CSS 将颜色应用于许多不同类型内容上的教程。所有和颜色相关的 CSS 属性都会涉及。</dd>
</dl>

<h2 id="工具">工具</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">Color picker tool</a></dt>
 <dd>该工具能让你创建、调整和试验自定义颜色变得简单。</dd>
</dl>

<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')}}</td>
   <td>{{Spec2('CSS4 Colors')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初次定义</td>
  </tr>
 </tbody>
</table>

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

<h3 id="color_属性"><code>color</code> 属性</h3>

<div>


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

<h3 id="color-adjust_属性"><code>color-adjust</code> 属性</h3>

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

<h3 id="opacity_属性"><code>opacity</code> 属性</h3>

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

<h2 id="同时参阅">同时参阅</h2>

<ul>
 <li>有与颜色有关属性的其他规范: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
 <li>在 CSS 中，渐变不是颜色，而是 <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>.</li>
</ul>