CSS-Eigenschaft color

Die Eigenschaft color beschreibt die Farbe des Textinhalts und der Textdekorationen. Die Webfarben finden Sie in der Abteilung HTML-Farben. Versuchen Sie, Ihre bevorzugten Farben mit unserem Farbwähler auszuwählen. Der Standardwert dieser Eigenschaft variiert von Browser zu Browser.

Anfangswert Unterschiedlich von Browser zu Browser
Gilt für Alle Elemente. Es gilt auch für ::first-letter and ::first-line.
Geerbt Ja
Animierbar Ja, die Farbe ist animierbar.
Version CSS1
DOM Syntax object.style.color = "#1c87c9";

Syntax

color: color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .blue {
      color: #1c87c9;
      }                
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft color</h2>
    <p>Zum Beispiel ist das ein Absatz.</p>
    <p class="blue">Das ist ein Absatz mit blauer Farbe.</p>
    <p>Zum Beispiel ist das ein Absatz.</p>
  </body>
</html>
Sie können hexadezimale, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft color einstellen.

Ein weiteres Beispiel, wo der Wert eine benannte Farbe ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .blue {
      color: blue;
      }                
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft color</h2>
    <p>Zum Beispiel ist das ein Absatz.</p>
    <p class="blue">Das ist ein Absatz mit dem Farbnamen blau.</p>
    <p>Zum Beispiel ist das ein Absatz.</p>
  </body>
</html>

Ein weiteres Beispiel, wo ein hexadezimaler Wert für die Eigenschaft color eingestellt ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .color {
      color: #8ebf42;
      }                
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft color</h2>
    <p>Zum Beispiel ist das ein Absatz.</p>
    <p class="color">Das ist ein Absatz mit hexadezimalem Farbenwert (#8ebf42 für grün).</p>
    <p>Zum Beispiel ist das ein Absatz.</p>
  </body>
</html>

Ein anderes Beispiel für die Eigenschaft color mit einem RGB-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .color {
      color: rgb(142, 191, 66);
      }                
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft color</h2>
    <p>Zum Beispiel ist das ein Absatz.</p>
    <p class="color">Das ist ein Absatz mit einem RGB-Farbenwert.</p>
    <p>Zum Beispiel ist das ein Absatz.</p>
  </body>
</html>

Ein weiteres Beispiel für die Eigenschaft color mit einem HSL-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .color{
      color: hsl(89, 43%, 51%);
      }                
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft color</h2>
    <p>Zum Beispiel ist das ein Absatz.</p>
    <p class="color">Das ist ein Absatz mit einem HSL-Farbenwert.</p>
    <p>Zum Beispiel ist das ein Absatz.</p>
  </body>
</html>

Werte

Wert Beschreibung
color Der Wert definiert die Farbe des Textes und die Textdekoration. Die Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+

Übe dein Wissen

Was ist die CSS-Eigenschaft 'color'?
Finden Sie das nützlich?