HTML Farben

In HTML und CSS haben Sie verschiedene Möglichkeiten, Farben für Texte, Hintergründe, Ränder und andere Elemente festzulegen. Farben spielen eine zentrale Rolle im Design einer Webseite und verbessern die visuelle Attraktivität und Benutzerfreundlichkeit. Sie können Farben auf verschiedene Arten angeben, darunter Farbname, Hexadezimalwert, RGB, RGBA und HSL. Jede Methode hat ihre spezifischen Vorteile und Anwendungsfälle.

1. Farbnamen

HTML unterstützt eine Reihe von vordefinierten Farbnamen, die direkt verwendet werden können. Diese Methode ist sehr einfach und leicht verständlich, wird jedoch häufig durch die eingeschränkte Anzahl an Farbnamen limitiert.

Beispiel:

<p style="color: red;">Dieser Text ist rot.</p>
<p style="color: blue;">Dieser Text ist blau.</p>
<p style="background-color: yellow;">Dieser Absatz hat einen gelben Hintergrund.</p>

Einige häufig verwendete Farbnamen:

• red
• blue
• green
• black
• white
• yellow
• gray

Tabelle der häufigsten HTML-Farbnamen:

Farbname	Vorschau	Hexadezimal
Red		#FF0000
Blue		#0000FF
Green		#008000
Yellow		#FFFF00
Black		#000000
White		#FFFFFF

2. Hexadezimale Farbcodes

Ein Hexadezimalwert ist eine häufig verwendete Methode zur Angabe von Farben. Diese Werte bestehen aus sechs Zeichen, die durch ein # eingeleitet werden. Die ersten beiden Zeichen stehen für den Rotwert, die nächsten beiden für Grün und die letzten beiden für Blau (RGB).

Syntax:

<p style="color: #ff5733;">Dieser Text ist orange.</p>
<p style="background-color: #4CAF50;">Dieser Absatz hat einen grünen Hintergrund.</p>

Hier ist eine Farbe mit Hexadezimalwert #ff5733, die ein kräftiges Orange darstellt.

Hexadezimal-Werte:

• #000000 (Schwarz)
• #FFFFFF (Weiß)
• #FF0000 (Rot)
• #00FF00 (Grün)
• #0000FF (Blau)

Kurzform:

Wenn sich in einem Hexadezimalwert die beiden Zeichen jedes Farbwerts wiederholen, kann er verkürzt werden. Zum Beispiel:

• #FF0000 (Rot) kann als #F00 geschrieben werden.
• #FFFFFF (Weiß) kann als #FFF geschrieben werden.

3. RGB (Rot, Grün, Blau)

Eine weitere Methode, Farben zu definieren, ist die Verwendung von RGB-Werten. Mit RGB können Sie den Rot-, Grün- und Blauanteil direkt als numerische Werte zwischen 0 und 255 angeben.

Syntax:

<p style="color: rgb(255, 0, 0);">Dieser Text ist rot.</p>
<p style="background-color: rgb(0, 128, 0);">Dieser Absatz hat einen grünen Hintergrund.</p>

In diesem Beispiel wird der Text mit rgb(255, 0, 0) in Rot dargestellt, da 255 der maximale Wert für den Rotanteil ist, während die anderen Werte 0 sind.

RGB-Beispiele:

• rgb(0, 0, 0) (Schwarz)
• rgb(255, 255, 255) (Weiß)
• rgb(255, 0, 0) (Rot)
• rgb(0, 255, 0) (Grün)
• rgb(0, 0, 255) (Blau)

4. RGBA (RGB mit Transparenz)

RGBA ist eine Erweiterung von RGB, die es Ihnen ermöglicht, zusätzlich zur Farbe auch die Transparenz (Alpha-Wert) festzulegen. Der Alpha-Wert reicht von 0 (vollständig transparent) bis 1 (vollständig deckend).

Syntax:

<p style="color: rgba(255, 0, 0, 0.5);">Dieser Text ist halbtransparent rot.</p>
<p style="background-color: rgba(0, 128, 0, 0.3);">Dieser Absatz hat einen leicht durchsichtigen grünen Hintergrund.</p>

In diesem Beispiel ist der Text rot, aber halbtransparent (0.5), und der Hintergrund des Absatzes ist grün, mit 30 % Transparenz (0.3).

RGBA-Beispiele:

• rgba(255, 0, 0, 0.5) (Halbtransparentes Rot)
• rgba(0, 0, 255, 0.3) (Leicht transparentes Blau)

5. HSL (Farbton, Sättigung, Helligkeit)

HSL steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit). Diese Methode beschreibt die Farben auf Basis von Winkelwerten für den Farbton (0-360 Grad) und Prozentwerten für die Sättigung und Helligkeit.

Syntax:

<p style="color: hsl(0, 100%, 50%);">Dieser Text ist rot.</p>
<p style="background-color: hsl(120, 60%, 50%);">Dieser Absatz hat einen grünen Hintergrund.</p>

Hierbei steht hsl(0, 100%, 50%) für einen Rotton (0 Grad für Rot), der zu 100 % gesättigt und zu 50 % hell ist.

HSL-Werte:

• Der Farbton (Hue) reicht von 0 bis 360 Grad:
• 0 Grad = Rot
• 120 Grad = Grün
• 240 Grad = Blau
• Die Sättigung (Saturation) reicht von 0 % (Grau) bis 100 % (voll gesättigt).
• Die Helligkeit (Lightness) reicht von 0 % (Schwarz) bis 100 % (Weiß).

HSL-Beispiele:

• hsl(0, 100%, 50%) (Rot)
• hsl(120, 100%, 50%) (Grün)
• hsl(240, 100%, 50%) (Blau)

6. HSLA (HSL mit Transparenz)

Ähnlich wie RGBA gibt es auch bei HSL die Möglichkeit, den Alpha-Kanal zur Definition der Transparenz hinzuzufügen. HSLA steht für Hue, Saturation, Lightness und Alpha.

Syntax:

<p style="color: hsla(0, 100%, 50%, 0.5);">Dieser Text ist halbtransparent rot.</p>
<p style="background-color: hsla(120, 60%, 50%, 0.3);">Dieser Absatz hat einen leicht durchsichtigen grünen Hintergrund.</p>

In diesem Beispiel ist hsla(0, 100%, 50%, 0.5) ein halbtransparentes Rot, während hsla(120, 60%, 50%, 0.3) ein leicht durchsichtiger Grünton ist.

7. CSS-Beispiel für Farbgestaltung

Hier sehen Sie ein Beispiel, wie Sie verschiedene Methoden zur Angabe von Farben in einem HTML-Dokument kombinieren können:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Farben in HTML</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: red;
        }
        p {
            color: rgba(0, 0, 255, 0.7);
        }
        .highlight {
            background-color: hsl(60, 100%, 50%);
        }
    </style>
</head>
<body>

    <h1>Farben in HTML</h1>
    <p>Dieser Text ist in leicht transparentem Blau dargestellt.</p>
    <p class="highlight">Dieser Text hat einen gelben Hintergrund durch HSL.</p>

</body>
</html>

In diesem Beispiel verwenden wir Hexadezimalwerte, RGBA und HSL, um verschiedene Elemente der Seite zu gestalten.