EMZETT.Farben angeben
Ergebnis
| 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.
Ergebnis
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 |
Ergebnis
Hintergrundbilder
Ergebnis
| 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)
Ergebnis
Farbverlauf im Text
Ergebnis
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 opacitymacht das ganze Element durchsichtig,rgb(... / 50%)nur die Farbebackground-size: coverundbackground-position: centerfür Bilder- Verläufe:
linear-gradient,radial-gradient,conic-gradient - Auf Kontrast achten, Farbe nie als einzigen Hinweis nutzen
Aufgabe
Erstelle eine Karte mit Verlaufshintergrund, weißem Text mit gutem Kontrast und einem halbtransparenten dunklen Overlay hinter dem Text.