HTML: Hintergrundfarbe ändern und Farbwerte verstehen

Q: Wie ändere ich die Hintergrundfarbe in HTML?

Über die CSS-Eigenschaft background-color, zum Beispiel background-color: #f6f5ff;. Für die ganze Seite setzt du sie in der Regel für body, für einen einzelnen Abschnitt in der Regel für dieses Element. Das frühere bgcolor-Attribut am -Tag ist seit HTML5 abgeschafft.

Q: Was ist der Unterschied zwischen color und background-color?

color färbt den Text, background-color färbt die Fläche dahinter. Wer die Schriftfarbe ändern will und background-color nimmt, bekommt einen farbigen Kasten mit unverändertem Text.

Q: Wie mache ich eine Farbe halb durchsichtig?

Mit einem vierten Wert für die Deckkraft, etwa rgb(124 92 255 / 20%), oder indem du an einen Hex-Wert zwei weitere Zeichen anhängst. Das unterscheidet sich von opacity, das das ganze Element samt Text durchsichtig macht.

Q: Wie lege ich einen Farbverlauf als Hintergrund an?

Mit background: linear-gradient(135deg, #7c5cff, #d95fc4);. Ein Farbverlauf ist technisch ein Hintergrundbild und gehört deshalb in background, nicht in background-color — dort erscheint er nicht.

Kurz gesagt: Flächen färbst du in HTML mit der CSS-Eigenschaft background-color, Text mit color. Für die ganze Seite setzt du die Regel für body, für einen einzelnen Abschnitt die Regel für dieses Element. Das alte bgcolor-Attribut am <body>-Tag ist seit HTML5 abgeschafft.

Die eine Zeile

<style>
  body { background-color: #f6f5ff; }
</style>

`color` oder `background-color`?

Das ist die Verwechslung, die am häufigsten passiert:

Eigenschaft	Färbt	Beispiel
`color`	den Text	`color: #1a1a2e;`
`background-color`	die Fläche dahinter	`background-color: #fff;`
`border-color`	den Rahmen	`border-color: #ddd;`

Wer die Schriftfarbe ändern will und background-color nimmt, bekommt einen farbigen Kasten mit unverändertem Text. Alles zur Textfarbe steht auf Schrift, Größe und Farbe ändern.

Nur einen Abschnitt einfärben

Für einen einzelnen Bereich statt der ganzen Seite gibst du dem Element eine Klasse und färbst diese:

<!-- im HTML -->
<section class="preis-block"> … </section>

/* im style-Bereich */
.preis-block {
  background-color: #f6f5ff;
  padding: 32px;
  border-radius: 16px;
}

Warum padding hier dazugehört: Eine Fläche ohne Innenabstand klebt am Text. Farbige Abschnitte ohne padding sind der häufigste Grund, warum eine eingefärbte Sektion „billig" aussieht. 24 bis 40 Pixel Innenabstand machen aus einem farbigen Streifen einen Kasten.

Die vier Arten, eine Farbe zu schreiben

Schreibweise	Beispiel	Gut für
Hex	`#7c5cff`	der Standard — so geben alle Design-Programme Farben aus
RGB	`rgb(124 92 255)`	wenn du mit Deckkraft arbeitest
Farbname	`rebeccapurple`	schnelles Ausprobieren; rund 140 Namen sind festgelegt
HSL	`hsl(252 100% 68%)`	eine Farbe heller oder dunkler machen, ohne sie zu verfälschen

Was ein Hex-Wert bedeutet

#7c5cff sind drei Paare: 7c für Rot, 5c für Grün, ff für Blau. Jedes Paar läuft von 00 bis ff — das sind 0 bis 255.

#000000 ist Schwarz, #ffffff ist Weiß.
Sind alle drei Paare gleich, ist es ein Grauton: #888888.
Die Kurzform #fff verdoppelt jedes Zeichen, ist also #ffffff.

Deshalb funktioniert der Trick mit HSL so gut: Bei hsl(252 100% 68%) änderst du nur den letzten Wert, um dieselbe Farbe heller oder dunkler zu machen. Bei einem Hex-Wert müsstest du alle drei Paare gleichzeitig anpassen und triffst dabei leicht einen anderen Farbton.

Halb durchsichtig

background-color: rgb(124 92 255 / 20%);   /* 20 % deckend */
background-color: #7c5cff33;               /* dasselbe als Hex */

Nicht zu verwechseln mit opacity: Eine durchsichtige Hintergrundfarbe lässt die Fläche durchscheinen, der Text darauf bleibt vollständig deckend. opacity: 0.2 am Element macht alles durchsichtig, den Text eingeschlossen — das ist fast nie gewollt.

Farbverlauf als Hintergrund

background: linear-gradient(135deg, #7c5cff, #d95fc4);

Wichtig: Ein Farbverlauf gehört in background, nicht in background-color. Technisch ist er ein Hintergrundbild, und background-color nimmt nur einzelne Farben an. Das ist der Grund, warum ein Verlauf in background-color schlicht nicht erscheint.

Die Gradzahl ist die Richtung: 0deg läuft von unten nach oben, 90deg von links nach rechts, 135deg diagonal.

Wie finde ich die Farben, die meine Seite schon nutzt?

Das ist die eigentlich wichtige Frage, wenn du an einer fertigen Seite arbeitest. Eine neue Farbe frei zu wählen ist einfach — sie soll aber zum Rest passen.

Bei von KI gebauten Seiten stehen die Farben fast immer gesammelt ganz oben im <style>-Bereich, als CSS-Variablen in einem Block namens :root:

:root {
  --violet: #7c5cff;
  --text:   #1a1a2e;
  --line:   #e6e4f0;
}

Weiter unten werden sie dann überall wiederverwendet:

.btn { background-color: var(--violet); }

Das ist eine gute Nachricht. Änderst du den Wert oben im :root-Block, ändert sich die Farbe an allen Stellen, die var(--violet) nutzen — mit einer einzigen Änderung. Suche also erst nach :root, bevor du im Code einzelne Farbwerte jagst.

Ohne Code: Genau dafür gibt es im Klick-Editor eine Pipette. Du nimmst eine Farbe direkt von deiner Seite auf und setzt sie an der neuen Stelle ein — ohne zu wissen, wie ihr Hex-Wert lautet.

Kontrast: der Fehler, den man am eigenen Bildschirm nicht sieht

Hellgrauer Text auf weißem Grund sieht auf deinem Monitor gut aus und ist auf einem Handy in der Sonne nicht mehr lesbar. Als Richtwert gilt ein Kontrastverhältnis von mindestens 4,5 zu 1 zwischen Text und Hintergrund — das ist der Wert, den die Barrierefreiheits-Richtlinien für normalen Text vorgeben. Für große Schrift ab etwa 24 Pixeln reichen 3 zu 1.

Zwei Fälle, die in der Praxis immer wieder schiefgehen: helle Schrift auf einem Farbverlauf, der an einem Ende zu hell wird — und weiße Schrift auf einem Foto. Beides braucht eine abdunkelnde Fläche dazwischen.

Dasselbe ohne Code: anklicken statt tippen

Wenn du deine Seite mit KI gebaut hast und nicht im Code arbeiten willst: PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten. Du ziehst deine HTML-Datei ins Tool und arbeitest auf der fertigen Seite.

Im Code

:root-Block finden, richtige Variable finden, Hex-Wert bestimmen, ersetzen, prüfen, ob eine andere Regel die Farbe weiter unten überschreibt, Kontrast prüfen.

Per Klick

Abschnitt anklicken, Farbe wählen — oder mit der Pipette eine Farbe aufnehmen, die auf deiner Seite schon vorkommt, damit die neue dazu passt. Du siehst das Ergebnis sofort auf der echten Seite.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Wie ändere ich die Hintergrundfarbe in HTML?

Über die CSS-Eigenschaft background-color, zum Beispiel background-color: #f6f5ff;. Für die ganze Seite setzt du sie in der Regel für body, für einen einzelnen Abschnitt in der Regel für dieses Element. Das frühere bgcolor-Attribut am <body>-Tag ist seit HTML5 abgeschafft.

Was ist der Unterschied zwischen color und background-color?

color färbt den Text, background-color färbt die Fläche dahinter. Wer die Schriftfarbe ändern will und background-color nimmt, bekommt einen farbigen Kasten mit unverändertem Text.

Was bedeutet ein Hex-Farbwert wie #7c5cff?

Die sechs Zeichen nach der Raute sind drei Paare: Rot, Grün, Blau. Jedes Paar reicht von 00 bis ff, also 0 bis 255. #000000 ist Schwarz, #ffffff ist Weiß. Eine dreistellige Kurzform wie #fff bedeutet, dass jedes Zeichen verdoppelt wird.

Wie mache ich eine Farbe halb durchsichtig?

Mit einem vierten Wert für die Deckkraft, etwa rgb(124 92 255 / 20%), oder indem du an einen Hex-Wert zwei weitere Zeichen anhängst. Das unterscheidet sich von opacity, das das ganze Element samt Text durchsichtig macht.

Wie finde ich heraus, welche Farbe auf meiner Seite schon verwendet wird?

Bei KI-gebauten Seiten stehen die Farben oft als CSS-Variablen ganz oben in einem :root-Block und werden von dort überall wiederverwendet — dort ändern wirkt an allen Stellen gleichzeitig. Ohne Code nimmt eine Pipette im Klick-Editor die Farbe direkt von der Seite auf.

Wie lege ich einen Farbverlauf als Hintergrund an?

Mit background: linear-gradient(135deg, #7c5cff, #d95fc4);. Ein Farbverlauf ist technisch ein Hintergrundbild und gehört deshalb in background, nicht in background-color — dort erscheint er nicht.

Jetzt starten

Erst ausprobieren? Öffne die Demo — der echte Editor, ohne Konto.

Zuletzt aktualisiert: 11. September 2026

← Zurück zur Startseite und PageFix ansehen