Lädt...

CSS-Farbwerte

Benannte Farben reichen für den Start. Marken und Designs brauchen genaue Werte — ein bestimmtes Teal, eine weiche Überlagerung, einen Farbton, den man leicht verschieben kann. Das kommt von Farbwertformaten: hex, rgb() / rgba() und hsl() / hsla().

Was ist ein Farbwert?

Ein Farbwert ist das, was Sie nach einer farbnehmenden Eigenschaft schreiben — zum Beispiel nach color: oder später background-color:. Dieselbe Eigenschaft wie zuvor; reichere Schreibweisen für die Farbe. Benannte Schlüsselwörter zählen weiter als Werte. Heute kommen die numerischen Formate dazu, die Sie wöchentlich nutzen.

Formate auf einen Blick

Wählen Sie das Format zur Aufgabe. Sie brauchen nicht jede Syntax am ersten Tag — lernen Sie die Karte, üben Sie dann die drei Alltagswerte.

📊 CSS-Farbwertformate

Format Beispiel Am besten für
Benannt teal Schnelle Demos, Lehre, grobe Entwürfe
Hex #0f766e Design-Tools, Marken-Tokens, Copy-Paste aus Figma
rgb() / rgba() rgb(15 118 110) / rgba(15, 118, 110, 0.85) Kanaldenken, Transparenz mit Alpha
hsl() / hsla() hsl(174 77% 25%) Farbton/Helligkeit feinjustieren ohne die Familie zu verlassen

Hex-Farben

Hex-Werte beginnen mit #, dann Hex-Ziffern (0–9, a–f). Üblich: sechsstellig #rrggbb (voll) und dreistellig #rgb (kurz — jede Ziffer verdoppelt sich). Groß-/Kleinschreibung ist egal.

Hex auf Text und weichem Hinweis

css
CSS Code 
h1 {
color: #0f172a;
}

.note {
color: #0f766e;
}

#0f766e lesen

Paare sind Rot, Grün, Blau: 0f / 76 / 6e. Design-Apps exportieren meist genau diesen String — in CSS einfügen und # behalten.

rgb() und rgba()

rgb() mischt Rot-, Grün- und Blaukanäle von 0 bis 255 (oder Prozent in moderner Syntax). Alpha kommt mit rgba() oder einem vierten Wert hinzu, damit die Farbe teilweise durchscheinend wird.

RGB-Kanäle und RGBA-Verlauf

css
CSS Code 
.lead {
color: rgb(51, 65, 85);
}

.overlay-label {
color: rgba(15, 118, 110, 0.9);
}

Alpha in einem Satz

Alpha ist die Transparenz dieser Farbe — 1 (oder 100%) ist deckend; niedrigere Werte lassen Dahinterliegendes durchscheinen. Das ist nicht dasselbe wie das Element aus dem Layout zu nehmen.

hsl() für Farbton-Denken

hsl() nutzt Farbton (Winkel im Farbkreis), Sättigung (%) und Helligkeit (%). Praktisch, wenn Sie „gleiche Familie, etwas heller“ wollen, ohne Hex von Hand neu zu rechnen.

HSL-Akzent zum Feinjustieren

css
CSS Code 
.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}

Feinjustier-Gewohnheit

Farbton behalten, Helligkeit hoch für ruhigeren Text oder runter für eine stärkere Überschrift. Sättigung steuert, wie lebhaft die Farbe wirkt.

Welches Format?

  • Hex — Standard beim Kopieren aus Designdatei oder Markenpalette
  • rgb() / rgba() — wenn Kanäle oder schnelles Alpha zählen
  • hsl() — beim Erkunden oder Anpassen verwandter Farben
  • Benannt — weiter gut für Skizzen und Lehrdemos
    Alles gilt heute auf color; später nutzen Sie dieselben Formate für Hintergründe.

Selbst ausprobieren

  1. Seite mit h1, .lead und .note.
  2. Überschrift mit Hex (#0f172a), Lead mit rgb(51, 65, 85), Note mit #0f766e.
  3. .badge mit hsl(174, 77%, 28%) und dunklerem HSL-Rahmen im gleichen Farbton.
  4. Label mit rgba(15, 118, 110, 0.75) abmildern — soll weniger deckend wirken als 1.
  5. Optional: Kurzform nur wenn Paare wirklich verdoppelt werden — sonst sechs Ziffern behalten.

Häufige Fehler

  • # vor Hex vergessen (0f766e allein ist keine gültige Farbe)
  • Buchstaben außerhalb a–f in Hex
  • RGB-Kanäle außerhalb 0–255 (oder chaotische Einheiten)
  • Erwarten, dass Alpha Layoutplatz wie display: none entfernt
  • Jedes Format für „spezifischer“ im Cascade halten — Formatwahl ändert Spezifität nicht

Kurz

  • Farbwerte sind Formate für dieselben farbnehmenden Eigenschaften
  • Hex ist das Alltagsformat zum Einfügen aus Design
  • rgb() / rgba() zeigen Kanäle und Alpha
  • hsl() hilft bei Farbton, Sättigung und Helligkeit zu denken
  • Benannte Farben bleiben gültig; wählen Sie passend zur Aufgabe
  • Üben Sie Hex plus ein Funktionsformat (rgba oder hsl), bis beides sitzt

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial