# HTML Colors: Farbe für Hintergrund, Text und Rahmen bestimmen HTML-Farben werden zur Farbauswahl für Hintergründe, Texte oder Rahmen in einem HTML-Dokument genutzt. Die richtige Farbwahl verbessert das Design und die Lesbarkeit einer Website. Für die Definition haben Sie gleich drei verschiedene Optionen zur Verfügung. ## Was sind HTML Colors? HTML Colors bzw. HTML-Farben werden genutzt, um die Farbwerte bestimmter Elemente in einem [HTML](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html/)-Dokument zu definieren. Mithilfe einfacher Einstellungen, die innerhalb des [body](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-body/)-Bereichs über das [style-Tag](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-style/) vorgenommen werden, können Sie den [HTML-Hintergrund](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-backgrounds/), Konturen und Texte nach eigenen Vorstellungen anpassen. ## Welche Methoden gibt es, um HTML-Farben anzugeben? Es gibt drei verschiedene, aber gleichwertige Methoden, um HTML Colors zu definieren. Was diese drei Varianten unterscheidet, erfahren Sie in den nachfolgenden Abschnitten. ### Farbnamen Insgesamt **140 Farbnamen** werden von allen modernen Browsern unterstützt. Der jeweilige Name wird dafür einfach in englischer Sprache innerhalb des Codes hinterlegt. Neben Standardwerten wie „Blue“, „Gray“ oder „Red“ sind auch speziellere Werte wie „Chocolate“, „Cornsilk“ oder „DarkSeaGreen“ möglich. ### Hex-Farbcodes Hex-Farbcodes bestehen aus einer **hexadezimalen Zahl mit sechs Stellen**, die durch eine Raute (`#`) gekennzeichnet werden. Verwendet werden die Ziffern von 0 bis 9 und die Buchstaben von A bis F. In dieser Hexadezimalzahl wird paarweise der Anteil der Farben Rot, Grün und Blau ausgedrückt, wobei `00` der kleinste und `FF` der größte Wert ist. Die Farbe Blau wird dementsprechend durch den Hexadezimalcode `#0000FF` ausgedrückt, während ein dunkles Pink (DeepPink) den Farbwert `#FF1493` hat. An den beiden Enden des Spektrums stehen Schwarz (`#000000`) und Weiß (`#FFFFFF`). ### RGB-Werte Ähnlich wie die Farbdefinition mit Hex-Farbcodes funktioniert die HTML-Farbauszeichnung mithilfe von [RGB-Farben](https://www.ionos.at/digitalguide/websites/webdesign/rgb-farben/). Diese werden ebenfalls durch ihre Anteile von Rot, Grün und Blau definiert, wobei die Intensität einer Komponente **zwischen 0 und 255** liegen kann. Die Farbe Blau definieren Sie zum Beispiel mit dem Code `rgb(0, 0, 255)`, Cyan mit `rgb(0, 255, 255)` und DeepPink mit `rgb(255, 20, 147)`. ## HTML-Farben definieren: Syntax und Beispiele Abschließend verdeutlichen wir die Syntax und Funktionsweise der einzelnen Methoden für die Angabe von Farben in HTML an einigen praktischen Beispielen. ### Farben von Hintergründen ändern Wenn Sie in HTML die Farben Ihres Hintergrunds ändern möchten, benötigen Sie das `style`-Attribut und die [CSS](https://www.ionos.at/digitalguide/websites/webdesign/was-ist-css/)-Inline-Eigenschaft `background-color`. Die Syntax sieht wie folgt aus: ```html ``` Im nachfolgenden Beispiel nutzen wir die **Farbnamen**, um die Hintergrundfarbe der `

`-Überschrift auf „SteelBlue“ zu setzen. Der Text wird einmal mit dem Farbwert „SpringGreen“ und einmal mit „Yellow“ hinterlegt: ```html

HTML Colors für den Hintergrund

Hier haben wir einen Absatz angelegt und seine Hintergrundfarbe ist SpringGreen.

Dies ist ein weiterer Absatz und seine Hintergrundfarbe ist Gelb.

``` [![Bild: HTML Colors: Hintergrund-Beispiel](https://www.ionos.at/digitalguide/fileadmin/_processed_/6/b/csm_html-farben-hintergrund-beispiel_4dc0bb1e9d.webp "HTML Colors: Hintergrund-Beispiel")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-farben-hintergrund-beispiel.png) Im Browser sehen wir wie gewünscht die verschiedenen Hintergrundfarben für die drei Elemente. ### Textfarben anpassen Wenn Sie die Farbe von Texten auf Ihren Webseiten mit ändern möchten, funktioniert dies nach einem ähnlichen Prinzip. In diesem Fall arbeiten Sie allerdings mit der Eigenschaft `color`. Die Syntax gestaltet sich so: ```html ``` Für die Farbangabe in diesem Beispiel nutzen wir zur Veranschaulichung die **Hex-Werte** der HTML-Farben. Dabei legen wir OrangeRed (`#FF4500`) als Schriftfarbe für die Headline fest. Der erste Abschnitt wird in der Farbe MidnightBlue (`#191970`) gehalten und der zweite Abschnitt in Indigo (`#4B0082`): ```html

Diese Headline ist Orangerot

Dies ist ein Absatz und sein Text ist Mitternachtsblau.

Dies ist ein zweiter Absatz in der Schriftfarbe Indigo.

``` [![Bild: HTML-Farben: Text-Beispiel](https://www.ionos.at/digitalguide/fileadmin/_processed_/0/a/csm_html-farben-text-beispiel_21c5c5e5d3.webp "HTML-Farben: Text-Beispiel")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-farben-text-beispiel.png) Nach der Ausführung des Code-Beispiels sehen wir die drei verschiedenfarbigen Textelemente. ### Farbwerte von Rahmen festlegen Auch Konturen können Sie mit HTML-Farben nach Belieben verändern. Neben der Eigenschaft `border` können Sie weitere Parameter nutzen, um die Struktur des Rahmens zu definieren. Die Syntax sieht in diesem Fall so aus: ```html ``` Im Beispiel verwenden wir nun die dritte Variante für die Farbdefinition: die **RGB-Werte**. Der Rahmen unserer Headline erhält den Wert `rgb(178, 34, 34)` (FireBrick). Die beiden Absätze werden mit `rgb(32, 178, 170)` (LightSeaGreen) und `rgb(205, 133, 63)` (Peru) umrahmt. ```html

Der Rahmen der Headline ist Feuerrot

Diese Rahmen ist Hellgrün.

Dieser Rahmen hat den Farbwert Peru.

``` [![Bild: HTML Colors: Rahmen-Beispiel](https://www.ionos.at/digitalguide/fileadmin/_processed_/8/4/csm_html-farben-rahmen-beispiel_f0a034f0c8.webp "HTML Colors: Rahmen-Beispiel")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-farben-rahmen-beispiel.png) Die Umrahmungen im Beispiel haben nicht nur verschiedene HTML-Farben, sondern auch verschiedene Darstellungsformen erhalten. This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/html-colors/](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-colors/) for AI/LLM consumption.