HTML + CSS: Farben und Hintergründe

Kurz: Mit HSL erzeugst du Farbvarianten leicht: Behalte den Farbton und ändere Sättigung oder Helligkeit.

Teil des Kurses HTML + CSS

Kapitel 15 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Farben angeben

<style>
  .k { padding: 8px; margin: 3px 0; color: white; }
</style>
<div class="k" style="background: crimson">Name: crimson</div>
<div class="k" style="background: #1e90ff">Hex: #1e90ff</div>
<div class="k" style="background: #1e90ff80">Hex mit Transparenz: #1e90ff80</div>
<div class="k" style="background: rgb(34 139 34)">rgb(34 139 34)</div>
<div class="k" style="background: rgb(0 0 0 / 40%)">rgb mit Alpha: 40 %</div>
<div class="k" style="background: hsl(280 60% 45%)">hsl(280 60% 45%)</div>
<div class="k" style="background: oklch(60% 0.2 30)">oklch(60% 0.2 30)</div>

Format	Beispiel	Hinweis
Name	tomato	ca. 140 Namen
Hex	#ff6347, #f64	Rot Grün Blau, hexadezimal; mit Alpha #ff634780
rgb()	rgb(255 99 71)	Rot, Grün, Blau (0 bis 255)
hsl()	hsl(9 100% 64%)	Farbton (0 bis 360°), Sättigung, Helligkeit; leicht zu variieren
oklch()	oklch(70% 0.15 40)	wahrnehmungsgleiche Helligkeit, modern
currentColor		übernimmt die Textfarbe
transparent		durchsichtig

Mit HSL erzeugst du Farbvarianten leicht: Behalte den Farbton und ändere Sättigung oder Helligkeit.

<style>
  .reihe { display: flex; }
  .reihe div { flex: 1; padding: 14px 4px; text-align: center; font: 12px sans-serif; }
</style>
<div class="reihe">
  <div style="background:hsl(220 80% 90%)">90%</div>
  <div style="background:hsl(220 80% 75%)">75%</div>
  <div style="background:hsl(220 80% 60%)">60%</div>
  <div style="background:hsl(220 80% 45%);color:white">45%</div>
  <div style="background:hsl(220 80% 30%);color:white">30%</div>
</div>

Farbe und Hintergrund

Eigenschaft	Wirkung
color	Textfarbe
background-color	Hintergrundfarbe
opacity	Durchsichtigkeit des ganzen Elements (0 bis 1)
accent-color	Farbe von Checkbox, Radio, Slider
caret-color	Farbe des Textcursors

<style>
  :root { accent-color: crimson; }
  .a { background: rgb(0 0 0 / .5); color: white; padding: 8px; }   /* nur Hintergrund durchsichtig */
  .b { background: black; color: white; padding: 8px; opacity: .5; } /* alles durchsichtig */
</style>
<div class="a">rgb mit Alpha: Text bleibt voll sichtbar</div>
<div class="b">opacity: Text wird auch blass</div>
<label><input type="checkbox" checked> mit accent-color</label>

Hintergrundbilder

<style>
  .bild {
    height: 120px;
    background-color: #fde68a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23f59e0b'/%3E%3C/svg%3E");
    background-repeat: repeat;            /* repeat, repeat-x, repeat-y, no-repeat */
    background-position: center;          /* oder 20px 30px, right bottom */
    border: 1px solid #aaa;
  }
</style>
<div class="bild"></div>

Eigenschaft	Wirkung
background-image	Bild oder Verlauf
background-repeat	Wiederholung
background-position	Lage
background-size	cover (füllt, schneidet ab), contain (passt komplett), 50%, 100px auto
background-attachment	scroll, fixed (bleibt beim Scrollen stehen)
background-clip	wohin sich der Hintergrund erstreckt (padding-box, text)

Mehrere Hintergründe werden mit Komma getrennt; das erste liegt oben.

Verläufe (Gradients)

<style>
  div { height: 60px; margin: 6px 0; color: white; font: bold 16px sans-serif; padding: 8px; }
  .lin  { background: linear-gradient(90deg, #6366f1, #ec4899); }
  .diag { background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 60%, #facc15 100%); }
  .rad  { background: radial-gradient(circle at 30% 40%, #fde68a, #f97316 70%); color: #431407; }
  .kon  { background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red); border-radius: 50%; width: 60px; }
  .streifen { background: repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px); }
  .overlay { background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .5)), linear-gradient(90deg, #f43f5e, #3b82f6); }
</style>
<div class="lin">linear-gradient(90deg, ...)</div>
<div class="diag">Diagonal mit Farbstopps</div>
<div class="rad">radial-gradient</div>
<div class="kon"></div>
<div class="streifen">repeating-linear-gradient</div>
<div class="overlay">Zwei Verläufe übereinander</div>

Farbverlauf im Text

<h1 style="font: 900 3rem sans-serif;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;">Verlaufstext</h1>

Kontrast und Farbwahl

• Text und Hintergrund brauchen genug Kontrast (4,5:1; große Schrift 3:1)
• Nutze Farbe nie als einziges Unterscheidungsmerkmal (rot/grün)
• Begrenze deine Palette: eine Hauptfarbe, eine Akzentfarbe, Graustufen
• Lege Farben als Variablen an (siehe Kapitel CSS-Variablen)
• Beachte Hell/Dunkel: @media (prefers-color-scheme: dark)

Merke

• Farben: Name, Hex, rgb(), hsl(), oklch(); Alpha für Transparenz
• opacity macht das ganze Element durchsichtig, rgb(... / 50%) nur die Farbe
• background-size: cover und background-position: center für Bilder
• Verläufe: linear-gradient, radial-gradient, conic-gradient
• Auf Kontrast achten, Farbe nie als einzigen Hinweis nutzen

Übungsaufgabe

Erstelle eine Karte mit Verlaufshintergrund, weißem Text mit gutem Kontrast und einem halbtransparenten dunklen Overlay hinter dem Text.

Quiz zur Selbstkontrolle

Was ist der Unterschied zwischen opacity und rgb(... / 50%)?

• opacity macht das ganze Element durchsichtig, rgb mit Alpha nur die Farbe (richtig)
• Kein Unterschied
• rgb betrifft alle Kinder
• opacity betrifft nur Hintergründe

Was bewirkt background-size: cover?

• Das Bild füllt die Fläche vollständig und wird ggf. abgeschnitten (richtig)
• Das Bild wird gekachelt
• Das Bild wird gestreckt
• Das Bild verschwindet

Welcher Wert gilt als Mindestkontrast für normalen Text?

• 4,5:1 (richtig)
• 2:1
• 1:1
• 7:1 nur

Weiter im Kurs

Zurück: Selektoren

Weiter: Text und Schriften

Alle Kapitel: HTML + CSS im Überblick