color

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.

Steckbrief color

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

Kategorie: Farben & Hintergründe
Werte: 10
Beispiele: 7
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

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

10 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

7 Beispiele

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

<div class="color-formats">
<div class="c-named">Named Color: dodgerblue</div>
<div class="c-hex">Hex: #1e90ff</div>
<div class="c-rgb">RGB: rgb(30, 144, 255)</div>
<div class="c-hsl">HSL: hsl(210, 100%, 56%)</div>
<div class="c-oklch">OKLCH: oklch(0.65 0.19 253)</div>
</div>

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

<div class="current-demo">
<div class="current-box current-blue">Blau (Border passt sich an)</div>
<div class="current-box current-green">Grün (Border passt sich an)</div>
<div class="current-box current-red">Rot (Border passt sich an)</div>
</div>

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

<div class="alpha-demo">
<div class="alpha-col">
  <div class="alpha-col-title">Moderne Syntax: rgb()</div>
  <div class="r-100">rgb(255 255 255 / 1)</div>
  <div class="r-75">rgb(255 255 255 / 0.75)</div>
  <div class="r-50">rgb(255 255 255 / 0.5)</div>
  <div class="r-25">rgb(255 255 255 / 0.25)</div>
</div>
<div class="alpha-col">
  <div class="alpha-col-title">Ältere Syntax: rgba()</div>
  <div class="ra-100">rgba(255, 255, 255, 1)</div>
  <div class="ra-75">rgba(255, 255, 255, 0.75)</div>
  <div class="ra-50">rgba(255, 255, 255, 0.5)</div>
  <div class="ra-25">rgba(255, 255, 255, 0.25)</div>
</div>
</div>

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

<div class="hsl-demo">
<div class="hsl-col">
  <div class="hsl-col-title">hsl()</div>
  <div class="h-blue">hsl(220, 80%, 48%)</div>
  <div class="h-green">hsl(150, 80%, 35%)</div>
  <div class="h-red">hsl(0, 80%, 48%)</div>
  <div class="h-purple">hsl(280, 80%, 48%)</div>
</div>
<div class="hsl-col">
  <div class="hsl-col-title">oklch()</div>
  <div class="o-blue">oklch(0.55 0.2 260)</div>
  <div class="o-green">oklch(0.55 0.2 155)</div>
  <div class="o-red">oklch(0.55 0.2 25)</div>
  <div class="o-purple">oklch(0.55 0.2 310)</div>
</div>
</div>

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

<div class="inherit-demo">
<h3>Überschrift erbt die Farbe</h3>
<p>Normaler Text erbt ebenfalls die Farbe #334155.</p>
<p class="highlight">Dieser Absatz überschreibt mit color: #dc2626.</p>
<p>Links haben ihre <a href="#">eigene Farbe</a>, weil Browser-Styles sie überschreiben.</p>
</div>

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

<div class="contrast-demo">
<div class="contrast-box good-contrast">
  Guter Kontrast (15.4:1)
  <div class="label">Hintergrund #1e293b / Text #f8fafc</div>
</div>
<div class="contrast-box okay-contrast">
  Guter Kontrast (15.4:1)
  <div class="label">Hintergrund #f8fafc / Text #1e293b</div>
</div>
<div class="contrast-box bad-contrast">
  Schlechter Kontrast (1.5:1)
  <div class="label">Hintergrund #e2e8f0 / Text #cbd5e1</div>
</div>
</div>

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

6 Fehler

01 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.

02 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.

03 color statt background-color

Anfänger verwechseln color (Textfarbe) mit background-color (Hintergrundfarbe). color betrifft ausschließlich Text, Borders (via currentColor) und Textdekorationen.

04 Hex ohne Raute

color: 1a56db funktioniert nicht. Hex-Werte brauchen immer die Raute: color: #1a56db.

05 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.

06 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

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

Apple Mail

Komplett
Gmail

Komplett

Hex und rgb() werden unterstützt. oklch und hsl() können ignoriert werden
Outlook

Teilweise

Hex und Named Colors zuverlässig. rgb() funktioniert, hsl() und oklch nicht
Thunderbird

Komplett
Yahoo Mail

Komplett

Hex und rgb() zuverlässig

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da