HTML-Farben

Sie haben das Aussehen bereits mit dem style-Attribut verändert und Bedeutung mit Formatierung und Zitaten markiert. Farben prägen Stimmung und Lesbarkeit. In diesem Einsteigerpfad für HTML üben Sie Farbwerte innerhalb von style: gängige Namen, Hex-Codes und rgb()-Funktionen. Vollständige Designsysteme gehören später in CSS; hier lernen Sie, die Formen korrekt zu lesen und zu schreiben, damit eine Seite nicht nur „bunt“ wirkt, ohne dass Sie verstehen, was Sie wirklich gesetzt haben. Wenn die drei Formen sitzen, wird der Wechsel zu gemeinsamen Stylesheets klarer, weil dieselben Werte außerhalb wiederholter Inline-Attribute wiederkehren.

Was ist ein HTML-Farbwert?

Ein Farbwert sagt dem Browser, welche Farbe für eine CSS-Eigenschaft wie color oder background-color gelten soll. Dieselben Wertformen funktionieren in Inline-style und in Stylesheets. Einsteiger treffen zuerst drei praktische Formen: einen lesbaren Namen (tomato), einen Hex-Code (#c0392b) und eine rgb()-Mischung (rgb(192, 57, 43)). Sie können denselben Farbton in unterschiedlicher Schreibweise beschreiben — hilfreich, wenn Sie aus einer Palette kopieren oder nur einen Kanal anpassen. Zu wissen, dass Name, Hex und rgb oft dieselbe Farbe meinen, verhindert Verwirrung beim Vergleichen von Beispielen aus verschiedenen Quellen.

Direkte Antwort

Setzen Sie Text mit color und den Bereich hinter dem Inhalt mit background-color. Wählen Sie eine Wertform, die zum Moment passt: einen Namen für schnelle Demos, Hex beim Kopieren aus einer Palette oder rgb(), wenn Sie in Rot-/Grün-/Blau-Kanälen von 0 bis 255 denken. Halten Sie den Kontrast stark genug zum Lesen. Wenn Projekte wachsen, verschieben Sie gemeinsame Farben nach CSS statt lange Inline-Attribute auf jeder Seite zu wiederholen. Diese Gewohnheit spart Zeit und verhindert kleine Abweichungen zwischen Seiten, wenn sich die Markenfarben später ändern.

Wertformen auf einen Blick

Farben mit Namen

Benannte Farben sind der freundlichste Einstieg. Kombinieren Sie Text- und Hintergrundfarbe sorgfältig, damit Wörter lesbar bleiben. Namen helfen bei schnellen Versuchen ohne Zahlen auswendig zu lernen, decken aber nicht jeden Ton eines echten Designs ab. Betrachten Sie Namen deshalb als Lernbrücke und wechseln Sie zu Hex oder rgb, wenn Sie mehr Präzision oder Farben aus einem Designwerkzeug brauchen.

Das Beispiel lesen

• Der erste Absatz ändert nur die Textfarbe
• Der zweite setzt Hintergrund und Text, damit Navy auf Hellblau klar bleibt
• Namen sind in CSS groß-/kleinschreibungsunempfindlich; Kleinbuchstaben sind trotzdem eine klare Gewohnheit
• Nicht jedes englische Farbwort ist ein gültiger CSS-Name — bleiben Sie bei geprüften, gängigen Namen
• Wenn eine Farbe „nichts tut“, prüfen Sie zuerst, ob der Name exakt dem CSS-Wortlaut entspricht und keine freie Übersetzung ist

Hex-Farben

Eine Hex-Farbe beginnt meist mit # und sechs Zeichen aus 0–9 und a–f. Die Paare bedeuten Rot, Grün und Blau. #000000 ist schwarz; #ffffff ist weiß. Sie müssen keinen Katalog auswendig lernen — wählen Sie aus einer Palette und fügen Sie sorgfältig ein. Viele Designwerkzeuge liefern Hex zum Kopieren; Ihre Aufgabe ist, # und sechs gültige Ziffern zu behalten, damit der Browser den Wert nicht stillschweigend verwirft.

Hex-Tipps

• Behalten Sie das # — in der Form dieser Lektion ist 336699 allein nicht dasselbe wie #336699
• Nutzen Sie nur gültige Hex-Ziffern; Buchstaben enden bei f
• Dreistelliges Hex gibt es in CSS (#333), aber sechsstellige Codes reichen für diese Kursstufe
• Prüfen Sie Copy/Paste, damit eine fehlende Ziffer den Farbton nicht still scheitern lässt
• Vergleichen Sie #c0392b mit dem passenden Namen oder rgb, wenn Sie sicher sein wollen, den richtigen Ton aus der Palette übernommen zu haben

rgb()-Farben

Die Funktion rgb() mischt Rot, Grün und Blau als Zahlen von 0 bis 255. rgb(255, 0, 0) ist reines Rot. Diese Form ist praktisch, wenn Sie einen Kanal nach dem anderen anpassen — etwa Helligkeit erhöhen oder Blau senken, ohne Hex von Hand umzurechnen. Die drei Zahlen stehen immer in der Reihenfolge Rot, Grün, Blau; die Kommas gehören zur Syntax.

Die Formen verbinden

Derselbe Farbton lässt sich oft als Name, Hex oder rgb schreiben. Nehmen Sie pro Demo eine Form, damit Ihr Auge die Syntax lernt. Später in CSS treffen Sie weitere Notationen; diese drei decken die frühe HTML-Übung ab. Wenn eine Palette Hex liefert und ein anderes Werkzeug rgb, denken Sie daran: oft ist es dieselbe Farbe in zwei Schreibweisen. Wichtig ist eine vollständige, korrekte Form innerhalb von style.

Kontrast und Lesbarkeit

Eine gültige Farbe kann trotzdem eine schlechte Wahl sein. Hellgelber Text auf Weiß kann fehlerfrei geparst werden und trotzdem schwer lesbar sein. Wenn Sie color und background-color setzen, prüfen Sie, dass der Text sich abhebt. Auf echten Sites ist Kontrast Teil der Barrierefreiheit — beginnen Sie die Gewohnheit jetzt auch in kleinen Demos. Guter Kontrast ist nicht nur Optik; er ist Voraussetzung, damit Besuchende den Inhalt ohne Anstrengung lesen, besonders auf unterschiedlichen Bildschirmen oder bei hellem Umgebungslicht.

Übung in Ihrem Editor

1. Erstellen Sie drei kurze Absätze unter einer Überschrift.
2. Färben Sie den ersten Text mit einem Namen (teal oder ähnlich).
3. Färben Sie den zweiten Text mit einem Hex-Wert.
4. Geben Sie dem dritten eine background-color mit rgb() und setzen Sie bei Bedarf ein dunkles color für Kontrast.
5. Speichern und aktualisieren. Bestätigen Sie, dass jede Form wirkt.
6. Zerbrechen Sie absichtlich ein Hex (eine Ziffer entfernen), aktualisieren, dann reparieren — das trainiert sorgfältige Syntax.
   Wiederholen Sie die Übung mit anderen Farben, bis Sie Name, Hex und rgb rasch unterscheiden, ohne jedes Mal in Notizen zu blättern. Achten Sie auch darauf, dass die Anführungszeichen um den gesamten style-Wert geschlossen sind; ein kleiner Attributfehler kann die Farbe komplett ausfallen lassen.

Fehler, die Farben verstecken oder schwächen

• color (Text) mit background-color (hinter dem Text) verwechseln
• #33, #gggggg oder Hex ohne # schreiben, obwohl ein sechsstelliger Code gemeint war
• Kombinationen mit geringem Kontrast, die „gestylt“ wirken, aber schwer lesbar sind
• Ein ganzes Markenthema nur mit wiederholten Inline-Styles bauen statt als Nächstes gemeinsames CSS zu lernen
• Annehmen, jedes englische Farbwort sei ein gültiger CSS-Name, ohne zu prüfen
• Anführungszeichen um den style-Wert vergessen, sodass der Browser das Attribut als unvollständig liest
  Jeder dieser Fehler kostet Zeit oder schwächt Vertrauen in den Inhalt. Lesen Sie die Seite mit Besucheraugen: Ist der Text auf dem Hintergrund klar? Verstehen Sie, warum Sie diese Wertform gewählt haben?

Zusammenfassung

• Nutzen Sie color und background-color in style für schnelle Farbdemos
• Werte: Namen, Hex (#RRGGBB) oder rgb(r, g, b)
• Hex-Paare entsprechen Rot, Grün und Blau; rgb-Kanäle laufen von 0 bis 255
• Bevorzugen Sie lesbaren Kontrast, wenn Text auf farbigem Hintergrund sitzt
• Verschieben Sie gemeinsame Farben nach CSS, wenn Seiten und Projekte wachsen
• Prüfen Sie mit Speichern und Aktualisieren; reparieren Sie die Syntax sorgfältig, wenn eine Farbe „nichts tut“
  In dieser Reihenfolge bauen Sie eine klare Gewohnheit: richtige Eigenschaft wählen, vollständigen Wert schreiben, Lesbarkeit durch Kontrast sichern — und danach zu gemeinsamen Styles wechseln.