Wie du Hintergrundfarben von HTML Elementen mit der CSS background-color Eigenschaft ändern kannst

Braucht deine Webseite nach Jahren einen Tapetenwechsel? Oder ist dein rot den Nutzern deiner Seite vielleicht zu grell? Die CSS background-color Eigenschaft schafft dabei schnelle Abhilfe.

Standard: Transparenter Hintergrund

Oftmals ist es notwendig, dass ein Hintergrund transparent ist, sodass man die darunter liegenden Elemente noch sehen kann.
Alle HTML Elemente haben als Voreinstellung einen transparenten Hintergrund.
Sollte jedoch eine andere CSS-Regel die Hintergrundeigenschaft deines Elementes überschreiben, kannst du das schnell ändern.
Nutze dafür einfach background-color: transparent;.

<style>
  div{
  	background-color: red;
    min-width: 100px;
  }
  .transparenter-hintergrund{
  	background-color: transparent;
  }
</style>
<div>
  Standard - roter Hintergrund
</div>
<div class="transparenter-hintergrund">
  Hintergrund nun transparent dank der background-color: transparent Eigenschaft
</div>

In diesem Beispiel überschreibt die Klasse .transparenter-hintergrund die CSS-Eigenschaft background-color: red; von der CSS-Regel für alle div-Elemente.
Deshalb ist im zweiten Beispiel der Hintergrund transparent, anstatt rot.

color-background mit Farbennamen bestimmen

Wie du am vorangegangen Beispiel sehen konntest, kann auch ein Farbnamen als Wert eingegeben werden.
Insgesamt gibt es über 140 vordefinierte Farben in CSS.
Eine Übersicht aller Farbnamen und deren HEX-Werten findest du hier.
Als Wert trägst du in diesem Falle eine der vordefinierten CSS Farbnamen ein.

<style>
  .roter-hintergrund{
  	background-color: red;
  }
  .gelber-hintergrund{
  	background-color: yellow;
  }
  .blauer-hintergrund{
  	background-color: blue;
  }
</style>
<div class="roter-hintergrund">
  Roter Hintergrund :)
</div>
<div class="gelber-hintergrund">
  Gelber Hintergrund
</div>
<div class="blauer-hintergrund">
  Blauer Hintergrund
</div>

color-background durch HEX-Code bestimmen

In der Regel möchtest du aber nicht einen vordefinierten CSS Farbcode nutzen, sondern lieber einen der zu deinem Firmenlogo und allgemeinem Branding passt.
Eigene Farben kannst du unter anderem mit Hilfe eines HEX-Codes machen.
Das ist heutzutage auch die gängigste Variante.
Was ein HEX-Code ist kannst du hier nachlesen.

<style>
  .roter-hintergrund{
  	background-color: #e74c3c;
  }
  .gelber-hintergrund{
  	background-color: #f1c40f;
  }
  .blauer-hintergrund{
  	background-color: #3498db;
  }
</style>
<div class="roter-hintergrund">
  Roter Hintergrund :)
</div>
<div class="gelber-hintergrund">
  Gelber Hintergrund
</div>
<div class="blauer-hintergrund">
  Blauer Hintergrund
</div>

Wie du siehst, haben wir nun die vorgegebenen Farben durch eigene Farben ersetzt.
Um schöne Farben für dein nächstes Projekt zu finden, empfehlen wir die Seite flatuicolors.com.
Dort findest du eine Vielzahl von gut abgestimmten Farbpaletten und mit einem Klick auf eine der Farben nimmst du auch gleich den gewünschten Farbcode mit.

color-background durch RGB-Code bestimmen

Neben dem HEX-Code ist der RGB-Code die zweitgängigste Variante unter Entwicklern, um die Hintergrundfarbe festzulegen.
Hier ein Beispiel für solche RGB-Codes.
Wir haben die jeweiligen HEX-Codes durch RGB-Codes ersetzt, welche die gleiche Farbe wiedergeben.

<style>
  .roter-hintergrund{
  	background-color: rgb(231, 76, 60);
  }
  .gelber-hintergrund{
  	background-color: rgb(241, 196, 15);
  }
  .blauer-hintergrund{
  	background-color: rgb(52, 152, 219);
  }
</style>
<div class="roter-hintergrund">
  Roter Hintergrund :)
</div>
<div class="gelber-hintergrund">
  Gelber Hintergrund
</div>
<div class="blauer-hintergrund">
  Blauer Hintergrund
</div>

Wie du siehst, kriegen wir bei beiden dieselben Ergebnisse.
RGB-Codes bestehen aus 3 Werten, welche einen Wert von 0 bis 255 haben können.
Dabei steht der erste für den Rotwert, der zweite für den Gelbwert und der dritte für den Blauwert.
Durch die Kombination und Abstimmung dieser 3 Farben kann nahezu jede beliebige Farbe generiert werden.

Mit RGBA die Transparenz einer Hintergrundfarbe festlegen

Manchmal ist es erforderlich, dass die Hintergrundfarbe leicht transparent sein muss, um die Farben nicht so stark zu haben.
Zu den drei Werten, kommt also ein vierter hinzu – die Transparenz.
Dabei kannst du einen Wert zwischen 0 und 1 festlegen.
0 steht für komplette Transparenz und 1 ist komplett undurchsichtig.

<style>
  .roter-hintergrund{
  	background-color: rgba(231, 76, 60, 0.5);
  }
  .gelber-hintergrund{
  	background-color: rgba(241, 196, 15, 0.5);
  }
  .blauer-hintergrund{
  	background-color: rgba(52, 152, 219, 0.5);
  }
</style>
<div class="roter-hintergrund">
  Roter Hintergrund :)
</div>
<div class="gelber-hintergrund">
  Gelber Hintergrund
</div>
<div class="blauer-hintergrund">
  Blauer Hintergrund
</div>

Wie du siehst, haben wir unsere Hintergrundfarben nun halbtransparent gemacht und somit wirken die Farben nicht so stark wie zuvor.

color-background durch hsl-Code bestimmen

Eine etwas unbekanntere, aber nach wie vor interessante, Option um Farben festzulegen ist der hsl()-code.
Dabei steht der erste Wert für den Farbton (sogenannt hue), der zweite für die Sättigung (saturation) und der Dritte für die Helligkeit (luminosity).
Durch die Kombination der einzelnen Werte kann ebenso nahezu jeder Farbton generiert werden.

<style>
  .roter-hintergrund{
  	background-color: hsl(6, 78%, 57%);
  }
  .gelber-hintergrund{
  	background-color: hsl(48, 89%, 50%);
  }
  .blauer-hintergrund{
  	background-color: hsl(204, 70%, 53%);
  }
</style>
<div class="roter-hintergrund">
  Roter Hintergrund :)
</div>
<div class="gelber-hintergrund">
  Gelber Hintergrund
</div>
<div class="blauer-hintergrund">
  Blauer Hintergrund
</div>

Wie du siehst, können wir dieselben Farben auch mit der Nutzung von hsl-Codes erreicht werden.

Mit hsla() die Transparenz eines hsl-Farbwertes festlegen

Wie auch bei den RGB-Codes, gibt es die Möglichkeit eine Transparenz, Alpha genannt, zu setzen.
Dafür gibst du als vierten Wert einen Transparenzwert bzw. Alphawert zwischen 0 und 1 ein.

<style>
  .roter-hintergrund{
  	background-color: hsl(6, 78%, 57%, 0.5);
  }
  .gelber-hintergrund{
  	background-color: hsl(48, 89%, 50%, 0.5);
  }
  .blauer-hintergrund{
  	background-color: hsl(204, 70%, 53%, 0.5);
  }
</style>
<div class="roter-hintergrund">
  Roter Hintergrund :)
</div>
<div class="gelber-hintergrund">
  Gelber Hintergrund
</div>
<div class="blauer-hintergrund">
  Blauer Hintergrund
</div>

Schnellübersicht und Tipps

Wir haben viele verschiedene Möglichkeiten, um die Hintergrundfarbe unseres HTML Elements mit Hilfe der CSS background-color Eigenschaft zu ändern.
Dafür eignet sich der HEX-Code perfekt für einfache Farben ohne Transparenz.
Möchtest du jedoch lieber deinen Hintergrundfarben eine Transparenz zuweisen, dann nutz am besten rgba() oder hsla().

Hier findest du ein nützliches Tool von w3school mit dem du jede Farbe in eine andere beliebige Codeart umwandeln kannst.