Farbe

CSS unterstütz eine Vielzahl von Farben. Dazu gehören benannte Farben wie Blau (blue), Schwarz (black) und Limettengrün (limegreen) sowie Farben, die durch einen numerischen Wert beschrieben werden. Durch die Verwendung eines numerischen Systems können wir das gesamte Spektrum der von Browsern unterstützen Farben nutzen. In dieser Lektion werden wir alle Farboptionen erkunden, die CSS bietet.

Farben in CSS können auf drei verschiedene Arten beschrieben werden:

• Benannte Farben - Englische Wörter, die Farben beschreiben, auch Schlüsselwortfarben genannt

• RGB - Numerische Werte, die eine Mischung aus Rot, Grün und Blau beschreiben

• HSL - Numerische Werte, die eine Mischung aus Farbton, Sättigung und Helligkeit beschreiben

Wir werden die Vorteile jedes einzelnen davon im Detail kennenlernen und erforschen. Wenn wir nur benannte Farben verwenden, haben wir möglicherweise das Gefühl, beschriftete Buntstifte aus einer Schachtel zu nehmen. Am Ende dieser Lektion werden wir uns wie ein Maler fühlen, der Farben auf einer Palette mischt.

Im obigen Beispiel wird der Text der Überschrift in Rot und der Hintergrund der Überschrift in Blau angezeigt.

Im obigen Beispiel stellen wir möglicherweise fest, dass die Werte sowohl Buchstaben als auch Zahlen enthalten. Dies liegt daran, dass das hexadezimale Zahlensystem 16 Ziffern (0-15) anstelle von 10 (0-9) wie im Standard-Dezimalsystem hat. Um 10-15 darzustellen, verwenden wir A-F.

Hier ist eine Liste vieler verschiedener Farben und ihrer Hex-Werte.

Beachten wir, dass Schwarz, Weiß und Aquamarin sowohl mit drei als auch mit sechs Zeichen dargestellt werden können. Dies kann mit Hex-Farben erfolgen, deren Zahlenpaare die gleichen Zeichen sind. Im obigen Beispiel kann Aqua als #0FF dargestellt werden, da beide ersten beiden Zeichen 0 sind und das zweite und dritte Zeichenpaar beide F's sind. Beachten wir auch, dass alle drei hexadezimalen Zeichenfarben mit sechs Zeichen dargestellt werden können (durch zweimaliges Wiederholen jedes Zeichens), umgekehrt gilt dies jedoch nicht.

Wir könne Hex-Farben genauso einschließen wie benannte Farben (background-color: #9932cc;)  und die Buchstaben können Groß- oder Kleinbuchstaben sein.

Jeder der drei Werte stellt eine Farbkomponente dar und jeder kann einen dezimalen Zahlenwert von 0 bis 255 haben. Die erste Zahl stellt den Rotanteil dar, die zweite ist grün und die dritte Blau. Diese Farben sind genau die gleichen wie Hex, jedoch mit einer anderen Syntax und einem anderen Zahlensystem.

Im Allgemeinen sind Hex- und RGB- Farbdarstellungen gleichwertig. Wofür wir uns entscheiden, ist eine Farbe des persönlichen Geschmacks. Dennoch ist es gut, eines auszuwählen und im gesamten CSS konsistent zu sein, da es einfacher ist, Hexadezimalwerte mit Hexadezimalwerten und RGB mit RGB zu vergleichen.

Das Hexadezimal- und RGB-Farbsystem kann viel mehr Farben darstellen als der kleine Satz CSS-benannter Farben.

Mit diesem neuen Farbsatz können wir den Stil unserer Webseite verfeinern.

Sowohl in Hex als auch in RGB haben wir drei Werte, einen für jede Farbe. Jeder kann einer von 256 Werten sein. Konkret: 256 * 256 * 256 = 16.777.216. Das ist die Menge an Farben, die wir jetzt darstellen können. Vergleichen wir das mit den runt 140 benannten CSS-Farben!

Denken wir daran, dass wir mit benannten Farben begonnen, sie in Hex konvertiert haben und dann einige der Hex-Farben in RGB konvertiert haben. Sofern wir keinen Fehler gemacht haben, sollten alle Farben optisch immer noch gleich sein. Nutzen wir unsere erweiterte Palette, um eine raffiniertere Farbauswahl zu treffen.

Farbton ist die erste Zahl. Es bezieht sich auf einen Winkel auf einem Farbkreis. Rot hat 0 Grad, Grün hat 120 Grad, Blau hat 240 Grad und dann zurück zu Rot bei 360. 

Sättigung bezieht sich auf die Intensität oder Reinheit der Farbe. Die Sättigung steigt in Richtung 100%, je kräftiger die Farbe wird. Die Sättigung nimmt in Richtung 0% ab, je grauer die Farbe wird.

Helligkeit bezieht sich darauf, wie hell oder dunkel die Farbe ist. Die Hälfte oder 50% entspricht der normalen Helligkeit. Stellen wir uns einen Schiebedimmer an einem Lichtschalter vor, der auf halbem Weg startet. Wenn wir den Dimmer auf 100% schieben, wird die Farbe heller, näher an Weiß. Wenn wir den Dimmer nach unten in Richtung 0% schieben, wird die Farbe dunkler, näher an Schwarz.

HSL eignet sich zum Anpassen von Farben. Bei RGB kann eine etwas dunklere Farbe Auswirkungen auf alle drei Farbkomponenten haben. In HSL ist das so einfach wie das Ändern des Helligkeitswerts. HSL ist auch nützlich, um eine Reihe von Farben zu erstellen, die gut zusammenpassen, indem verschiedene Farben ausgewählt werden, die die gleiche Helligkeit und Sättigung, aber unterschiedliche Farbtöne haben.

Wir haben unsere ausführliche Tour durch die Farben in CSS abgeschlossen!

Sehen wir uns die wichtigsten Informationen an, die wir gelernt haben.

Es gibt vier Möglichkeiten, Farben in CSS darzustellen:

• Benannte Farben - es gibt mehr als 140 benannte Farben, die wir hier in der MDN-Dokumentation einsehen können.

• Hexadezimale Farben oder Hex Farben

  • Hexadezimal ist ein Zahlensystem mit sechzehn Ziffern, 0 bis 9, gefolgt von "A" bis "F".

  • Hexadezimalwerte beginnen immer mit # und geben Werte für Rot, Blau und Grün mit hexadezimalen Zahlen wie #23F41A an.

  • Sechsstellige Hexadezimalwerte mit doppelten Werten für jeden RGB-Wert können auf drei Ziffern verkürzt werden.

• RGB

  • RGB-Farben verwenden die rgb()-Syntax mit einem Wert für Rot, einem Wert für Blau und einem Wert für Grün.

  • RGB-Werte reichen von 0 bis 255 und sehen folgendermaßen aus: rgb(7, 210, 50).

• HSL

  • HSL steht für Farbton (die Farbe selbst), Sättigung (die Intensität der Farbe) und die Helligkeit (wie hell oder dunkel eine Farbe ist).

  • Der Farbton reicht von 0 bis 360 und Sättigung und Helligkeit werden beide als Prozentsätze wie folgt dargestellt: hsl (200, 20%, 50%).

• Wir können Farben in RGB und HSL Deckkraft verleihen, indem wir einen vierten Wert, a, hinzufügen, der als Prozentsatz dargestellt wird.

Tolle Arbeit! Ab nun können wir unseren Projekten ein wenig Farbe verleihen!