Farben in CSS

Farben sind ein zentrales Gestaltungsmittel im Web. CSS bietet verschiedene Farbmodelle und Schreibweisen, um Farben präzise und konsistent zu definieren.

Was ist eine Farbe in CSS?

Eine Farbe beschreibt, wie Licht auf einem Bildschirm erscheint. In CSS ist eine Farbe ein Wert, der festlegt, wie ein Element dargestellt wird. Farben können überall dort verwendet werden, wo eine Farbangabe erwartet wird.

Typische Eigenschaften mit Farbwerten

  • color (Textfarbe)
  • background-color
  • border-color
  • outline-color
  • box-shadow
  • text-shadow

Klassische Farbangaben

CSS bietet mehrere gleichwertige Farbmodelle und Schreibweisen.

  • redFarbnamen
  • #ff00ffHexadezimale Farben
  • rgb() / rgba()RGB-Farben, optional mit Alpha
  • hsl() / hsla()HSL-Farben (Hue/Saturation/Lightness), optional mit Alpha

Farbnamen

CSS stellt vordefinierte Farbnamen zur Verfügung. Sie sind einfach zu lesen, aber in der Auswahl begrenzt.

color: red;
background-color: cornflowerblue;

Insgesamt stehen rund 142 standardisierte Farbnamen zur Verfügung.

Hexadezimale Farben

Hex-Farben beschreiben Farben über ihre RGB-Anteile in hexadezimaler Schreibweise.

color: #ff00cc;

Wie funktionieren hexadezimale Farben?

Jeder Farbkanal wird mit zwei hexadezimalen Ziffern angegeben. Hexadezimal bedeutet: Zahlen von 0 bis 9 und Buchstaben von A bis F.

0 1 2 3 4 5 6 7 8 9 A B C D E F

Eine hexadezimale Farbe ist eine kompakte Schreibweise für RGB-Werte. Sie besteht aus drei Farbkanälen: Rot, Grün und Blau.

  Rot        Grün        Blau
|----------|----------|----------|
   00–FF      00–FF      00–FF
color: #ff0000;

Rot: FF → 255 | Grün: 00 → 0 | Blau: 00 → 0

color: rgb(255, 0, 0);

Grautöne

Wenn alle drei Farbkanäle den gleichen Wert haben, entsteht ein Grauton.

#000000 | #333333 | #aaaaaa | #ffffff

3-stellige Kurzschreibweise

Die verkürzte Schreibweise ist nur erlaubt, wenn sich jede Farbkomponente wiederholt.

#ffffff → #fff
#33aa99 → #3a9

RGB() & RGBA()

Das RGB-Farbmodell definiert Farben über Rot, Grün und Blau. Jeder Wert liegt zwischen 0 und 255.

color: rgb(255, 0, 0);
background-color: rgb(34, 34, 34);

RGBA erweitert RGB um einen Alpha-Kanal für Transparenz. Der Alpha-Wert liegt zwischen 0 (transparent) und 1 (deckend).

background-color: rgba(0, 0, 0, 0.5);

HSL() & HSLA()

HSL beschreibt Farben über Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Dieses Modell ist für Menschen oft intuitiver als RGB.

  • HueFarbton (0–360°)
  • SaturationSättigung in Prozent
  • LightnessHelligkeit in Prozent
color: hsl(0, 100%, 50%);

HSLA ergänzt HSL um einen Alpha-Kanal für Transparenz.

background-color: hsla(200, 80%, 50%, 0.6);

Transparenz & Opacity

  • transparentvollständig durchsichtig (Alpha 0)
  • opacitymacht das ganze Element inkl. Inhalt transparent

Transparenz kann entweder über den Alpha-Kanal einer Farbe oder über die Eigenschaft opacity gesteuert werden.

transparent

transparent ist ein spezieller Farbwert und bedeutet: komplett durchsichtig. Praktisch ist das wie eine Farbe mit Alpha 0.

background-color: transparent;
/* entspricht in der Praxis: */
background-color: rgba(0, 0, 0, 0);

Wichtig: transparent heisst nicht „nimm die Farbe vom Parent“, sondern „zeichne hier keine Farbe – der Hintergrund scheint durch“.

opacity

opacity macht das ganze Element transparent – inklusive Inhalt (Text, Kinder, Icons). Schriften und Bilder werden heller. Farbangaben mit Alpha-Kanal (z. B. RGBA) vererben die Transparenz nicht.

Ich bin verblasst

opacity: 0.4;

Mit :hover opacity verändern

Ich bin verblasst

.fade {opacity: 0.2;}
.fade:hover {opacity: 1;}

Moderne Farbräume

RGB und HEX beschreiben Farben über die Anteile von Rot, Grün und Blau. HSL ordnet dieselben Farben mit Farbton, Sättigung und Helligkeit verständlicher an. Die wahrgenommene Helligkeit ist dabei jedoch nicht gleichmässig: Zwei HSL-Farben mit demselben Helligkeitswert können unterschiedlich hell wirken.

LAB, LCH und OKLCH orientieren sich stärker an der menschlichen Farbwahrnehmung. Dadurch lassen sich Helligkeitsstufen, Farbabstände und zusammengehörige Farbvarianten kontrollierter gestalten.

  • lab()Helligkeit sowie Grün–Rot- und Blau–Gelb-Achse
  • lch()Helligkeit, Farbintensität und Farbton
  • oklch()verbesserte wahrnehmungsbasierte Variante von LCH

1. LAB

lab() beschreibt eine Farbe über ihre Helligkeit und zwei Farbachsen.

  • L (Lightness / Helligkeit): Wert von 0% (Schwarz) bis 100% (Weiss).
  • a (Grün–Rot-Achse): Negative Werte verschieben die Farbe in Richtung Grün, positive Werte in Richtung Rot.
  • b (Blau–Gelb-Achse): Negative Werte verschieben die Farbe in Richtung Blau, positive Werte in Richtung Gelb.
  • Alpha (optional): Steuert die Transparenz nach einem Schrägstrich, zum Beispiel / 0.5 für 50 %.
color: lab(50% 40 20);
color: lab(50% 40 20 / 0.5);

Im Gegensatz zu RGB und HSL orientiert sich LAB stärker an der menschlichen Farbwahrnehmung. Gleich grosse Änderungen der Werte führen deshalb eher zu gleichmässig wahrgenommenen Farbunterschieden. LAB kann ausserdem Farben beschreiben, die ausserhalb des in RGB und HSL verwendeten sRGB-Farbraums liegen.

2. LCH

lch() verwendet denselben Farbraum wie LAB, beschreibt Farben aber mit Helligkeit, Farbintensität und Farbton. Diese Schreibweise ähnelt HSL und lässt sich deshalb leichter gezielt verändern.

  • L (Lightness): wahrgenommene Helligkeit von 0% bis 100%
  • C (Chroma): Intensität der Farbe; 0 ergibt einen Grauton
  • H (Hue): Farbton als Winkel von 0 bis 360
  • Alpha (optional): Transparenz nach einem Schrägstrich
color: lch(60% 50 200);
color: lch(60% 50 200 / 0.5);

3. OKLCH

In modernen Webprojekten wird vor allem oklch() verwendet. Die Farbangabe ist intuitiver als lab() und bildet wahrgenommene Helligkeitsunterschiede gleichmässiger ab als lch().

oklch() ist eine weiterentwickelte Variante von LCH. Farben mit derselben Lightness wirken über verschiedene Farbtöne hinweg gleichmässiger hell. Das ist besonders praktisch für Farbpaletten, Zustände und Light- oder Dark-Mode-Varianten.

  • L (Lightness): wahrgenommene Helligkeit von 0% bis 100%
  • C (Chroma): Intensität der Farbe
  • H (Hue): Farbton als Winkel
  • Alpha (optional): Transparenz nach einem Schrägstrich
color: oklch(65% 0.15 200);

Die drei Werte lassen sich unabhängig voneinander verändern. Im folgenden Beispiel bleiben Farbintensität und Farbton gleich, nur die Helligkeit ändert sich:

--dark:  oklch(35% 0.15 200);
--color: oklch(65% 0.15 200);
--light: oklch(85% 0.15 200);

oklch() eignet sich deshalb gut, um aus einer Grundfarbe nachvollziehbare helle und dunkle Varianten zu entwickeln. Die Farbangabe wird von den gängigen Browsern unterstützt.

OKLCH Color Picker & Converter
OKLCH Color Picker & Converter

Farb-Funktionen

  • color-mix()mischt zwei Farben miteinander
  • contrast-color()wählt automatisch eine kontrastreiche Farbe
  • light-dark()wählt je nach Farbschema (hell/dunkel) eine Farbe

Neuere CSS-Versionen erweitern den Umgang mit Farben. Diese Funktionen sind besonders für moderne Layouts relevant.

1. color-mix()

background-color: color-mix(in srgb, red 50%, blue 50%);

2. contrast-color()

contrast-color() wählt automatisch Weiss oder Schwarz – je nachdem, was mehr Kontrast zur übergebenen Farbe bietet. Praktisch für Text auf variablen Hintergründen.

color: contrast-color(var(--bg));

Seit April 2026 in Chrome, Firefox und Safari verfügbar (Baseline „Newly available“). Für ältere Browser empfiehlt sich ein Fallback.

color: black; /* Fallback */
color: contrast-color(var(--bg));

3. light-dark()

light-dark() wählt automatisch eine Farbe je nach Farbschema (hell/dunkel). Im Light Mode gilt der erste Wert, im Dark Mode der zweite.

color: light-dark(#111, #f5f5f5);
background-color: light-dark(white, black);

Wichtig: :root definiert, dass die Seite sowohl helle als auch dunkle Schemata unterstützt

:root {color-scheme: light dark; }

Das ist vor allem für moderne Design-Systeme interessant (Dark Mode ohne extra Media Query).

currentColor

currentColor übernimmt automatisch den Wert der aktuellen Textfarbe (color).

border-color: currentColor;

Ändert sich die Textfarbe, passt sich currentColor automatisch an. Das sorgt für konsistente Farbkonzepte und weniger Wiederholungen.

Barrierefreiheit

Ausreichender Kontrast zwischen Text und Hintergrund ist wichtig. Der WCAG-Standard empfiehlt ein Kontrastverhältnis von 4.5:1 für normalen Text und 3:1 für grossen Text (18pt+ oder 14pt+ fett).

Tools zum Prüfen

WebAIM Contrast Checker oder colorable

Kurz gesagt

  • transparent = komplett durchsichtig (wie rgba(0,0,0,0))
  • Alpha-Kanäle steuern Transparenz nur für diese Farbangabe
  • opacity wirkt auf das ganze Element inklusive Inhalt
  • light-dark() ermöglicht Light/Dark-Mode ohne zusätzliche Media Query
  • oklch() trennt Helligkeit, Farbintensität und Farbton und erleichtert gleichmässige Farbskalen.