HTML-Farben werden zur Farb­aus­wahl für Hin­ter­grün­de, Texte oder Rahmen in einem HTML-Dokument genutzt. Die richtige Farbwahl ver­bes­sert das Design und die Les­bar­keit einer Website. Für die De­fi­ni­ti­on haben Sie gleich drei ver­schie­de­ne Optionen zur Verfügung.

Was sind HTML Colors?

HTML Colors bzw. HTML-Farben werden genutzt, um die Farbwerte be­stimm­ter Elemente in einem HTML-Dokument zu de­fi­nie­ren. Mithilfe einfacher Ein­stel­lun­gen, die innerhalb des body-Bereichs über das style-Tag vor­ge­nom­men werden, können Sie den HTML-Hin­ter­grund, Konturen und Texte nach eigenen Vor­stel­lun­gen anpassen.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Welche Methoden gibt es, um HTML-Farben anzugeben?

Es gibt drei ver­schie­de­ne, aber gleich­wer­ti­ge Methoden, um HTML Colors zu de­fi­nie­ren. Was diese drei Varianten un­ter­schei­det, erfahren Sie in den nach­fol­gen­den Ab­schnit­ten.

Farbnamen

Insgesamt 140 Farbnamen werden von allen modernen Browsern un­ter­stützt. Der jeweilige Name wird dafür einfach in eng­li­scher Sprache innerhalb des Codes hin­ter­legt. Neben Stan­dard­wer­ten wie „Blue“, „Gray“ oder „Red“ sind auch spe­zi­el­le­re Werte wie „Chocolate“, „Cornsilk“ oder „Dark­Se­aGreen“ möglich.

Hex-Farbcodes

Hex-Farbcodes bestehen aus einer he­xa­de­zi­ma­len Zahl mit sechs Stellen, die durch eine Raute (#) ge­kenn­zeich­net werden. Verwendet werden die Ziffern von 0 bis 9 und die Buch­sta­ben von A bis F. In dieser He­xa­de­zi­mal­zahl wird paarweise der Anteil der Farben Rot, Grün und Blau aus­ge­drückt, wobei 00 der kleinste und FF der größte Wert ist. Die Farbe Blau wird dem­entspre­chend durch den He­xa­de­zi­mal­code #0000FF aus­ge­drü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 Farb­de­fi­ni­ti­on mit Hex-Farbcodes funk­tio­niert die HTML-Farb­aus­zeich­nung mithilfe von RGB-Farben. Diese werden ebenfalls durch ihre Anteile von Rot, Grün und Blau definiert, wobei die In­ten­si­tät einer Kom­po­nen­te zwischen 0 und 255 liegen kann. Die Farbe Blau de­fi­nie­ren 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 de­fi­nie­ren: Syntax und Beispiele

Ab­schlie­ßend ver­deut­li­chen wir die Syntax und Funk­ti­ons­wei­se der einzelnen Methoden für die Angabe von Farben in HTML an einigen prak­ti­schen Bei­spie­len.

Farben von Hin­ter­grün­den ändern

Wenn Sie in HTML die Farben Ihres Hin­ter­grunds ändern möchten, benötigen Sie das style-Attribut und die CSS-Inline-Ei­gen­schaft background-color. Die Syntax sieht wie folgt aus:

<element style="background-color: farbwert;">
html

Im nach­fol­gen­den Beispiel nutzen wir die Farbnamen, um die Hin­ter­grund­far­be der <h2>-Über­schrift auf „SteelBlue“ zu setzen. Der Text wird einmal mit dem Farbwert „Spring­Green“ und einmal mit „Yellow“ hin­ter­legt:

<body>
<h2 style="background-color: SteelBlue;">
HTML Colors für den Hintergrund
</h2>
<p style="background-color: SpringGreen; padding: 5px;">
Hier haben wir einen Absatz angelegt und seine Hintergrundfarbe ist <b>SpringGreen</b>.
</p>
<p style="background-color: Yellow;">
Dies ist ein weiterer Absatz und seine Hintergrundfarbe ist <b>Gelb</b>.
</p>
</body>
html
Bild: HTML Colors: Hintergrund-Beispiel
Im Browser sehen wir wie gewünscht die ver­schie­de­nen Hin­ter­grund­far­ben für die drei Elemente.

Text­far­ben anpassen

Wenn Sie die Farbe von Texten auf Ihren Webseiten mit ändern möchten, funk­tio­niert dies nach einem ähnlichen Prinzip. In diesem Fall arbeiten Sie al­ler­dings mit der Ei­gen­schaft color. Die Syntax gestaltet sich so:

<element style="color: farbwert;">
html

Für die Farb­an­ga­be in diesem Beispiel nutzen wir zur Ver­an­schau­li­chung die Hex-Werte der HTML-Farben. Dabei legen wir OrangeRed (#FF4500) als Schrift­far­be für die Headline fest. Der erste Abschnitt wird in der Farbe Mid­night­Blue (#191970) gehalten und der zweite Abschnitt in Indigo (#4B0082):

<body>
<h2 style="color: #FF4500;">
Diese Headline ist Orangerot
</h2>
<p style="color: #191970;">
Dies ist ein Absatz und sein Text ist <b>Mitternachtsblau</b>. </p>
<p style="color: #4B0082;">
Dies ist ein zweiter Absatz in der Schriftfarbe <b>Indigo</b>. 
</p>
</body>
html
Bild: HTML-Farben: Text-Beispiel
Nach der Aus­füh­rung des Code-Beispiels sehen wir die drei ver­schie­den­far­bi­gen Text­ele­men­te.

Farbwerte von Rahmen festlegen

Auch Konturen können Sie mit HTML-Farben nach Belieben verändern. Neben der Ei­gen­schaft border können Sie weitere Parameter nutzen, um die Struktur des Rahmens zu de­fi­nie­ren. Die Syntax sieht in diesem Fall so aus:

<element style="border: weitere parameter farbwert;">
html

Im Beispiel verwenden wir nun die dritte Variante für die Farb­de­fi­ni­ti­on: 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) (Light­Se­aGreen) und rgb(205, 133, 63) (Peru) umrahmt.

<body>
<h2 style="border: 2.5px solid rgb(178, 34, 34);">
Der Rahmen der Headline ist Feuerrot</h2>
<p style="border: 2.5px dashed rgb(32, 178, 170); padding: 5px;">
Diese Rahmen ist <b>Hellgrün</b>.
</p>
<p style="border: 2.5px dotted rgb(205, 133, 63); padding: 5px;">
Dieser Rahmen hat den Farbwert <b>Peru</b>.
</p>
</body>
html
Bild: HTML Colors: Rahmen-Beispiel
Die Um­rah­mun­gen im Beispiel haben nicht nur ver­schie­de­ne HTML-Farben, sondern auch ver­schie­de­ne Dar­stel­lungs­for­men erhalten.
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü