Zum Inhalt springen

Farbangaben in CSS – Farben definieren

3d86b8acf45e472a9fa1e5547f48a58d 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:

Inhaltsverzeichnis

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.

Hexadezimalwerte in CSS beginnen immer mit einer Raute #. Darauf folgen 3 Paare, bestehend aus je 2 hexadezimalen Zeichen. In der RGB-Notation von CSS stehen 3 dieser Pärchen für die Farbwerte in der Reihenfolge Rot-Grün-Blau, das erste also für den Rotanteil, das mittlere für den Grünanteil das letzte für den Blauanteil.

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.

Bei der Farbangabe als hexadezimaler Wert gilt: Je größer der Wert, desto heller wird die Farbe. Schwarz hat somit den Wert #000000, weiß #FFFFFF.

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);
}

Diese Methode ist jedoch nicht sehr weit verbreitet, da sie an sich nur unnötigen Speicher belegt.

Definition über Farbschlüsselwörter

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

Grundfarben (CSS 1 + 2)

NamedNumericColor nameHex rgbDecimal
  black#0000000,0,0
  silver#C0C0C0192,192,192
  gray#808080128,128,128
  white#FFFFFF255,255,255
  maroon#800000128,0,0
  red#FF0000255,0,0
  purple#800080128,0,128
  fuchsia#FF00FF255,0,255
  green#0080000,128,0
  lime#00FF000,255,0
  olive#808000128,128,0
  yellow#FFFF00255,255,0
  navy#0000800,0,128
  blue#0000FF0,0,255
  teal#0080800,128,128
  aqua#00FFFF0,255,255

Als Anwendungsbeispiel:

a {
  color: white;
  background: black;
}

Farbschlüsselwörter ab CSS 3

In CSS 3 wird die Palette der vordefinierten Farben auf 140 erweitert. Diese können wie die alten Farbnamen verwendet werden. Alle modernen Browser unterstützen mittlerweile die folgenden Farbnamen:

NamedNumericColor nameHex rgbDecimal
  aliceblue#f0f8ff240,248,255
  antiquewhite#faebd7250,235,215
  aqua#00ffff0,255,255
  aquamarine#7fffd4127,255,212
  azure#f0ffff240,255,255
  beige#f5f5dc245,245,220
  bisque#ffe4c4255,228,196
  black#0000000,0,0
  blanchedalmond#ffebcd255,235,205
  blue#0000ff0,0,255
  blueviolet#8a2be2138,43,226
  brown#a52a2a165,42,42
  burlywood#deb887222,184,135
  cadetblue#5f9ea095,158,160
  chartreuse#7fff00127,255,0
  chocolate#d2691e210,105,30
  coral#ff7f50255,127,80
  cornflowerblue#6495ed100,149,237
  cornsilk#fff8dc255,248,220
  crimson#dc143c220,20,60
  cyan#00ffff0,255,255
  darkblue#00008b0,0,139
  darkcyan#008b8b0,139,139
  darkgoldenrod#b8860b184,134,11
  darkgray#a9a9a9169,169,169
  darkgreen#0064000,100,0
  darkgrey#a9a9a9169,169,169
  darkkhaki#bdb76b189,183,107
  darkmagenta#8b008b139,0,139
  darkolivegreen#556b2f85,107,47
  darkorange#ff8c00255,140,0
  darkorchid#9932cc153,50,204
  darkred#8b0000139,0,0
  darksalmon#e9967a233,150,122
  darkseagreen#8fbc8f143,188,143
  darkslateblue#483d8b72,61,139
  darkslategray#2f4f4f47,79,79
  darkslategrey#2f4f4f47,79,79
  darkturquoise#00ced10,206,209
  darkviolet#9400d3148,0,211
  deeppink#ff1493255,20,147
  deepskyblue#00bfff0,191,255
  dimgray#696969105,105,105
  dimgrey#696969105,105,105
  dodgerblue#1e90ff30,144,255
  firebrick#b22222178,34,34
  floralwhite#fffaf0255,250,240
  forestgreen#228b2234,139,34
  fuchsia#ff00ff255,0,255
  gainsboro#dcdcdc220,220,220
  ghostwhite#f8f8ff248,248,255
  gold#ffd700255,215,0
  goldenrod#daa520218,165,32
  gray#808080128,128,128
  green#0080000,128,0
  greenyellow#adff2f173,255,47
  grey#808080128,128,128
  honeydew#f0fff0240,255,240
  hotpink#ff69b4255,105,180
  indianred#cd5c5c205,92,92
  indigo#4b008275,0,130
  ivory#fffff0255,255,240
  khaki#f0e68c240,230,140
  lavender#e6e6fa230,230,250
  lavenderblush#fff0f5255,240,245
  lawngreen#7cfc00124,252,0
  lemonchiffon#fffacd255,250,205
  lightblue#add8e6173,216,230
  lightcoral#f08080240,128,128
  lightcyan#e0ffff224,255,255
  lightgoldenrodyellow#fafad2250,250,210
  lightgray#d3d3d3211,211,211
  lightgreen#90ee90144,238,144
  lightgrey#d3d3d3211,211,211
  lightpink#ffb6c1255,182,193
  lightsalmon#ffa07a255,160,122
  lightseagreen#20b2aa32,178,170
  lightskyblue#87cefa135,206,250
  lightslategray#778899119,136,153
  lightslategrey#778899119,136,153
  lightsteelblue#b0c4de176,196,222
  lightyellow#ffffe0255,255,224
  lime#00ff000,255,0
  limegreen#32cd3250,205,50
  linen#faf0e6250,240,230
  magenta#ff00ff255,0,255
  maroon#800000128,0,0
  mediumaquamarine#66cdaa102,205,170
  mediumblue#0000cd0,0,205
  mediumorchid#ba55d3186,85,211
  mediumpurple#9370db147,112,219
  mediumseagreen#3cb37160,179,113
  mediumslateblue#7b68ee123,104,238
  mediumspringgreen#00fa9a0,250,154
  mediumturquoise#48d1cc72,209,204
  mediumvioletred#c71585199,21,133
  midnightblue#19197025,25,112
  mintcream#f5fffa245,255,250
  mistyrose#ffe4e1255,228,225
  moccasin#ffe4b5255,228,181
  navajowhite#ffdead255,222,173
  navy#0000800,0,128
  oldlace#fdf5e6253,245,230
  olive#808000128,128,0
  olivedrab#6b8e23107,142,35
  orange#ffa500255,165,0
  orangered#ff4500255,69,0
  orchid#da70d6218,112,214
  palegoldenrod#eee8aa238,232,170
  palegreen#98fb98152,251,152
  paleturquoise#afeeee175,238,238
  palevioletred#db7093219,112,147
  papayawhip#ffefd5255,239,213
  peachpuff#ffdab9255,218,185
  peru#cd853f205,133,63
  pink#ffc0cb255,192,203
  plum#dda0dd221,160,221
  powderblue#b0e0e6176,224,230
  purple#800080128,0,128
  red#ff0000255,0,0
  rosybrown#bc8f8f188,143,143
  royalblue#4169e165,105,225
  saddlebrown#8b4513139,69,19
  salmon#fa8072250,128,114
  sandybrown#f4a460244,164,96
  seagreen#2e8b5746,139,87
  seashell#fff5ee255,245,238
  sienna#a0522d160,82,45
  silver#c0c0c0192,192,192
  skyblue#87ceeb135,206,235
  slateblue#6a5acd106,90,205
  slategray#708090112,128,144
  slategrey#708090112,128,144
  snow#fffafa255,250,250
  springgreen#00ff7f0,255,127
  steelblue#4682b470,130,180
  tan#d2b48c210,180,140
  teal#0080800,128,128
  thistle#d8bfd8216,191,216
  tomato#ff6347255,99,71
  turquoise#40e0d064,224,208
  violet#ee82ee238,130,238
  wheat#f5deb3245,222,179
  white#ffffff255,255,255
  whitesmoke#f5f5f5245,245,245
  yellow#ffff00255,255,0
  yellowgreen#9acd32154,205,50

Farben mit Alphakanal ab CSS 3

Da in CSS 3 auch eine Eigenschaft zur Deckkraft von Elementen existiert, wurde das RGB-Modell um einen Parameter, die Deckkraft, erweitert. So können 2 Eigenschaften in einer zusammengefasst werden.

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);
}
Kai Spriestersbach