neontrauma.de » XHTML & CSS » Farben in HTML & CSS
15. August 2008

Farben gehören zu den grundlegenden Dingen, die man beim Basteln einer Webseite benötigt.
Wie man sie in HTML & CSS angibt, ist das Thema dieses Einsteiger-Tutorials. :-)

Je nachdem, was ihr einfärben wollt, stehen euch verschiedene Angaben von Eigenschaften zur Verfügung: so legt man die Schriftfarbe über color fest, die Hintergrundfarbe über background-color, die Rahmenfarbe über border-color, … und so weiter.
Hinter dieser Eigenschaft folgt nun der Wert – sprich, die Angabe der Farbe.

Wort oder Code

Die jeweilige Farbe könnt ihr entweder mit Hilfe der englischen Bezeichnung der Farbe definieren, oder aber über einen sechsstelligen Code aus Zahlen und Buchstaben. Es gibt sechzehn verschiedene Farbtöne, die mit Worten angegeben werden können:

  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • white
  • yellow

Logischerweise stehen euch über die Code-Variante aber wesentlich mehr Farbanstufungen zur Verfügung – genauer gesagt: 16,7 Millionen.

RGB-Farben

Diese 16,7 Millionen Farben berechnen sich daraus, dass es im RGB-Farbraum drei Grundfarben gibt: Rot, Grün und Blau. Ihren jeweiligen Wert notiert man in hexadezimaler Schreibweise, das heißt, mit Hilfe von sechzehn Zeichen (0-9 und A bis F). So erhält man 256 mögliche Abstufungen für jede der drei Grundfarben.
Also: 256x256x256 = 16, 7 Millionen.
Mehr zum RGB-Farbraum könnt ihr hier nachlesen, das hilft beim Verstehen der nächsten Absätze. ;-)

In der Syntax #RRGGBB werden diese Farben nun notiert. Die ersten beiden Stellen geben also den Rotwert an, die nächsten beiden den grünen und die letzten zwei schließlich den blauen Anteil.

00 bedeutet, dass von einer Farbe nichts vorhanden ist (also 0 als Dezimalwert), FF steht analog dazu für den vollen Farbwert (also 255 im Dezimalsystem).
Schwarz notiert man dementsprechend als #000000, Weiß als #ffffff. Dazwischen liegt mit #cccccc ein Grauton; #ff0000 ergibt Rot, #00ff00 Grün und #0000ff Blau.

Kurzschreibweise

CSS bietet eine Besonderheit bei der Notation: wenn ihr die platzsparende (und daher empfohlene) Kurzschreibweise verwendet, könnt ihr die Farbwerte teilweise drei- statt sechsstellig notieren.
Denn wenn sich die Werte in allen drei Pärchen jeweils gleichen, muss nur je eine Ziffer notiert werden.

Aus #ff0000 wird also #f00.
Den Wert #ff0c00 hingegen muss man aber ausschreiben, da im G-Päckchen zwei verschiedene Angaben stehen.

Praxisbeispiel

Zu guter Letzt ein kleines Beispiel, wie das Ganze dann in der Praxis aussehen sollte (zur Veranschaulichung habe ich hier einmal alle drei Schreibweisen verwendet, wovon man aber eigentlich absehen sollte):

a {
color: blue;
background-color: #bbb;
border-bottom-color: #c015ae;
}

Dies ergibt einen blauen Link auf grauem Hintergrund, der violett unterstrichen ist.

verwandte Beiträge

keine Kommentare

Es sind noch keine Kommentare vorhanden.

Und deine Meinung?

HTML erlaubt

Abonnieren, ohne einen Kommentar zu hinterlassen

die Autorin
neontrauma neontrauma, 23 Jahre alt, Studentin und freiberufliche Webdesignerin, liebt Coding & Fotografie und wohnt in Leverkusen. mehr?
neontrauma im www
flickr fotocommunity deviantART twitter facebook StudiVZ lifestream.fm last.fm