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).

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.

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

Hinweis

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

CSS-Klassen

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

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	Farbe in allen Skins
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

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

Weblinks

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