color

Zuletzt aktualisiert am 15. Februar 2026

color bestimmt die Textfarbe eines Elements. Die Eigenschaft wird an alle Kindelemente vererbt und beeinflusst auch den Standardwert von border-color und text-decoration-color über das Schlüsselwort currentColor. CSS bietet zahlreiche Farbformate: von einfachen Named Colors über Hex- und RGB-Werte bis hin zu modernen Formaten wie oklch. Der richtige Einsatz von color ist auch für Barrierefreiheit entscheidend, weil ausreichender Kontrast zwischen Text und Hintergrund die Lesbarkeit sicherstellt.

Syntax
color: <color>
Initialwert
canvastext (browserabhängig, meist schwarz)
Vererbt
Ja
Animierbar
Ja

Grundlagen

color ist eine der am häufigsten verwendeten CSS-Eigenschaften. Sie wird vererbt, das heißt: Setzt du color auf <body>, erbt jedes Textelement im Dokument diese Farbe, solange es nicht explizit überschrieben wird.

Das Schlüsselwort currentColor verweist immer auf den aktuellen color-Wert des Elements. Das ist besonders praktisch für Borders, SVG-Icons und Pseudo-Elemente, weil sie sich automatisch an die Textfarbe anpassen. Änderst du die color, ändern sich alle currentColor-Referenzen mit.

transparent ist ein vollständig durchsichtiger Farbwert. Er entspricht rgba(0, 0, 0, 0) und wird oft für Hover-Übergänge oder unsichtbare Borders verwendet, die bei Bedarf Farbe bekommen.

Syntax & Werte

Wert Beschreibung Beispiel
Named Color Einer der 148 vordefinierten Farbnamen. color: tomato
#rrggbb Hexadezimal-Notation. 6 Zeichen für Rot, Grün und Blau. color: #1a56db
#rgba Hex mit Alpha-Kanal. 8 Zeichen oder 4 Zeichen als Kurzform. color: #1a56db80
rgb(r, g, b) Funktionsnotation mit Werten von 0 bis 255. color: rgb(26, 86, 219)
rgb(r g b / alpha) Moderne Syntax mit optionalem Alpha-Kanal (0 bis 1). color: rgb(26 86 219 / 0.5)
hsl(h, s, l) Farbton (0-360), Sättigung und Helligkeit in Prozent. color: hsl(220, 80%, 48%)
oklch(l c h) Modernes Format: Lightness, Chroma, Hue. Gleichmäßig wahrgenommene Farben. color: oklch(0.5 0.2 260)
currentColor Verweist auf den aktuellen color-Wert. Standard für border-color. border: 2px solid currentColor
transparent Vollständig durchsichtig. Entspricht rgba(0, 0, 0, 0). color: transparent
inherit Erbt den Wert explizit vom Elternelement. color: inherit

Beispiele

Farbformate im Vergleich

Alle diese Angaben erzeugen denselben blauen Farbton, nur in unterschiedlicher Notation.

Farbformate im Vergleich
.c-named { color: dodgerblue; }
.c-hex   { color: #1e90ff; }
.c-rgb   { color: rgb(30, 144, 255); }
.c-hsl   { color: hsl(210, 100%, 56%); }
.c-oklch { color: oklch(0.65 0.19 253); }

currentColor in Aktion

currentColor lässt Borders, Box-Shadows und Pseudo-Elemente automatisch die Textfarbe übernehmen. Änderst du die color, passt sich alles an.

currentColor: Border erbt Textfarbe
.box {
  border: 2px solid currentColor;
  /* Border-Farbe = Textfarbe */
}

.blue { color: #1a56db; }  /* Blauer Text + blauer Border */
.green { color: #059669; } /* Grüner Text + grüner Border */
.red { color: #dc2626; }   /* Roter Text + roter Border */

Alpha-Transparenz mit rgb() und rgba()

Mit dem Alpha-Kanal kannst du Textfarben halbtransparent machen. Der Wert geht von 0 (unsichtbar) bis 1 (voll sichtbar). Die moderne Syntax rgb(r g b / alpha) und die ältere rgba(r, g, b, alpha) sind gleichwertig.

Alpha-Transparenz: rgb() vs. rgba()
/* Moderne Syntax (empfohlen) */
.full    { color: rgb(255 255 255 / 1); }
.light   { color: rgb(255 255 255 / 0.75); }
.half    { color: rgb(255 255 255 / 0.5); }
.faint   { color: rgb(255 255 255 / 0.25); }

/* Ältere Syntax (gleichwertig) */
.full    { color: rgba(255, 255, 255, 1); }
.light   { color: rgba(255, 255, 255, 0.75); }

Farben mit hsl() und oklch()

hsl() beschreibt Farben über Farbton (0-360°), Sättigung und Helligkeit. Das macht es einfach, verwandte Farbtöne zu erzeugen: gleicher Hue, andere Sättigung oder Helligkeit. oklch() ist das modernste Format mit gleichmäßig wahrgenommener Helligkeit: gleiche Lightness-Werte sehen bei verschiedenen Farbtönen tatsächlich gleich hell aus.

Farben mit hsl() und oklch()
/* HSL: Farbton (°), Sättigung (%), Helligkeit (%) */
.blue   { color: hsl(220, 80%, 48%); }
.green  { color: hsl(150, 80%, 35%); }
.red    { color: hsl(0, 80%, 48%); }

/* OKLCH: Lightness (0-1), Chroma, Hue (°) */
/* Gleiche Lightness → gleich hell wahrgenommen */
.blue   { color: oklch(0.55 0.2 260); }
.green  { color: oklch(0.55 0.2 155); }
.red    { color: oklch(0.55 0.2 25); }

Vererbung: color auf dem Body

color wird an alle Kindelemente vererbt. Einmal auf <body> gesetzt, gilt die Farbe überall, wo sie nicht explizit überschrieben wird.

Vererbung von color
body {
  color: #334155; /* Gilt für alle Textelemente */
}

.highlight {
  color: #dc2626; /* Überschreibt die geerbte Farbe */
}

a {
  color: #1a56db; /* Links brauchen oft explizite Farbe */
}

Kontrast: gut vs. schlecht

Ausreichender Kontrast zwischen Textfarbe und Hintergrund ist entscheidend für Lesbarkeit und Barrierefreiheit. Die WCAG empfiehlt ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text.

Kontrast: gut vs. schlecht
/* Guter Kontrast: 15.4:1 */
.good {
  background: #1e293b;
  color: #f8fafc;
}

/* Schlechter Kontrast: 1.5:1 */
.bad {
  background: #e2e8f0;
  color: #cbd5e1;
  /* WCAG verlangt mindestens 4.5:1 */
}

Barrierefreiheit

Ausreichender Farbkontrast zwischen Text und Hintergrund ist eine zentrale Anforderung für barrierefreie Websites. Die WCAG gibt klare Richtlinien vor: WCAG 1.4.3 fordert ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text (ab 18px normal oder 14px fett). Für noch bessere Zugänglichkeit empfiehlt WCAG Level AAA ein Verhältnis von 7:1.

Farbe darf außerdem niemals die einzige Methode sein, um Informationen zu vermitteln (WCAG 1.4.1). Wenn ein Fehler rot angezeigt wird, braucht es auch ein Icon oder eine Textbeschreibung, damit farbenblinde Nutzer den Status erkennen können. Gleiches gilt für Erfolg-Meldungen in Grün oder Warnungen in Gelb.

Nutzer mit Sehbeeinträchtigungen können in ihrem Browser oder Betriebssystem höheren Kontrast aktivieren. Mit der Media Query prefers-contrast: more kannst du auf diesen Wunsch reagieren und stärkere Kontraste anbieten. Prüfe deine Farbkombinationen am besten in beiden Modi, sowohl im Light Mode als auch im Dark Mode, denn eine Farbe mit gutem Kontrast auf weißem Hintergrund kann auf Schwarz problematisch sein.

Die Browser DevTools bieten in der Regel einen eingebauten Kontrast-Checker. Chrome und Firefox zeigen dir beim Auswählen einer Farbe im Color-Picker direkt an, ob das Kontrastverhältnis ausreicht.

Häufige Fehler

  • Links behalten Browser-Standardfarbe: Browser geben <a>-Elementen eine eigene Farbe (meist Blau). Auch wenn du color auf dem Elternelement setzt, überschreibt der Browser-Style die Vererbung. Du musst color direkt auf a setzen oder color: inherit verwenden.
  • Kontrast zu gering: Heller Text auf hellem Hintergrund oder dunkler Text auf dunklem Hintergrund ist schwer lesbar. Verwende Tools wie den Chrome DevTools Contrast Checker, um WCAG 4.5:1 sicherzustellen.
  • color statt background-color: Anfänger verwechseln color (Textfarbe) mit background-color (Hintergrundfarbe). color betrifft ausschließlich Text, Borders (via currentColor) und Textdekorationen.
  • Hex ohne Raute: color: 1a56db funktioniert nicht. Hex-Werte brauchen immer die Raute: color: #1a56db.
  • transparent als Textfarbe ohne Fallback: Text mit color: transparent ist unsichtbar. Das ist gewollt bei background-clip: text-Effekten, aber ohne diesen Kontext verschwindet der Text einfach.
  • Farbwerte nicht konsistent: Wenn du denselben Blauton einmal als #1a56db, einmal als rgb(26, 86, 219) und einmal als hsl(220, 80%, 48%) schreibst, wird es schwer wartbar. Verwende CSS Custom Properties (--color-primary) für konsistente Farben.

Browser-Kompatibilität

color wird von allen Browsern vollständig unterstützt. Klassische Formate (hex, rgb, hsl, Named Colors) funktionieren überall. oklch wird seit 2023 von allen modernen Browsern unterstützt.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

color ist eine der am besten unterstützten CSS-Eigenschaften in HTML-Emails. Verwende Hex- oder RGB-Werte für maximale Kompatibilität.

ClientUnterstützungHinweise
Apple MailKomplett—
GmailKomplettHex und rgb() werden unterstützt. oklch und hsl() können ignoriert werden
OutlookTeilweiseHex und Named Colors zuverlässig. rgb() funktioniert, hsl() und oklch nicht
ThunderbirdKomplett—
Yahoo MailKomplettHex und rgb() zuverlässig

Verwandte Eigenschaften

background-grundlagen opacity accent-color

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.