Farben in HTML verwenden
Farben sind ein zentrales visuelles Element von Webseiten. Sie bestimmen die Stimmung, heben Inhalte hervor und prägen das Gesamtdesign. In HTML gibt es mehrere Möglichkeiten, Farben zu definieren.
Möglichkeiten zur Farbangabe
In HTML kannst du Farben mit Namen (z. B. red), HEX-Codes (z. B. #ff0000), im RGB-Format (z. B. rgb(255, 0, 0)) oder HSL-Format (z. B. hsl(0, 100%, 50%)) angeben.
Code-Details
<p style="color: red;">Red text</p>
<p style="color: #00ff00;">Green text (HEX)</p>
<p style="color: rgb(0, 0, 255);">Blue text (RGB)</p>
<p style="color: hsl(60, 100%, 50%);">Yellow text (HSL)</p>
Vorschau
Red text
HEX-Format
HEX-Codes (hexadezimal) beginnen mit einem # und bestehen aus sechs Zeichen. Die ersten zwei stehen für Rot, die nächsten zwei für Grün und die letzten zwei für Blau.
RGB-Format
Das RGB-Format nutzt drei Zahlen in Klammern: Rot, Grün und Blau. Jede Zahl liegt zwischen 0 und 255. Zum Beispiel stellt rgb(255, 0, 0) die Farbe Rot dar.
HSL-Format
HSL (Hue, Saturation, Lightness) beschreibt Farben anhand von Farbton, Sättigung und Helligkeit. Der Farbton ist ein Winkel in Grad, die Sättigung beschreibt die Farbintensität, die Helligkeit den Lichtanteil.
Benannte Farben
HTML unterstützt über 140 vordefinierte Farbnamen wie red, blue, green, orange usw. Diese sind leicht lesbar und schnell einsetzbar.
Kontrast zwischen Text und Hintergrund
Es ist wichtig, für ausreichenden Kontrast zwischen Text und Hintergrundfarbe zu sorgen. Andernfalls kann der Inhalt schwer lesbar werden. Verwende hellen Text auf dunklem Hintergrund oder umgekehrt.
Farben und Barrierefreiheit
Berücksichtige bei der Farbwahl auch sehbehinderte Nutzer. Vermeide Farbkombinationen, die für Farbenblinde unleserlich sind. Der Inhalt sollte nicht nur über Farbe vermittelt werden.
Aufgabe: Ziehe die fehlende Zeile ein, die den Text grün färbt!
Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
Ziehe das Element hierher
}
</style>
</head>
<body>
<blockquote>
<p>When you have something to say, silence is a lie.</p>
<footer>- Jordan B. Peterson</footer>
</blockquote>
</body>
</html>
Antworten
Vorschau
Tipps zur Farbverwendung
- Verwende ein einheitliches Farbschema auf deiner Website.
- Vermeide den übermäßigen Einsatz greller Farben.
- Teste dein Design sowohl im hellen als auch im dunklen Modus.
- Verlasse dich nicht nur auf Farben, um Informationen zu vermitteln.
- Nutze einen Kontrast-Checker, um Barrierefreiheitsstandards (WCAG) zu erfüllen.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
