Farbangaben in CSS – Farben definieren

In CSS gibt es diverse Möglichkeiten Farbwerte für Rahmen, die Schriftfarbe oder Hintergründe zu definieren. Diese stellen wir hier schrittweise vor:

RGB in Hexadezimalzahlen

In CSS 1 und 2 gibt es identische Möglichkeiten, bestimmten Eigenschaften Farbwerte zuzuweisen. Als häufigste Form findet man Farben als Hexadezimalwert deklariert. Um diese Notation zu verstehen, braucht es zunächst eine kurze Einführung in das Hexadezimalsystem:

Das hexadezimale Zahlensystem kennt 16 Zahlen je Stelle. Die ersten 10 sind unsere ganz normalen Zahlen aus dem Zehnersystem und danach geht es mit Buchstaben weiter. Diese reichen von 0 bis F also 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E und F. Damit hat man pro Ziffer 16-Möglichkeiten. Kombiniert man zwei dieser Hexidezimalen-Zahlen zu einem Paar, kann man 16², also 256 Werte kodieren.

Hexadezimale CSS-Farben beginnen mit #. Die sechsstellige Form enthält je zwei Zeichen für Rot, Grün und Blau. Daneben sind drei-, vier- und achtstellige Formen möglich; vier und acht Stellen enthalten zusätzlich einen Alpha-Wert.

Wie der Name schon sagt, ist das hexadezimale System ein Zahlensystem, welches auf der 16 basiert. Zur Darstellung werden die arabischen Zahlen 0-9 und die lateinischen Buchstaben A-F benutzt. Die Zahlen haben ihre klassischen Werte, A-F ergänzen diese nach oben. So hat das A den Wert von 10 und das F den von 15, sie Zahlen dazwischen entsprechend. Es stehen also pro Zeichen 16 Werte (inklusive der 0) zur Verfügung. Es sind für jeden einzelnen Farbwert 2 Stellen vorhanden, der Sechzehnerübergang gestaltet sich wie beim normalen Dezimalsystem: Ist an einer Stelle das Maximum (hier F) erreicht, wird die Stelle vor der betrachteten um 1 erhöht. Wird zu 0F eins hinzugezählt, ergibt sich folglich der Wert 10, im hexadezimalen System 16. Das Maximum ist mit FF (also 255) erreicht, mit der 00 ergeben sich also 256 Werte pro Farbe, was insgesamt 2563 Farben ermöglicht.

#000000 bezeichnet Schwarz, #FFFFFF Weiß. Jeder Kanal steuert seinen eigenen Farbanteil. Die wahrgenommene Helligkeit lässt sich nicht einfach aus der Größe des gesamten Hexadezimalwerts ablesen.

Kurzschreibweise

In CSS gibt es eine Möglichkeit die Schreibweise von hexadezimalen Werten zu verkürzen, was jedoch nicht für alle Werte möglich ist! Besteht ein Wert aus drei gleichen Zahlenpaaren, beispielsweise #CCBB00, so kann er zusammengefasst werden, in dem die Zahlen nur einfach notiert werden. In diesem Beispiel wäre dies #CB0.

Anwendungsbeispiel

a {
  color: #FFFFFF;
  background: #000;
}

Definition über rgb()

Wem diese hexadezimalen Werte zu kryptisch erscheinen, kann einen Umweg über die Funktion rgb() gehen. Bei dieser können die dezimalen Werte von 0 bis 255, durch ein Komma getrennt, angegeben werden. Die Reihenfolge ist identisch mit der der hexadezimalen Notierung und auch hier gilt: Je größer der Wert, desto heller die Farbe, 255 ist also das Maximum. Alternativ sind auch prozentuale Angaben möglich, was jedoch sehr ungebräuchlich ist.

a {
  color: rgb(100%, 100%, 100%);
  background: rgb(0, 0, 0);
}

Die Wahl zwischen Hex- und rgb()-Notation ist vor allem eine Frage der Lesbarkeit und des Arbeitsablaufs; rgb() ist kein grundsätzlich problematischer Speicherverbrauch.

Definition über Farbschlüsselwörter

Neben der Angabe von Farbwerten, gibt es noch eine Palette vordefinierter Farben.

Grundfarben (CSS 1 + 2)

Color name	Hex rgb	Decimal
black	#000000	0,0,0
silver	#C0C0C0	192,192,192
gray	#808080	128,128,128
white	#FFFFFF	255,255,255
maroon	#800000	128,0,0
red	#FF0000	255,0,0
purple	#800080	128,0,128
fuchsia	#FF00FF	255,0,255
green	#008000	0,128,0
lime	#00FF00	0,255,0
olive	#808000	128,128,0
yellow	#FFFF00	255,255,0
navy	#000080	0,0,128
blue	#0000FF	0,0,255
teal	#008080	0,128,128
aqua	#00FFFF	0,255,255

Als Anwendungsbeispiel:

a {
  color: white;
  background: black;
}

Farbschlüsselwörter ab CSS 3

Die folgende Tabelle zeigt die klassischen benannten CSS-Farben. Sie ist ein praktisches Nachschlagewerk, keine vollständige Übersicht aller heutigen CSS-Farbsysteme.

Color name	Hex rgb	Decimal
aliceblue	#f0f8ff	240,248,255
antiquewhite	#faebd7	250,235,215
aqua	#00ffff	0,255,255
aquamarine	#7fffd4	127,255,212
azure	#f0ffff	240,255,255
beige	#f5f5dc	245,245,220
bisque	#ffe4c4	255,228,196
black	#000000	0,0,0
blanchedalmond	#ffebcd	255,235,205
blue	#0000ff	0,0,255
blueviolet	#8a2be2	138,43,226
brown	#a52a2a	165,42,42
burlywood	#deb887	222,184,135
cadetblue	#5f9ea0	95,158,160
chartreuse	#7fff00	127,255,0
chocolate	#d2691e	210,105,30
coral	#ff7f50	255,127,80
cornflowerblue	#6495ed	100,149,237
cornsilk	#fff8dc	255,248,220
crimson	#dc143c	220,20,60
cyan	#00ffff	0,255,255
darkblue	#00008b	0,0,139
darkcyan	#008b8b	0,139,139
darkgoldenrod	#b8860b	184,134,11
darkgray	#a9a9a9	169,169,169
darkgreen	#006400	0,100,0
darkgrey	#a9a9a9	169,169,169
darkkhaki	#bdb76b	189,183,107
darkmagenta	#8b008b	139,0,139
darkolivegreen	#556b2f	85,107,47
darkorange	#ff8c00	255,140,0
darkorchid	#9932cc	153,50,204
darkred	#8b0000	139,0,0
darksalmon	#e9967a	233,150,122
darkseagreen	#8fbc8f	143,188,143
darkslateblue	#483d8b	72,61,139
darkslategray	#2f4f4f	47,79,79
darkslategrey	#2f4f4f	47,79,79
darkturquoise	#00ced1	0,206,209
darkviolet	#9400d3	148,0,211
deeppink	#ff1493	255,20,147
deepskyblue	#00bfff	0,191,255
dimgray	#696969	105,105,105
dimgrey	#696969	105,105,105
dodgerblue	#1e90ff	30,144,255
firebrick	#b22222	178,34,34
floralwhite	#fffaf0	255,250,240
forestgreen	#228b22	34,139,34
fuchsia	#ff00ff	255,0,255
gainsboro	#dcdcdc	220,220,220
ghostwhite	#f8f8ff	248,248,255
gold	#ffd700	255,215,0
goldenrod	#daa520	218,165,32
gray	#808080	128,128,128
green	#008000	0,128,0
greenyellow	#adff2f	173,255,47
grey	#808080	128,128,128
honeydew	#f0fff0	240,255,240
hotpink	#ff69b4	255,105,180
indianred	#cd5c5c	205,92,92
indigo	#4b0082	75,0,130
ivory	#fffff0	255,255,240
khaki	#f0e68c	240,230,140
lavender	#e6e6fa	230,230,250
lavenderblush	#fff0f5	255,240,245
lawngreen	#7cfc00	124,252,0
lemonchiffon	#fffacd	255,250,205
lightblue	#add8e6	173,216,230
lightcoral	#f08080	240,128,128
lightcyan	#e0ffff	224,255,255
lightgoldenrodyellow	#fafad2	250,250,210
lightgray	#d3d3d3	211,211,211
lightgreen	#90ee90	144,238,144
lightgrey	#d3d3d3	211,211,211
lightpink	#ffb6c1	255,182,193
lightsalmon	#ffa07a	255,160,122
lightseagreen	#20b2aa	32,178,170
lightskyblue	#87cefa	135,206,250
lightslategray	#778899	119,136,153
lightslategrey	#778899	119,136,153
lightsteelblue	#b0c4de	176,196,222
lightyellow	#ffffe0	255,255,224
lime	#00ff00	0,255,0
limegreen	#32cd32	50,205,50
linen	#faf0e6	250,240,230
magenta	#ff00ff	255,0,255
maroon	#800000	128,0,0
mediumaquamarine	#66cdaa	102,205,170
mediumblue	#0000cd	0,0,205
mediumorchid	#ba55d3	186,85,211
mediumpurple	#9370db	147,112,219
mediumseagreen	#3cb371	60,179,113
mediumslateblue	#7b68ee	123,104,238
mediumspringgreen	#00fa9a	0,250,154
mediumturquoise	#48d1cc	72,209,204
mediumvioletred	#c71585	199,21,133
midnightblue	#191970	25,25,112
mintcream	#f5fffa	245,255,250
mistyrose	#ffe4e1	255,228,225
moccasin	#ffe4b5	255,228,181
navajowhite	#ffdead	255,222,173
navy	#000080	0,0,128
oldlace	#fdf5e6	253,245,230
olive	#808000	128,128,0
olivedrab	#6b8e23	107,142,35
orange	#ffa500	255,165,0
orangered	#ff4500	255,69,0
orchid	#da70d6	218,112,214
palegoldenrod	#eee8aa	238,232,170
palegreen	#98fb98	152,251,152
paleturquoise	#afeeee	175,238,238
palevioletred	#db7093	219,112,147
papayawhip	#ffefd5	255,239,213
peachpuff	#ffdab9	255,218,185
peru	#cd853f	205,133,63
pink	#ffc0cb	255,192,203
plum	#dda0dd	221,160,221
powderblue	#b0e0e6	176,224,230
purple	#800080	128,0,128
red	#ff0000	255,0,0
rosybrown	#bc8f8f	188,143,143
royalblue	#4169e1	65,105,225
saddlebrown	#8b4513	139,69,19
salmon	#fa8072	250,128,114
sandybrown	#f4a460	244,164,96
seagreen	#2e8b57	46,139,87
seashell	#fff5ee	255,245,238
sienna	#a0522d	160,82,45
silver	#c0c0c0	192,192,192
skyblue	#87ceeb	135,206,235
slateblue	#6a5acd	106,90,205
slategray	#708090	112,128,144
slategrey	#708090	112,128,144
snow	#fffafa	255,250,250
springgreen	#00ff7f	0,255,127
steelblue	#4682b4	70,130,180
tan	#d2b48c	210,180,140
teal	#008080	0,128,128
thistle	#d8bfd8	216,191,216
tomato	#ff6347	255,99,71
turquoise	#40e0d0	64,224,208
violet	#ee82ee	238,130,238
wheat	#f5deb3	245,222,179
white	#ffffff	255,255,255
whitesmoke	#f5f5f5	245,245,245
yellow	#ffff00	255,255,0
yellowgreen	#9acd32	154,205,50

Farben mit Alphakanal ab CSS 3

Ein Alpha-Wert beschreibt die Transparenz einer Farbe. Das unterscheidet sich von opacity: opacity wirkt auf das gesamte Element einschließlich seiner Inhalte. Die folgenden Beispiele zeigen Farbwerte mit Alpha.

a {
  background: rgba(255, 0, 0, 0.5);
  color:#33006655;
}

Des weiteren kommt in CSS 3 ein Format zur Verarbeitung von Daten im HSL-Format. Dies stellt eine Alternative zum RGB-System da und kann ebenfalls mit einem Parameter für den Alpha-Wert genutzt werden:

a {
  background: hsla(0, 100%, 100%, 0.5);
}