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

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

/* oder auch */

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

/* oder noch andere schreibweisen - zB mit HEX Codes oder color-mix(...) */

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ß)

Sneak Peek: weiche Übergänge mit `transition`

Der Farbwechsel beim Hover von eben passiert bisher schlagartig - ein Klick, und die Farbe springt um. Mit transition wird daraus ein weicher Übergang:

.btn {
  background-color: hsl(210, 80%, 50%);
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: hsl(210, 80%, 40%);
}

transition steht auf dem Grundzustand (.btn), nicht auf :hover - es sagt: “wenn sich background-color irgendwann ändert, animiere das über 0.2 Sekunden”
Funktioniert genauso mit color, border-color, box-shadow und vielen weiteren Properties

Sneak Peek: Elemente verschieben, skalieren, drehen mit `transform`

transform verändert Position, Größe oder Rotation eines Elements, ohne den Layout-Fluss zu beeinflussen - andere Elemente reagieren nicht darauf:

.btn:hover {
  transform: scale(1.05); /* 5% größer */
}

Funktion	Effekt
`translate(x, y)`	verschiebt (z.B. `translate(10px, -5px)`)
`scale(f)`	skaliert (z.B. `scale(1.1)` = 10% größer)
`rotate(deg)`	dreht (z.B. `rotate(5deg)`)

Kombiniert mit transition wird daraus ein weicher Effekt statt eines Sprungs:

.btn {
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: scale(1.05);
}

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

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.