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.
![→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
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.
Quelle: Screenshot HTML Color Codes
Leitfaden: CSS und HTML für Anfänger
Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.
- Was ist HTML?
- Was ist CSS?
- CSS- & HTML-Codes, die Sie kennen sollten
- Was sind beliebte Fehlerquellen?
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.
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.
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:
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.
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.
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.
Titelbild: TravelCouples / iStock / Getty Images Plus
