Farben
Farben transportieren Stimmung und Hierarchie. CSS bietet mehrere Schreibweisen und mächtige Verläufe.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Text- und Hintergrundfarbe
color legt die Textfarbe fest.
background beziehungsweise background-color füllen die Flaeche eines Elements.
.hinweis {
color: #0f766e;
background-color: #f0fdfa;
}Farbschreibweisen
Hex (#ff6600), rgb(255, 102, 0) und hsl(24, 100%, 50%) beschreiben dieselbe Farbe unterschiedlich.
HSL ist praktisch zum Ableiten von Varianten: gleicher Farbton, andere Helligkeit.
Mit rgba() oder hsla() kommt ein Alpha-Kanal für Transparenz dazu.
Verläufe
linear-gradient() erzeugt Farbverläufe entlang einer Richtung.
radial-gradient() laeuft kreisförmig von einem Zentrum nach aussen.
.hero {
background: linear-gradient(135deg, #0f766e, #0ea5e9);
}Vertiefung
Farbe braucht Kontrast
Farbe ist nicht nur Geschmack: Text und Hintergrund brauchen genug Kontrast. Für normalen Text gelten mindestens 4.5:1, für große Schrift 3:1.
HSL macht Varianten planbar: gleicher Farbton, andere Helligkeit. Alpha-Werte erzeugen Transparenz, sollten aber nicht die einzige Unterscheidung sein — Farbe allein ist keine Barrierefreiheit.
.notice {
color: #134e4a;
background: #ccfbf1;
border-left: 4px solid #0f766e;
}
.button:hover {
background: hsl(175 70% 30%);
}Merksatz: Kontrast vor Stimmung. Informationen nie nur über Farbe transportieren.
Übungsaufgabe
Farbpalette mit Zuständen
Definiere eine kleine Palette für eine Hinweisbox: Text, Hintergrund, Rahmen und einen Hover-Zustand. Prüfe den Kontrast und ergänze einen Fokus-Ring.
Das soll dein Programm können
- HEX oder HSL für die Grundfarben
- Hintergrund und Text mit klarem Kontrast
- Hover-Zustand für einen Button
- Fokus-Ring mit :focus-visible
- Ein zusätzliches Icon oder Muster, nicht nur Farbe
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Ein dunkles Petrol auf sehr hellem Mint hat guten Kontrast. Der Fokus-Ring sollte sich deutlich vom Hintergrund abheben.
Lösung anzeigen
.notice {
color: #134e4a;
background: #ccfbf1;
border-left: 4px solid #0f766e;
padding: 1rem;
}
.notice::before {
content: "i";
font-weight: 700;
margin-right: 0.5rem;
}
.notice__button {
background: #0f766e;
color: #ffffff;
}
.notice__button:hover {
background: hsl(175 70% 30%);
}
.notice__button:focus-visible {
outline: 3px solid #134e4a;
outline-offset: 3px;
}Warum funktioniert das?
Die dunkle Textfarbe auf hellem Mint liefert Kontrast. Das Icon stellt sicher, dass die Bedeutung nicht allein an der Farbe hängt.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.