Farben in CSS

Farben definieren: 4 Schreibweisen

.a { color: tomato; }               /* 1. Keyword */
.b { color: #ff6347; }              /* 2. Hex */
.c { color: rgb(255, 99, 71); }     /* 3. RGB */
.d { color: hsl(9, 100%, 64%); }    /* 4. HSL */

Alle vier Zeilen ergeben dieselbe Farbe!

Format	Beispiel	Wann nutzen?
Keyword	`red`, `tomato`, `steelblue`	Prototyping, ca. 150 Namen verfügbar
Hex	`#ff6347`	Häufigste Praxis, aus Design-Tools kopiert
RGB(A)	`rgb(255 99 71 / 0.5)`	Wenn Transparenz gebraucht wird
HSL	`hsl(9 100% 64%)`	Wenn man Farbton gezielt variieren will

Transparenz: RGBA & Alpha-Werte

.overlay {
  /* Alt-Syntax mit Komma */
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay-modern {
  /* Moderne Syntax mit Slash - funktioniert auch bei hsl() und hex */
  background-color: rgb(0 0 0 / 0.5);
  border: 1px solid #00000033; /* Hex mit Alpha: letzte 2 Stellen = Transparenz */
}

Praxisbeispiel: Ein abgedunkelter Hintergrund für ein Modal

.modal-backdrop {
  background-color: rgb(0 0 0 / 0.6);
}

HSL: Farben gezielt steuern

hsl(Farbton, Sättigung, Helligkeit)

.btn {
  background-color: hsl(210, 80%, 50%);  /* Grundfarbe: Blau */
}

.btn:hover {
  background-color: hsl(210, 80%, 40%);  /* Nur Helligkeit -10% = dunkler */
}

Hue (0–360°): Farbton auf dem Farbkreis (0=Rot, 120=Grün, 240=Blau)
Saturation (0–100%): Sättigung (0% = Grau, 100% = volle Farbe)
Lightness (0–100%): Helligkeit (0% = Schwarz, 100% = Weiß)

Praxisbeispiel: Eine kleine Farbpalette

/* Neutrale Farben für Text und Hintergrund */
.page {
  background-color: #f9fafb;
  color: #1f2937;
}

/* Primärfarbe für Buttons/Links */
.btn-primary {
  background-color: #2563eb;
  color: white;
}

/* Statusfarben */
.badge-success { background-color: #16a34a; color: white; }
.badge-error   { background-color: #dc2626; color: white; }
.badge-warning { background-color: #ca8a04; color: white; }

Hintergrundbilder: `background-image`

Neben Farben kann jedes Element auch ein oder mehrere Hintergrundbilder bekommen, in einem webtauglichen Format (jpg, png, svg, …):

.hero {
  background-image: url("bilder/hero.jpg");
  background-repeat: no-repeat;   /* Standard: wird sonst gekachelt wiederholt */
  background-position: center;
  background-size: cover;         /* füllt die Box, ohne Verzerrung */
}

url(...) funktioniert genauso mit absoluten (url(https://example.com/bild.jpg)) wie relativen Pfaden
Ohne background-repeat: no-repeat wird ein kleines Bild automatisch horizontal und vertikal gekachelt

Tool-Tipp: Farben aus einer Webseite ablesen

Die Developer Tools des Browsers haben eine Pipette. Damit könnt ihr jede Farbe direkt von einer Webseite abgreifen und den Code (Hex/RGB) kopieren - praktisch, um das Farbschema einer Vorlage zu übernehmen, ohne raten zu müssen.