Webfarbe

Als Webfarbe werden Farben bezeichnet, die für die Gestaltung von Webseiten eingesetzt und empfohlen werden. Verschieden 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, empfiehlt es sich, statt der Farbnamen bestimmte Farbcodes zu verwenden. Dazu wurden sogenannte websichere Farben entwickelt. Der Hexadezimalcode besteht aus einer Kombination von drei Werten (siehe RGB-Farbraum).

Darstellung

Beispiele für Webfarben mit ihren Werten sind 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

Hinweise

Die Farbe Rot als Textfarbe sollte in Artikeln möglichst nicht verwendet werden, da diese Farbe in einem Wiki in der Regel für eine 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

• Eine Farbtabelle sortiert nach Schattierungen
• „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