CSS color-Eigenschaft
Die CSS color-Eigenschaft legt die Farbe von Textinhalt und Textdekorationen fest. Probieren Sie die Beispiele aus und sehen Sie die Ergebnisse.
Die CSS-Eigenschaft color legt die Vordergrundfarbe eines Elements fest – also die Farbe seines Textinhalts und aller Textdekorationen (Unterstreichungen, Überlinien, Durchstreichungen). Sie beeinflusst weder Hintergründe noch Rahmen oder Bilder; dafür werden eigene Eigenschaften wie background-color verwendet.
Diese Seite behandelt die color-Syntax, alle Werteformate, die verwendet werden können (benannte Farben, Hex, RGB/RGBA, HSL/HSLA), wie color vererbt wird und wie Text lesbar bleibt. Farbwerte können im Abschnitt HTML colors durchsucht werden, Schlüsselwörter unter CSS color names nachgeschlagen und ein benutzerdefinierter Farbton mit dem Color Picker-Tool ausgewählt werden.
Da color vererbt wird, überträgt sich ein auf einem Container gesetzter Wert auf alle untergeordneten Textelemente, sofern ein Kind-Element ihn nicht überschreibt – daher reicht es oft, den Wert einmalig auf body zu deklarieren. Der Standardwert ist currentcolor, ein Schlüsselwort, das auf den aktuell geltenden color-Wert zeigt und nützlich ist, um Rahmen oder SVG-Füllfarben mit der Textfarbe zu synchronisieren.
| Initialwert | currentcolor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Ja. Die Farbe ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.color = "#1c87c9"; |
Syntax
Syntax der CSS color-Eigenschaft
color: color | initial | inherit;Beispiel der color-Eigenschaft:
Beispiel der CSS color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Ergebnis
Als Wert für die Eigenschaft color können hexadezimale Werte, RGB, HSL oder Farbnamen verwendet werden. Hinweis: Der Initialwert ist currentcolor, was bedeutet, dass die Textfarbe vom übergeordneten Element vererbt wird.
Beispiel der color-Eigenschaft mit einem benannten Farbwert:
Beispiel der CSS color-Eigenschaft mit benanntem Farbwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Beispiel der color-Eigenschaft mit einem hexadezimalen Wert:
Beispiel der CSS color-Eigenschaft mit hexadezimalem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Beispiel der color-Eigenschaft mit einem RGB-Wert:
Beispiel der CSS color-Eigenschaft mit RGB-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Beispiel der color-Eigenschaft mit einem HSL-Wert:
Beispiel der CSS color-Eigenschaft mit HSL-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Ein Farbformat wählen
Alle vier oben genannten Formate können dieselbe Farbe beschreiben – die Wahl hängt von der Lesbarkeit und den gewünschten Steuerungsmöglichkeiten ab:
- Benannte Farben (
blue,tomato,rebeccapurple) sind am einfachsten zu lesen, aber auf eine feste Liste von Schlüsselwörtern beschränkt. Gut für schnelle Prototypen. - Hexadezimal (
#8ebf42) ist im Produktionseinsatz am häufigsten anzutreffen. Die drei Paare stehen für Rot, Grün und Blau in Basis 16. Eine 4. oder 8. Stelle fügt einen Alphawert hinzu:#8ebf4280entspricht etwa 50% Deckkraft. - RGB (
rgb(142, 191, 66)) verwendet dieselben Kanäle wie Hex, jedoch in Dezimalnotation, die einfacher zu lesen und per Code zu erzeugen ist. - HSL (
hsl(89, 43%, 51%)) beschreibt Hue (Farbton, 0–360°), Sättigung und Helligkeit. Es ist am intuitivsten, wenn eine Farbe manuell angepasst werden soll – zum Beispiel die Helligkeit für einen Hover-Zustand erhöhen, ohne den Farbton zu verändern.
Transparenz mit RGBA und HSLA
Mit rgba() oder hsla() wird ein Alphakanal hinzugefügt, um Text halbtransparent zu machen. Der Alphawert ist eine Zahl von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.faded {
color: rgba(28, 135, 201, 0.5);
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p class="faded">This paragraph is 50% transparent blue.</p>
</body>
</html>Um ein ganzes Element (Text, Rahmen, Hintergrund und Kindelemente gemeinsam) statt nur die Textfarbe auszublenden, wird die Eigenschaft opacity verwendet.
Die Wahl einer Textfarbe ist auch eine Barrierefreiheits-Entscheidung. Text und Hintergrund müssen ausreichend Kontrast für Leser mit eingeschränkter Sehfähigkeit bieten: WCAG fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Hellgrau auf Weiß mag elegant wirken, besteht diesen Test jedoch häufig nicht.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| color | Beschreibt die Farbe des Textes und der Textdekorationen. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |