CSS Academy · Lektion

Farbwerte: Benannt, Hex, RGB und HSL

Lernen Sie alle CSS-Farbformate kennen: benannte Farben, Hex-Codes sowie die Funktionen rgb() und hsl().

Lektion 1 von 413 Schritte

Farbwerte: Benannt, Hex, RGB und HSL ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

CSS-Farbformate

CSS unterstützt mehrere Farbformate. Welches Format Sie wählen, hängt von Ihrem Arbeitsablauf, Ihren Werkzeugen und davon ab, ob Sie Transparenz oder eine dynamische Manipulation benötigen.

Benannte Farben

CSS definiert mehr als 140 benannte Farben wie red, tomato und cornflowerblue. Sie eignen sich hervorragend für schnelles Prototyping, bieten aber nur eine begrenzte Präzision.

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

Hex-Farben

Hexadezimale Farben verwenden ein #, gefolgt von 6 Hexadezimalziffern (oder 3 in der Kurzschreibweise). Jedes Ziffernpaar steht für Rot, Grün und Blau (0–255).

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

Hex-Farben mit Alpha

Fügen Sie ein 4. Paar Hexadezimalziffern (oder eine 4. Ziffer in der Kurzschreibweise) für die Alpha-Transparenz hinzu:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

RGB-Farben

rgb() verwendet drei Ganzzahlen (0–255) für die Rot-, Grün- und Blaukanäle. Das ist sehr gut lesbar und lässt sich programmatisch leicht nachvollziehen.

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

RGBA-Farben

Fügen Sie rgb() einen vierten Parameter (0–1) für die Alpha-Transparenz hinzu. Dies entspricht der neueren Schreibweise von rgb() mit einem Schrägstrich.

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

HSL-Farben

hsl() definiert eine Farbe anhand von Farbton (0–360°), Sättigung (0–100 %) und Helligkeit (0–100 %). Das ist wesentlich intuitiver, wenn Sie Farbpaletten und Varianten erstellen.

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

HSLA-Farben

Wie rgba() fügt hsla() einen Alphakanal hinzu. Modernes CSS ermöglicht stattdessen die Verwendung eines Schrägstrichs als Trennzeichen:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

Farbvarianten mit HSL erstellen

HSL eignet sich besonders gut zum Erzeugen von Aufhellungen und Abdunklungen. Behalten Sie Farbton und Sättigung bei und ändern Sie die Helligkeit:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

Schlüsselwort currentColor

currentColor ist ein dynamischer Wert, der dem aktuellen Wert der color-Eigenschaft des Elements entspricht. Verwenden Sie ihn, damit Rahmen, Schatten oder SVG-Füllungen automatisch die Textfarbe erben.

<a href="#">Link with currentColor border</a>

Schlüsselwort transparent

Das Schlüsselwort transparent entspricht rgba(0,0,0,0) — vollständig transparent. Es eignet sich für Hover-Effekte, bei denen Sie von transparent zu einer Farbe überblenden.

<button>Transparent background</button>

Schnelltest

Mit welchem Farbformat lassen sich hellere und dunklere Abstufungen desselben Farbtons am einfachsten erstellen?

Beantworte es in der interaktiven Lektion

Zusammenfassung

CSS bietet benannte, hexadezimale sowie RGB- und HSL-Farbformate. HSL eignet sich ideal für die programmatische Farbmanipulation. Alle Formate akzeptieren einen Alphakanal für Transparenz. currentColor und transparent sind praktische spezielle Schlüsselwörter.

Kostenlos starten

Lerne CSS mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Farbwerte: Benannt, Hex, RGB und HSL“ kostenlos?

Ja — der vollständige Text von „Farbwerte: Benannt, Hex, RGB und HSL“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Farbwerte: Benannt, Hex, RGB und HSL“?

Lernen Sie alle CSS-Farbformate kennen: benannte Farben, Hex-Codes sowie die Funktionen rgb() und hsl(). Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Farbwerte: Benannt, Hex, RGB und HSL“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy