CSS INTENSIVSTATION

Farben in CSS

Definitionen & Möglichkeiten

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

  • lab()wahrnehmungsbasierter Farbraum (Lightness + Farbachsen)
  • lch()LAB-Variante (Lightness/Chroma/Hue)
  • oklch()moderner Farbraum für konsistentere Farbskalen

Neben RGB und HSL unterstützt modernes CSS neue Farbräume, die näher an der menschlichen Wahrnehmung sind. Das hilft besonders bei konsistenten Farbskalen, Hover-Varianten und Dark-Mode-Designs.

Beispiele (als Ausblick):

/* LAB */
color: lab(50% 40 20);

/* LCH */
color: lch(60% 50 200);

/* OKLCH (häufig empfohlen für moderne Farbskalen) */
color: oklch(65% 0.15 200);

Für die Grundlagen reichen in der Regel HEX, RGB und HSL. oklch() ist „Next Level“.

Farb-Funktionen

  • color-mix()mischt zwei Farben miteinander
  • color-contrast()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.

color-mix()

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

color-contrast()

color-contrast() wählt aus einer Liste automatisch die Farbe mit dem besten Kontrast zu einer Basisfarbe. Praktisch für Text auf variablen Hintergründen.

color: color-contrast(var(--bg) vs white, black);

Hinweis: Die Browser-Unterstützung ist je nach Version unterschiedlich. Für produktive Nutzung empfiehlt sich ein Fallback.

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

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.

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() ist ein moderner Farbraum für konsistentere Farbskalen (Ausblick)