In CSS gibt es zwei Varianten für Farbangaben:
Über den englischen Farbnamen (black, red, blue, green, ..) kann eine der insgesamt 140 in CSS vordefinierten Farben ausgewählt werden. Eine Übersicht aller mit Namen gekennzeichneten Farben ist z.B. hier zu finden: Farbcodes.
Ein RGB-Farbraum ist ein additiver Farbraum, der Farbwahrnehmungen durch das Mischen der drei Grundfarben Rot, Grün und Blau nachbildet. Bei der additiven Farbmischung ändert das Hinzufügen eines jeweils anderen Farbreizes den vom Auge empfundenen Farbeindruck. Werden alle drei Grundfarben in ihrer maximalen Intensität gemischt, ergibt sich die Farbe Weiß.
In Rechnersystemen wird dieser Farbreiz mit einem RGB-Code nachgebildet. Dafür wird für einen Farbton ein Zahlentripel definiert, das die Menge an rotem, grünem und blauem Licht beschreibt: Farbe = (R, G, B). Für die Wertebereiche der Farbreize (R, G, B) werden ganze Zahlen zwischen 0 (kein Anteil der jeweiligen Farbe) und 255 (maximaler Anteil der Farbe) benutzt.
Somit kann bei einer konkreten Farbe jede der Grundfarben einen von insgesamt 256 Werten haben. Dadurch ergeben sich 256 * 256 * 256 = 16'777'216 mögliche Kombinationen und somit genauso viele Farben, die im RGB-Raum dargestellt werden können.
Für den RGB-Raum können in CSS unterschiedliche Schreibweisen benutzt werden:
rgb(160, 180, 255),rgb(63%, 71%, 100%), wobei
0% der Zahl 0 und 100% der Zahl 255 entsprechen.Hexadezimalwert: #A0B4FF. Das #-Zeichen
leitet
eine hexadezimale Zahl ein. Die Zahl ist immer sechsstellig, wobei
die
ersten zwei Ziffern der Farbe Rot, die nächsten zwei die Farbe Grün
und
die letzten zwei die Farbe Blau beschreiben. Auch damit können für
jede
Farbe 256 Zahlen definiert werden: 00 (hexadezimal) entspricht der
Zahl
0 im Dezimalsystem, FF entspricht der dezimalen Zahl 255.
Dabei kann der Sonderfall, in dem
alle drei Farben durch jeweils zwei gleiche
Hexadezimalwerte dargestellt werden, noch mal gekürzt werden:
#993366 kann mit #936 abgekürzt werden.
Da die hexadezimale Darstellung die kürzeste Form ist, sollte diese standardmäßig in CSS benutzt werden, um unnötige Ladezeiten zu vermeiden.
Zusätzlich können in CSS Farben mit Transparenz definiert werden:
Dafür wird der so
genannte RGBa-Code benutzt, wobei a für alpha, den
Transparenzkanal steht.
Eine
Farbe ist komplett transparent, wenn ihr Wert für den Alpha-Kanal
bei 1 bzw. 100%
liegt.
Die Farbe hat ihre vollständige Deckkraft, wenn ihr Wert für den
Alpha-Kanal bei 0
bzw.
0% liegt. Beispiele:
rgba(160, 180, 255, 0.5) oder
rgba(160, 180, 255, 50%).
Für die Farbauswahl im Alltag stehen vielfältige Tools zur Verfügung, z.B. der Color-Picker: Color-Picker.
In CSS werden Farbwerte hauptsächlich für die Schriftfarbe und für die Hintegrundfarbe von Boxen benutzt:
color
definiert, z.B.
p {color: rgb(160, 180, 255);}
oder mit Transparenz: p {color: rgba(160, 180, 255, 30%);}
.
background-color
definiert, z.B.
p {background-color: rgb(160, 180, 255);}
oder mit Transparenz: p {background-color: rgba(160, 180, 255, 30%);}
.
Zudem kann für die Schrift- und die Hintergrundfarbe auch ihre
Deckkraft mit der
Eigenschaft opacity angegeben werden. Im Gegensatz
zu den
Farbangaben mit dem Alphakanal bezieht sich die Deckkraft auf
die gesamte Box,
d.h., hat die Eigenschaft opacity einen Wert,
der kleiner als 1
bzw. 100% ist,
werden alle Inhalte der Box transparent dargestellt.
See the Pen CSS – Farben by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.