HTML-Farbcodes

HTML-Farbcodes – Definition und Verwendung

HTML-Farbcodes sind numerische oder textuelle Werte, die Farben im Webdesign definieren. Sie werden in CSS und HTML verwendet, um Hintergründe, Texte, Rahmen und andere Designelemente farblich zu gestalten. Es gibt verschiedene Möglichkeiten, Farben in HTML und CSS zu definieren. Eine Farbtafel mit allen gängigen HTML- bzw. CSS3-Farben befindet sich am Ende dieser Seite.

Arten von HTML-Farbcodes

Farben können in HTML und CSS auf verschiedene Weise dargestellt werden:

• Hexadezimale Farbwerte: Farben werden als sechsstellige Hexadezimalzahlen definiert, z. B. #FF5733 für ein kräftiges Orange.
• RGB-Farbwerte: Definiert durch drei Werte für Rot, Grün und Blau, z. B. rgb(255, 87, 51).
• RGBA-Farbwerte: Wie RGB, jedoch mit einer zusätzlichen Transparenzstufe (Alpha-Kanal), z. B. rgba(255, 87, 51, 0.5).
• HSL-Farbwerte: Farben basierend auf Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness), z. B. hsl(9, 100%, 60%).
• HSLA-Farbwerte: Wie HSL, jedoch mit Transparenz, z. B. hsla(9, 100%, 60%, 0.5).
• Farbnamen: CSS unterstützt vordefinierte Farbdefinitionen wie red, blue oder darkslategray.

Hexadezimale Farbwerte

Hex-Farben bestehen aus sechs Zeichen, die aus Zahlen (0-9) und Buchstaben (A-F) bestehen. Jede Farbkombination wird durch zwei Stellen für Rot, Grün und Blau definiert:

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

Es gibt auch Kurzformen, z. B. #F00 für #FF0000.

RGB- und RGBA-Farbwerte

RGB basiert auf drei Farbwerten im Bereich von 0 bis 255:

• rgb(255, 0, 0) – Reines Rot
• rgb(0, 255, 0) – Reines Grün
• rgb(0, 0, 255) – Reines Blau

Mit RGBA kann die Transparenz definiert werden. rgba(255, 0, 0, 0.5) bedeutet z. B. ein halbtransparentes Rot.

HSL- und HSLA-Farbwerte

HSL basiert auf einem Farbkreis, wobei:

• Hue (Farbton): Ein Wert von 0-360° (0° = Rot, 120° = Grün, 240° = Blau)
• Saturation (Sättigung): In Prozent (0% = Grau, 100% = Vollfarbe)
• Lightness (Helligkeit): In Prozent (0% = Schwarz, 100% = Weiß)

Beispiel: hsl(0, 100%, 50%) ergibt reines Rot.

Mit hsla() kann die Transparenz hinzugefügt werden.

CSS-Farbverläufe

Neben statischen Farben lassen sich mit CSS auch Farbverläufe erstellen, z. B.:

background: linear-gradient(to right, red, yellow);

Dies erzeugt einen Verlauf von Rot nach Gelb.

Farbtafel mit HTML-Farbcodes

Nachfolgend finden Sie eine Farbtafel mit allen gängigen HTML- und CSS3-Farben. Diese enthält neben den Farbnamen auch deren Hexadezimal-, RGB- und HSL-Werte für eine einfache Farbauswahl.

Fazit

HTML-Farbcodes bieten eine Vielzahl von Möglichkeiten zur Gestaltung von Webseiten. Je nach Anwendungsfall kann zwischen Hex, RGB, HSL oder vordefinierten Farbnamen gewählt werden. Durch den gezielten Einsatz von Farben lassen sich benutzerfreundliche und ansprechende Webdesigns erstellen.

HTML- und CSS3 Standard Farbencodes

HTML- und CSS3 Rottöne

HTML- und CSS3 Orangetöne

HTML- und CSS3 Gelbtöne

HTML- und CSS3 Grüntöne

HTML- und CSS3 Blautöne

HTML- und CSS3 Türkistöne (Cyan)

HTML- und CSS3 Violett-/Pinke-Töne

HTML- und CSS3 Brauntöne

HTML- und CSS3 Grautöne

HTML- und CSS3 Weißtöne

Alle Angaben ohne Gewähr.