Die Farbpalette
Ein wilder Tanz aus Licht und Schatten
Hinter der magischen Welt von CSS verbirgt sich ein Arsenal an Farben, das selbst die kühnste Alchemistin neidisch machen würde. Mit jedem Klick auf den Farbwähler mischst du wie ein Zauberer, der Tränke braut, und erschaffst Farbmodelle, die deine Webseite in völlig neuem Licht erstrahlen lassen. Jede Farbe trägt ihre eigene kleine Magie in sich und hat die Macht, die Stimmung auf deiner Seite zu verändern – ob düster, heiter oder irgendwo dazwischen.
Mit ein bisschen Geschick kannst du Farben harmonisch kombinieren. Jede Entscheidung, die du triffst, ist wie ein Pinselstrich auf der Leinwand, der nicht nur die Herzen deiner Besucher berührt, sondern auch dafür sorgt, dass sie alles mühelos lesen können. Nichts zieht Besucher so sehr in den Bann wie eine gut platzierte Farbexplosion.
Die Magie der Farbmodelle im CSS
Ein Leitfaden für angehende Künstler
Hexadezimal
Hexadezimal (Hex)
Ein uralter Farbzauber, der in sechs geheimnisvollen Zeichen aus Zahlen und Buchstaben daherkommt. Jede Hex-Farbe beginnt mit einem #, gefolgt von sechs Zeichen, die die Magie von Rot, Grün und Blau einfangen. FF bringt strahlendes Leuchten, während 00 finstere Dunkelheit heraufbeschwört.
.primary {
color: #FF0000;
}Eine rote Textfarbe
Hexadezimal mit Alpha
Eine erweiterte Version des Hex-Zaubers, die Transparenz ins Spiel bringt. Zwei zusätzliche Zeichen am Ende bestimmen den Grad der Durchsichtigkeit, von 00 (komplett unsichtbar) bis FF (voll deckend). Damit kannst du Farben nicht nur hervorzaubern, sondern sie auch sanft verblassen lassen – perfekt für subtile visuelle Tricks.
.primary {
color: #FF573380;
}Ein halbtransparentes Orange
HTML Farbnamen
HTML-Farben
Die gebräuchlichsten Farben, die sich wie von Zauberhand mit einem einzigen Wort steuern lassen. Diese benannten Farben sind ideal für deine ersten magischen Farbversuche. Sie sind leicht zu merken und bieten eine schnelle Möglichkeit, das Erscheinungsbild deiner Webseite zu verändern. Eine vollständige Liste findest du in der W3Schools Zauberschule
.primary {
color: red;
}Eine rote Textfarbe
RGB
RGB (Rot, Grün, Blau)
Ein mächtiger Zauberspruch, der das Licht von Rot, Grün und Blau in präzisen Intensitäten mischt, um eine schier endlose Palette von Farben zu erschaffen. Jede Farbe wird durch eine Zahl von 0 bis 255 dargestellt, die jeweils für Rot, Grün und Blau steht: RRR GGG BBB.
.primary {
color: rgb(255, 87, 51);
}Ein lebhafter Orangeton
RGBA (Rot, Grün, Blau, Alpha)
Der RGBA-Zauber fügt dem RGB-Modell eine vierte Komponente hinzu: den Alpha-Kanal. Dieser kontrolliert die Transparenz deiner Farben und sorgt dafür, dass sie schimmern und durchsichtig werden, wenn du es willst. Der Alpha-Wert liegt zwischen 0 (komplett unsichtbar) und 1 (voll deckend).
.primary {
color: rgba(255, 87, 51, 0.5);
}Ein halbtransparentes Orange
HSL
HSL (Farbton, Sättigung, Helligkeit)
Ein eleganter Farbzauber, der Farben nach ihrem Farbton (Hue), ihrer Sättigung (Saturation) und ihrer Helligkeit (Lightness) formt. Der Farbton bewegt sich auf einem magischen Kreis von 0 bis 360 Grad, während Sättigung und Helligkeit die Farbintensität und das Strahlen in Prozent festlegen.
.primary {
color: hsl(14, 100%,60%);
}Erneut derselbe lebhafte Orangeton
HSLA (Farbton, Sättigung, Helligkeit, Alpha)
Wie bei RGBA ergänzt der HSLA-Zauber das HSL-Modell um den Alpha-Kanal. So verleihst du deinen Farben nicht nur Tiefe, sondern auch eine mystische Transparenz, die sie noch lebendiger erscheinen lässt.
.primary {
color: hsla(14, 100%, 60%,0.5);
}Ein halbtransparentes Orange
In dieser Lektion hast du gelernt…
- Wie du Farben mit Hexadezimalwerten definierst, um präzise Rot-, Grün- und Blauwerte zu steuern.
- Warum RGB und RGBA flexibel sind, um Farben mit individuellen Transparenzstufen zu gestalten.
- Wie du das HSL- und HSLA-Farbmodell nutzt, um Farben anhand von Farbton, Sättigung und Helligkeit zu steuern.
- Wann du benannte HTML-Farben verwenden kannst, um schnell einfache Farben festzulegen.
- Wie Transparenz mit
rgbaundhslafunktioniert, um Farben sanft verblassen zu lassen oder über andere Elemente zu legen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Das Geheimnis der Elixiere
In der Alchemiewerkstatt von Eldria, einer bekannten Meisterin der Farben und Tränke, liegt eine Sammlung von Elixieren, die nur durch die richtigen Farbcodes aktiviert werden können. Verwende dein Wissen über Farbcodes, um die Elixiere zu färben und ihre magischen Eigenschaften freizusetzen.
Deine Aufgabe: Die Anwendung der Farbcodes
- Hexadezimal-Farben:
Setze eine Hexadezimal-Farbe für die .hex-Klasse, z.B. #8e44ad.
Frage: Was passiert, wenn du zusätzlich einen Alpha-Wert verwendest, z.B. #8e44ad80? Wie verändert sich die Transparenz des Elixiers? - HTML-Farbnamen:
Ändere die Hintergrundfarbe des Elixiers .hex auf goldenrod.
Frage: Welche Vorteile haben HTML-Farbnamen im Vergleich zu anderen Formaten, und warum sind sie manchmal weniger flexibel? - RGB und RGBA:
Verwende für die .rgba-Klasse einen RGB-Code (rgb(233, 30, 99)) und teste dann einen RGBA-Wert mit Transparenz (rgba(233, 30, 99, 0.6)).
Frage: Wie beeinflusst der Alpha-Wert die Farbe und warum ist Transparenz oft hilfreich für Designelemente? - HSL und HSLA:
• Weise der .hsl-Klasse eine Farbe im HSL-Format zu (hsl(300, 50%, 50%)).
• Teste anschließend eine transparente Version mit HSLA (hsla(300, 50%, 50%, 0.5)).
Frage: Was sind die Vorteile von HSL im Vergleich zu RGB, und wie helfen Farbton, Sättigung und Helligkeit, Farben besser zu kontrollieren?
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.hex {
background-color: #8e44ad;
background-color: goldenrod;
}
.rgba {
background-color: rgb(233, 30, 99);
}
.hsl {
background-color: hsl(30, 50%, 50%);
}