Farben

Ziele

• Ich kenne die verschiedenen Möglichkeiten, Farben in CSS zu definieren.
• Ich verstehe die Unterschiede zwischen der Farbangabe über Namen, RGB und HEX in CSS.
• Ich kann Farben in CSS korrekt und gezielt einsetzen.

Zuweisen von Farben

Um einem Text eine Schriftfarbe zuzuweisen, ist folgendes eine Option:

1
2
3
4

span {
  /*font color:*/
  color: orange;
}

Den Hintergrund von einem Element kann mit dem background-color-Property bestimmt werden:

1
2
3
4

div {
  /*Color of the container*/
  background-color: orange;
}

Arten von Farben

In den oberen Beispielen wurde die Farbe mit dem Wort orange bestimmt. Es gibt aber viele Arten, diese Farbe zu übergeben:

• via Color-Name: orange
• via RGB-Angaben (red green blue): rgb(255,165,0)
• via hexadezimalen Wert (HEX color): #ffa500

Es gibt noch weitere Möglichkeiten. Du findest diese hier: https://www.w3schools.com/colors/default.asp

Die folgende CSS-Regel setzt die Schriftfarbe auf Orange. Nur eine dieser 3 Regeln wird benötigt:

1
2
3
4
5

.orange {
  color: orange;
  color: rgb(255,165,0);
  color: #ffa500;
}

Da diese Farbe in CSS bereits einen Namen hat ("orange"), wird hier die Angabe via Farbnamen empfohlen.

Obwohl die Angabe mit RGB in CSS möglich ist, sieht man in der Webentwicklung häufiger die hexadezimale Schreibweise.

Nachfolgend sind diese 3 Varianten genauer beschrieben.

Via Color-Name

Am lesbarsten ist die Angabe der Farben via Namen. Es werden mindestens 140 Farben mit Namen unterstützt. Häufig verwendete Farben sind z.B.:

• black
• white
• gray (American) oder grey (British), lightgray
• blue, lightblue
• cornflowerblue
• red
• orange
• yellow

Hier findest du eine Liste der Farben: https://www.w3schools.com/colors/colors_names.asp

via RGB

RGB steht für Rot-Grün-Blau. Wenn man die Farben via RGB angibt, so gibt man an, wie intensiv jede dieser 3 Farben in der gewünschten Farbe vorkommt. 0 bedeutet, dass die Farbe nicht vorkommt, 255 bedeutet hingegen, dass die Farbe zu 100% gebraucht wird. Zusätzlich kann auch noch ein 4. Wert der sogenannte Alpha-Wert, angegeben werden. Dieser legt die Transparenz der Farbe fest, wobei 0 für komplett transparent und 255 für unduchsichtig steht.

Folgende RGB-Werte solltest du als Informatiker:in kennen:

In RGB (oder HEX) gibts du Farben an, die der Browser nicht per Namen kennt. Ein Beispiel hierfür wäre die Farbe ‘amber’, die es leider noch nicht in die offizielle Liste geschafft hat.

Möchtest du herausfinden, wie der RGB- oder HEX-Wert einer Farbe ist, so kannst du dafür Online-Tools wie https://www.color-hex.com/color-names.html verwenden. Dort kannst du den Namen der Farbe eingeben und dann kannst du nachschauen, wie diese Werte für diese Farben sind. Im Beispiel der Farbe ‘amber’ erhälst du folgende Werte:

Das folgende Beispiel definiert einen schwarzen Hintergrund, der halbtransparent ist, d.h. das darunter liegende Element ist sichtbar, wirkt aber dunkler.

1

background-color: rgb(0, 0, 0, 128);

via HEX color

Am häufigsten werden im Web die Farben via Hex color angegeben.

Farben in hexadezimale sind auch in RGB angegeben, wobei jeder dieser 3 Farben 2 Stellen in diesem Code ausmachen.

Kennen solltest du sicher:

Wenn bei allen Farben die beiden Ziffern gleich sind, dann kann bei jeder Farbe die zweite Ziffer weggelassen werden (siehe Tabelle).

1

background-color: #B2222280;   /*dunkles Rot, zur Hälfte transparent*/