Hintergrundfarben bestimmen den Ton Ihrer Website und können wichtige Inhalte hervorheben. Die richtige Farbwahl ist daher ein entscheidender Faktor bei der Gestaltung einer ansprechenden und benutzerfreundlichen Website. In diesem Artikel erfahren Sie, wie Sie die Hintergrundfarbe eines HTML-Elements festlegen und ändern.

Download: Leitfaden CSS & HTML für Anfänger

Welche HTML-Farbtypen gibt es?

Es gibt drei Möglichkeiten, um Farben in HTML anzugeben: Hex-Farbcodes, HTML-Farbnamen und RGB-Werte. Wir erklären Ihnen die Unterschiede:

Hex-Farbcodes

Hex-Farbcodes sind die gängigste Methode zur Angabe von Farben in HTML. Sie stellen Farben mit einer 6-stelligen hexadezimalen Zahl dar. Das Hexadezimalsystem ist ein Zahlensystem zur Basis 16, das die Ziffern 0-9 und die Buchstaben A-F verwendet.

Der Hex-Farbcode setzt sich aus drei Ziffernpaaren zusammen, die jeweils für eine Komponente der Farben Rot, Grün und Blau (RGB) stehen. Der Mindestwert einer Farbe wird mit "00” definiert, der höchste Wert mit "ff”. Zum Beispiel steht “ff0000” für Rot, “00ff00” für Grün und “0000ff” für Blau.

Sie können auch hexadezimale Farbcodes verwenden, die drei statt sechs Ziffern lang sind. In diesem Fall wird jede Ziffer mit 16 multipliziert, um den entsprechenden Komponentenwert zu erhalten. So entspricht beispielsweise “f00” dem Wert “ff0000” (Rot), “0f0” dem Wert “00ff00” (Grün) und “00f” dem Wert 0000ff (Blau).

HTML-Farbnamen

Anstelle von Zahlen können Sie Farben mit den dazugehörigen HTML-Farbnamen angeben. Es wird eine breite Palette von Farbnamen unterstützt, die von Grundfarben wie “rot" und “blau" bis hin zu obskuren Farben wie “aquamarin" und “peru" reichen. Zwischen Groß- und Kleinschreibung wird nicht unterschieden.

Sie können die Farben allein oder in Kombination mit anderen Farben verwenden, um unterschiedliche Effekte zu erzielen. Mittlerweile gibt es über 16 Millionen verschiedene Farben in HTML.

RGB-Werte

Auch mit RGB-Farbcodes können Sie die HTML-Hintergrundfarbe eines Elementes festlegen. Die Farben werden dabei durch ihre roten, grünen und blauen Komponenten spezifiziert, wobei die Werte 0 bis 255 im Farbcode für die Intensität der Farbe stehen.

Es gilt: Je höher der Wert, desto intensiver die Farbe. Zum Beispiel kann die Farbe Rot als RGB (255, 0, 0) angegeben werden. Das bedeutet, dass die Farbe 100 % Rot, 0 % Grün und 0 % Blau enthält.

Mit RGB-Farbcodes lässt sich eine breite Palette von Farben erzeugen. Um einen Farbcode zu verwenden, müssen Sie diesen zunächst in den HTML-Code eingeben und können anschließend die gewünschte Farbe mit CSS auf das Element anwenden. Die einfachste Methode, den RGB-Farbcode für eine beliebige Farbe herauszufinden, ist die Verwendung einer Online-RGB-Farbtabelle.

Screenshot Code HTML-Hintergrundfarbe RGB Farben

Quelle: Screenshot HTML Color Codes

Wie lässt sich die HTML-Hintergrundfarbe ändern: Die wichtigsten Befehle

Die richtigen Befehle zu kennen, ist essentiell, wenn Sie die HTML-Hintergrundfarbe Ihrer Website festlegen oder ändern möchten. Wir stellen Sie Ihnen vor:

HTML Background Color

Die Eigenschaft “background color'' oder “bgcolor” wird verwendet, um die HTML-Hintergrundfarbe zu ändern. Um den Hintergrund beispielsweise rot zu färben, können Sie den Farbnamen "rot", den Heximalcode "#ff0000" oder den RGB-Code "rgb(255,0,0)" verwenden. Möchten Sie den kompletten Hintergrund in einer gewünschten Farbe darstellen, fügen Sie eine der drei Angaben in das Element <body> ein.

Screenshot Code HTML-Hintergrundfarbe Background Color

Quelle: Screenshot w3docs

HTML div Background Color

Möchten Sie Ihre Farbauswahl auf einen bestimmten Bereich begrenzen, können Sie beispielsweise die Eigenschaft "HTML div background color'' verwenden. Dadurch wird die gewünschte Hintergrundfarbe nur einem ausgewählten div-Element hinzugefügt.

Ein div-Element ist ein Containerelement und dient dazu, HTML-Elemente zu gruppieren. So werden div-Elemente häufig verwendet, um Spalten oder Abschnitte auf einer Webseite zu erstellen. Um einem div-Element eine rote Hintergrundfarbe zuzuordnen, könnte Ihr CSS-Code wie folgt aussehen:

<div style="background-color:red"></div>

HTML Hintergrundfarbe Text

Mit dem Attribut “background color” bzw. “bgcolor” können Sie auch die Hintergrundfarbe des kompletten Texts oder einzelner Textstellen auf Ihrer Website ändern. Zum einen wird der Text dadurch an die Designfarben Ihrer Website angepasst, zum anderen ermöglichen Sie eine bessere Lesbarkeit der Schrift. Beispielsweise können Sie der Überschrift oder einzelnen Absätzen eine bestimmte Hintergrundfarbe hinzufügen.

Screenshot Code HTML-Hintergrundfarbe Text

Quelle: Screenshot w3docs

Transparenter Hintergrund

Um einen transparenten Hintergrund zu erstellen, können Sie das Schlüsselwort "transparent" oder den Code "rgba(0,0,0,0)" verwenden. Das "A" in "RGBA" steht für Alpha und gibt den Grad der Transparenz an. Je niedriger der Wert, desto transparenter ist die Farbe. Eine RGBA-Farbe mit einem Wert von 0 ist vollständig transparent, während ein Wert von 1 vollständig sichtbar ist.

Sie können die CSS-Eigenschaft auch verwenden, um die Hintergrundfarbe eines Elements halbtransparent zu machen. Dies funktioniert jedoch nur, wenn dieses eine einfarbige Hintergrundfarbe hat.

Farbverläufe

Farbverläufe sind eine gute Möglichkeit, um Ihren HTML-Hintergrundfarben das gewisse Etwas zu verleihen. Sie können sich hierbei zwischen linearen und radialen Verlaufshintergründen entscheiden.

Standardmäßig gehen lineare Farbverläufe von oben nach unten, aber Sie können auch einen Startpunkt wählen. Folgend sehen Sie ein Beispiel für die Verwendung der CSS-Funktion "Linearer Farbverlauf", um einen Farbverlauf von Blau nach Grün zu erstellen:

Screenshot Code HTML-Hintergrundfarbe Linearer Farbverlauf

Quelle: Screenshot w3docs

Radiale Gradientenhintergründe werden durch ihren Mittelpunkt definiert. Es ist auch möglich, mehrere Farbstopps zu erstellen. Das bedeutet, dass Sie mehr als zwei Farben angeben.

Screenshot Code HTML-Hintergrundfarbe Gradienten

Quelle: Screenshot w3docs

Sich verändernde Hintergrundfarben

Möchten Sie Ihrer Website einen ganz besonderen Look verleihen, gibt es die Möglichkeit, sich verändernde HTML-Hintergrundfarben zu erstellen. Dafür erweitern Sie das Element <body> um das Attribut “animation”. Sie können nicht nur die einzelnen Farben wählen, sondern auch, in welchen Zeitabständen diese wechseln sollen.

Screenshot Code HTML-Hintergrundfarbe wechselnd

Quelle: Screenshot w3docs

Fazit: Gestalten Sie eine einzigartige Website

Mit den richtigen Hintergrundfarben gelingt es Ihnen, eine übersichtliche und ansprechende Website zu gestalten, die den Bedürfnissen Ihrer Zielgruppe entspricht. Experimentieren Sie mit verschiedenen HTML-Hintergrundfarben und Farbverläufen, um den perfekten Look für Ihre Website zu finden.

Wählen Sie Farben, die Ihr Unternehmen und Ihre Werte repräsentieren und achten Sie darauf, wichtige Texte durch die Farbauswahl hervorzuheben.

css html für anfänger

Titelbild: TravelCouples / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Nov 10, 2022 2:00:00 AM, aktualisiert am November 10 2022

Themen:

HTML