color

Übersicht

Die CSS Eigenschaft color setzt die Vordergrundfarbe des Textinhalts eines Elements und seiner Dekorationen. Sie hat keinen Einfluss auf andere Charakteristiken des Elements; sie sollte eigentlich text-color genannt werden, jedoch wurde sie aus historischen Gründen und ihrem Auftreten in CSS Level 1 so genannt.

Beachte, dass der Farbwert eine gleichmäßige Farbe sein muss, welche seit CSS3 einen Transparenzwert beinhalten kann. Sie kann kein <gradient> sein, welcher in CSS ein <image> ist.

InitialwertVariiert von einem Browser zum anderen
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter WertFalls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0).
AnimationstypFarbe

Syntax

/* Eine CSS Level 1 Farbe */
color: red;

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

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

/* 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;

Werte

<color>
Ist ein <color> Wert, der die Farbe von Textelementen innerhalb des Elements bestimmt.

Formale Syntax

<color>

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<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>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Beispiele

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

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); }

Spezifikationen

Spezifikation Status Kommentar
CSS Transitions
Die Definition von 'color' in dieser Spezifikation.
Arbeitsentwurf Definiert color als animierbar.
CSS Color Module Level 3
Die Definition von 'color' in dieser Spezifikation.
Empfehlung Markiert Systemfarben als veraltet; fügt SVG-Farben hinzu; fügt die funktionalen Notationen rgba(), hsl(), hsla() hinzu.
CSS Level 2 (Revision 1)
Die Definition von 'color' in dieser Spezifikation.
Empfehlung Fügt die Farbe orange und die Systemfarben hinzu.
CSS Level 1
Die Definition von 'color' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
colorChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 3Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Siehe auch