---
title: color
slug: Web/CSS/color
tags:
  - CSS
  - CSS Eigenschaft
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/color
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>color</code></strong> setzt die Vordergrund<a href="/de/docs/Web/CSS/Farben">farbe</a> des Textinhalts eines Elements und seiner <a href="/de/docs/Web/CSS/text-decoration">Dekorationen</a>. Sie hat keinen Einfluss auf andere Charakteristiken des Elements; sie sollte eigentlich <code>text-color</code> genannt werden, jedoch wurde sie aus historischen Gründen und ihrem Auftreten in CSS Level 1 so genannt.</p>

<p>Beachte, dass der Farbwert eine gleichmäßige Farbe sein muss, welche seit CSS3 einen Transparenzwert beinhalten kann. Sie kann kein {{cssxref("&lt;gradient&gt;")}} sein, welcher in CSS ein {{cssxref("&lt;image&gt;")}} ist.</p>

<div>{{cssinfo}}</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">/* Eine CSS Level 1 Farbe */
color: red;

/* Die einzige in CSS Level 2 (Revision 1) hinzugefügte Farbe */
color: <code>orange;</code>

/* CSS Level 3 Farbe, manchmal SVG- oder X11-Farbe genannt */
color: <code>antiquewhite;</code>

/* Die Farbe lindgrün in der 3-Zeichen-Notation */
color: #0f0;

/* Die Farbe lindgrün in der 6-Zeichen-Notation */
color: #00ff00;

/* Eine Farbe, die die verfügbaren funktionalen Notationen verwendet */
color: rgba(34, 12, 64, 0.3);

/* Verwende die Farbe des direkten Vorfahren des Elements */
color: currentcolor;

/* Globale Werte */
color: inherit;
color: initial;
color: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>&lt;color&gt;</code></dt>
 <dd>Ist ein {{cssxref("&lt;color&gt;")}} Wert, der die Farbe von Textelementen innerhalb des Elements bestimmt.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<p>Die folgenden Zeilen sind Beispiele, wie der Text des Elements rot eingefärbt werden kann:</p>

<pre class="brush: css">element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255, 0, 0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Definiert <code>color</code> als animierbar.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Markiert Systemfarben als veraltet; fügt SVG-Farben hinzu; fügt die funktionalen Notationen <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Fügt die Farbe <code>orange</code> und die Systemfarben hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.properties.color")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Der {{cssxref("&lt;color&gt;")}} Datentyp</li>
 <li>Weitere Farbeigenschaften: {{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")}} und {{cssxref("color-adjust")}}</li>
</ul>