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.

red

green

blue

orange

purple

black

gray

brown

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.