Tutorials – Webdesign
Text- & Schriftformatierung | Hyperlinks
5. Farben
Auf Monitoren werden Farben im so genannten "RGB-Modus" dargestellt. RGB steht für "Rot – Grün – Blau".Um Farben auf Webseiten zu definieren, stehen euch die Farbnamen aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white und yellow zur Verfügung, die bereits im letzten Kapitel erklärt wurden. Diese Art der Farbangabe wird jedoch nicht unbedingt empfohlen.
Besser geeignet zur Farbdefinition sind die Hexadezimalfarben, bei denen ihr aus 16,7 Millionen Farben wählen könnt.
Vor einem Hexadezimal-Farbcode steht immer ein #-Zeichen ("Raute"). Ein solcher Farbcode besteht aus einer sechsstelligen Kombination aus den Ziffern 0-9 und den Buchstaben A-F.
Die Ziffern zeigen, wie viele Teile rot, grün und blau in 
einer Farbe anhalten sind – 0 steht dabei für "gar nicht" und F für "vollständig".
So sieht z.B. der Farbcode von weiß so aus:
#ffffff
der Farbcode von schwarz lautet:
#000000
und z.B. grün
#009933
Mit den Hexadezimalcodes können dann Schrift-, Hintergrund-, Rahmen- usw. -farben definiert werden.
Um die Standardfarben einer HTML-Seite festzulegen, stehen im BODY-Tag diverse Attribute zur Verfügung, denen Farbwerte zugewiesen werden können:
<body bgcolor="#e0e0e0" text="#333333" link="#800080" vlink="#4f154f" alink="#800080">
bgcolor (hier hellgrau) bestimmt die Hintergrundfarbe
text (hier fast schwarz) bestimmt die Textfarbe
link (hier violett) bestimmt die Farbe von Links
vlink (hier dunkles violett) bestimmt die Farbe von besuchten Links
alink (hier violett) bestimmt die Farbe vom Link, der gerade angeklickt wird
Innerhalb eines Textes kann die Farbe, die als Standardtextfarbe festgelegt ist, einfach mittels font-Tag überschrieben werden:
<font color="#4f154f"> ...Text... </font>
Ich habe hier einmal als Beispiel das Wort "Ausbildung" hervorgehoben.
Wie kommt man nun zum gewünschten Farbcode? Sicherlich könnte man mittels "ausprobieren" die gewünschte Farbe erraten. Dafür braucht man aber viel Zeit und es erfordert ein gewisses Maß an Erfahrung, die Farbanteile im Kopf zu errechnen.
Einfacher geht der Weg über ein Bildbearbeitungsprogramm wie z.B. Photoshop:
Mit einem Doppelklick öffnet sich der Farbwähler, wo die gewünschte Farbe eingestellt und der entsprechende Code rauskopiert werden kann.
Eine übersicht mit verschiedensten Hexadezimalcodes ist hier zu finden:
http://www.html-php-mysql.de/generatoren/colors.php
Idealerweise werden alle Farbeinstellungen zentral in einer CSS-Datei festgelegt – dazu werdet ihr hier später mehr erfahren.
© since 2002 by Otaku-Welt.de