Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Ü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
Medienvisuell
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).
Animierbarja, als Farbe
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

wobei
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 1.0 1.0 (1.7 oder früher) 3.0 3.5 1.0
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 1.0 1.0 (1) 6.0 6.0 1.0

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, wizAmit, slayslot, fscholz, SJW, Jürgen Jeka, Michael2402
 Zuletzt aktualisiert von: Sebastianz,