Webfarbe

Als Webfarbe werden Farben bezeichnet, die für die Gestaltung von Webseiten eingesetzt und empfohlen werden. Verschiedene Hersteller von Browsern haben eine Vielzahl von Farbnamen definiert. Bei diesen ist aber nicht sichergestellt, dass diese Farben auch in gleicher Art am Computerbildschirm dargestellt werden können. Um eine browserunabhängige Darstellung der Farben in Webseiten zu erzeugen, wurden sogenannte websichere Farben entwickelt. Dabei empfiehlt es sich, statt der Farbnamen, die vom Browser unterschiedlich interpretiert werden können, bestimmte Farbcodes zu verwenden. Diese Farbcodes können Hexadezimalcodes sein und bestehen immer aus einer Kombination von drei Werten (siehe RGB-Farbraum).

Übrigens: Die PlusPedia ist NICHT die Wikipedia. Wir sind ein gemeinnütziger Verein, PlusPedia ist werbefrei. Wir freuen uns daher über eine kleine Spende!

1 Darstellung

Die einfachsten Farbcodes sind als Beispiele für Webfarben mit ihren Werten in der folgenden Tabelle dargestellt:

#000	#F00	#003	#F03	#00F	#F0F	#0F0	#6F0	#FF0	#3F3	#6F3
#FF3	#0F6	#3F6	#CF6	#FF6	#0FC	#3FC	#0FF	#3FF	#6FF	#FFF

Alle 216 Farben sind in der Liste websichere Farben zu finden. Allein aus der Kombination von zwei Codes von 00 bis FF ergeben sich jedoch bereits 256 Möglichkeiten. Daran ist zu erkennen, dass nicht alle Kombinationen sinnvoll sind. In einigen Skriptsprachen (z.B. HTML) wird der sechsstellige Code verwendet, so dass z.B. statt der einfachen Form #FFF die längere Zeichenfolge #FFFFFF zu schreiben ist. Statt der Hexadezimalcodes sind manchmal auch Dezimalcodes möglich, wobei für #FFF die Werte 255, 255, 255 anzugeben sind.

2 Praxisbeispiele

Aktion	Wikitext	Ergebnis
Farbiger Text	<span style="color:#00F;"> Text </span>	Text
Farbige Absätze	<p style="color:darkgreen;"> Absatz </p>	Absatz
Hintergrund für ein oder wenige Wörter	<span style="background-color:yellow;"> Beispiel </span>	Beispiel
Hintergrund eines Absatzes	<p style="background-color:yellow;"> Absatz </p>	Absatz
Farbiger Text + Hintergrund eines Absatzes	<p style="color:darkgreen; background-color:yellow;"> Absatz </p>	Absatz
Hintergrund einer Tabellenzelle	style="background-color:#fedbca;" | Text	Text

3 Hinweise

Die Farbe Rot als Textfarbe sollte möglichst nicht verwendet werden, da diese Farbe in einem Wiki in der Regel für einen fehlenden Link verwendet wird. Blau wird dagegen meist für einen vorhandenen Link benutzt.

4 CSS-Klassen

In der CSS-Software für PlusPedia sind durch die Datei MediaWiki:Common.css bestimmte Farbdarstellungen festgelegt.

4.1 Hintergrundfarben

Anwendungsbeispiele:

• Innerhalb vom Fließtext bzw. einer Textzeile
  • <span class="hintergrundfarbe5">innerhalb einer Textzeile</span>
• oder etwas „schöner“ mit „padding“ links und rechts
  • <span class="hintergrundfarbe5" style="padding:0 1.5pt 0 1.5pt">innerhalb einer Textzeile</span>
• Blockweise
  • <div class="hintergrundfarbe5">Text, Bilder, Tabellen usw.

Klassen-Name	Kurzbeschreibung	Darstellung
hintergrundfarbe1	Wie in class="wikitable" verwendet	#F9F9F9
hintergrundfarbe2	„Weiß“, für Nicht-Artikel-Seiten, neutral	#FFFFFF
hintergrundfarbe3	„Gelb“, auffällig	#FFFF40
hintergrundfarbe4	Sehr auffällig	#FFAA00
hintergrundfarbe5	Neutral, abgesetzt	#E0E0E0
hintergrundfarbe6	Allgemein „bunt“, für Hervorhebungen und Unterscheidungen	#B3B7FF
hintergrundfarbe7		#FFCBCB
hintergrundfarbe8		#FFEBAD
hintergrundfarbe9		#B9FFC5

4.2 Rahmenfarben

Anwendungsbeispiel: <span class="rahmenfarbe3" style="border-style: solid; border-width: 2px; margin: 2px;"> Text</span>

Klassenname	Kurzbeschreibung	Farbe
rahmenfarbe1	Wie Inhaltsverzeichnis	rahmenfarbe1
rahmenfarbe2	Unauffällig, geringer Kontrast	rahmenfarbe2
rahmenfarbe3	„Rot“, auffällig	rahmenfarbe3
rahmenfarbe4	Neutrale Farbe, deutlich	rahmenfarbe4
rahmenfarbe5	„Schwarz“, hoher Kontrast	rahmenfarbe5

5 Weblinks

• „VisiBone’s ‚Web-Safe‘ Color Lab“ (englisch, beschreibt eine intuitivere Anordnung der websicheren Farben
• Umfangreiches Tutorial über Farben im Webdesign
• Umrechner für Hexadezimal- und Dezimalcodes mit Farbanzeige