Hilfe:Farbe

Vorlage:Hilfe Um ein einheitliches Erscheinungsbild zu wahren, sollten Farben in der Wikipedia mit viel Bedacht eingesetzt werden.

• Nutze Farben in Artikeln nur in Ausnahmefällen, wenn sie inhaltlich sinnvoll sind.
• Auf deiner Benutzerseite sind deiner Farbgestaltung kaum Grenzen gesetzt.
• Wenn du ein Portal gestaltest, darf es durchaus etwas farbiger werden, orientiere dich jedoch an Bestehendem.

Ganz allgemein soll eine Farbgebung den Sehenden die Orientierung erleichtern, muss jedoch Menschen mit Augenproblemen immer noch die Inhalte zugänglich machen. Farben dürfen nicht bedeutungsunterscheidend verwendet werden und es sollte auf einen ausreichenden Kontrast geachtet werden.

Zuweisung

Zur Farbgebung dient in MediaWiki wie in HTML das style-Attribut. Es wirkt auf in Tags eingeschlossene Bereiche sowie in der Tabellensyntax. Farben werden mit einem sogenannten RGB-Wert (Rot, Grün, Blau) angegeben.

Vorlage:Anker CSS-Anweisungen

Im style-Attribut kann man mit den CSS-Anweisungen color:#RRGGBB den Text und mit background:#RRGGBB (oder in der Regel unnötig umständlich background-color:#RRGGBB) die Hintergrundfläche einfärben; außerdem gibt es für Rahmenfarbe border-color:#RRGGBB (oder, wenn keine anderen Definitionen geerbt werden sollen, border:#RRGGBB mit weiteren Angaben zur Art des Strichs).

#RRGGBB steht für eine hexadezimale Farbdefinition: Die Werte jeweils für Rot (RR), Grün (GG) und Blau (BB) sind zweistellig anzugeben und können zwischen 00 und FF (dezimal 0 und 255) liegen; wenn allerdings bei allen RR-, GG- und BB-Werten jeweils beide Stellen identisch sind (z. B. hexadezimal „33“ für dezimal „51“), kann die Angabe auch auf eine Stelle verkürzt werden (3 statt 33 also etwa #369 anstatt #336699) – allerdings nicht beim ohnehin veralteten bgcolor (Hilfe:CSS#Veraltete Anweisungen), das bei wikitable-klassifizierten Tabellen sowieso nicht funktioniert. Die selten benutzten abgekürzten Farbcodes könnten andere verwirren. Im Wikitext sollte man besser die verbreitete sechsstellige Hexadezimal-Form benutzen. Die Angabe in HSL ist aus Kompatibilitätsgründen zu unterlassen.

Man könnte statt der RGB-Werteangabe auch die unten erwähnten Farbnamen verwenden (ohne „#“), aber auch hier ist die volle Kompatibilität nicht gegeben, so dass die Werteangabe zu bevorzugen ist.

Farben verwenden

Mit der Einführung eines Dark Modes für den Skin Vector 2022 im Frühjahr 2024 wird es notwendig passende Farbenpaare für Text- und Hintergrundfarben zu wählen. Bisher wurde im hellen Modus color:#Vorlage:Standardfarbe; Vorlage:Farbe als Standardschriftfarbe erkannt und musste in vielen Fällen nicht angegeben werden. Im Dark Mode ist diese hingegen nahezu weiß color:#Vorlage:Standardfarbe; Vorlage:Farbe. Das kann dazu führen, dass im dunklen Modus Texte unlesbar werden, wenn ihnen keine expliziten, kontrastreichen Farben für Hintergrund und Text zugewiesen werden. Für die Wahl einer Hintergrundfarbe gilt es entsprechend darauf zu achten, dass die Farbkombination mit der Textfarbe gut lesbar bleibt. Farbzuweisungen über Klassen benötigen keine zusätzliche Angabe einer Textfarbe.

Syntax für den Quelltext

passende Farbenpärchen
Aktion	Wikitext	Ergebnis hell	dunkel
Farbiger TextVorlage:FN	<span style="color:#999999;"> Text </span>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Text	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Text
Farbiger Text + passender Hintergrund	<span style="background:#0000FF; color:#00FF00;"> Text </span>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Text	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Text
Alternativ über Vorlage:Farbe	{{Farbe|#0000FF|color=#00FF00|Text=Text}}	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Vorlage:Farbe	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Vorlage:Farbe
Hintergrund für ein oder einige Wörter	<span style="background:yellow; color:#202122;"> Beispiel </span>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Beispiel	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Beispiel
alternativ über mark-Tags	<mark> Beispiel </mark>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Beispiel	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Beispiel
Hintergrund eines Blocks	<div style="background:yellow; color:#202122;"> Block </div>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Block	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Block
Farbiger Text + Hintergrund eines Blocks	<div style="background:yellow; color:darkgreen"> Block </div>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Block	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Block
Hintergrund einer Tabellenzelle	class="hintergrundfarbe5"| Text	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Text	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Text
schlechte Farbwahl oder fehlende Text- oder Hintergrundfarbe
Aktion	Wikitext	Ergebnis hell	dunkel
Farbiger Text	<span style="color:#00FF00"> Text </span>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| TextVorlage:FN	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| TextVorlage:FN
Farbige Blöcke	<div style="color:darkgreen"> Block </div>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Block	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| BlockVorlage:FN
Hintergrund für ein oder einige Wörter	<span style="background:yellow"> Beispiel </span>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Beispiel	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Beispiel
Hintergrund eines Blocks	<div style="background:yellow"> Block </div>	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Block	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| Block
Hintergrund einer Tabellenzelle	style="background:#EAECF0;"| Text	style="background:#EAECF0; color:#Vorlage:Standardfarbe;"| Text	style="background:#EAECF0; color:#Vorlage:Standardfarbe;"| Text
	bgcolor="#EAECF0"| Text (veraltet, nicht mehr neu verwenden)	Text	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"|

Vorlage:FNZ Vorlage:FNZ Vorlage:FNZ Vorlage:FNZ Rot als Textfarbe sollte in Artikeln nicht verwendet werden; siehe auch Hilfe:Textgestaltung.

Klassen

Wikipedia-Farbdefinitionen über Klassen (class) haben den Vorteil, dass sie sich den unterschiedlichen Skins und Anzeigemodi (hell, dunkel) anpassen können, also jeweils unterschiedlich sein können. Sie geben Artikeln und anderen Seiten eine ruhige und einheitliche Gestaltung und passen sich sobald erforderlich auch den Skin-Einstellungen des Betrachters an. Vorrangig werden sie benutzt für Rahmen und Hintergründe von Tabellen und Textbausteinen.

Die hier beschriebenen Klassen greifen auf projektspezifische CSS-Variablen zurück, die die Farbwerte enthalten.

Hintergrundfarben

Anwendungsbeispiele:

• Innerhalb eines Fließtextes oder einer Textzeile
  • <span class="hintergrundfarbe8">innerhalb einer Textzeile</span>
• oder etwas schöner mit „padding“ links und rechts
  • <span class="hintergrundfarbe8" style="padding:0 3px 0 3px">innerhalb einer Textzeile mit etwas Abstand zum Buchstaben </span>
• Blockweise
  • <div class="hintergrundfarbe8"> Text, Bilder, Tabellen usw. </div>
    Text, Bilder, Tabellen usw.
• Für eine Tabellenzeile
  • |- class="hintergrundfarbe8"

Text

Text

Text

Klassenname	Farbe in allen Skins		Farbname	Wirkung und Verwendung
	Heller Modus	Dunkelmodus
hintergrundfarbe-basis	style="text-align:center; background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;" | #Vorlage:Standardfarbe	style="text-align:center; background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe" | #Vorlage:Standardfarbe	–	neutral; wie Seitenhintergrund
hintergrundfarbe1	style="text-align:center; background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;" | #Vorlage:Standardfarbe	style="text-align:center; background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe" | #Vorlage:Standardfarbe	–	neutral; wie Tabellenzelle bei class="wikitable"
hintergrundfarbe2	#Vorlage:Standardfarbe		„Weiß“	neutral; für Nicht-Artikel-Seiten
hintergrundfarbe3	#Vorlage:Standardfarbe		„Gelb“	auffällig
hintergrundfarbe4	#Vorlage:Standardfarbe		„Orange“	sehr auffällig
hintergrundfarbe5	style="text-align:center; background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;" | #Vorlage:Standardfarbe	style="text-align:center; background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe" | #Vorlage:Standardfarbe	–	neutral, abgesetzt; wie Tabellenkopf bei class="wikitable"
hintergrundfarbe6	#Vorlage:Standardfarbe		„helles Violett“	allgemein „bunt“; für Hervorhebungen und Unterscheidungen
hintergrundfarbe7	#Vorlage:Standardfarbe		„helles Rot“
hintergrundfarbe8	#Vorlage:Standardfarbe		„helles Orange“
hintergrundfarbe9	#Vorlage:Standardfarbe		„helles Grün“

Anwendung	Farbe je nach Skin
	vector, minerva		monobook	modern	cologneblue
	hell	dunkel	hell	hell	hell
Inhaltsverzeichnis	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| #Vorlage:Standardfarbe	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	style="background:#F8F9FA; color:#Vorlage:Standardfarbe;"| #F8F9FA	style="background:#F0F0F0; color:#Vorlage:Standardfarbe;"| #F0F0F0	style="background:#F7F8FF; color:#Vorlage:Standardfarbe;"| #F7F8FF
Artikelseiten	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| #Vorlage:Standardfarbe	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	style="background:#FFFFFF; color:#Vorlage:Standardfarbe;"| #FFFFFF	style="background:#FFFFFF; color:#Vorlage:Standardfarbe;"| #FFFFFF	style="background:#FFFFFF; color:#Vorlage:Standardfarbe;"| #FFFFFF
Diskussions- und Projektseiten	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe;"| #Vorlage:Standardfarbe	style="background:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	style="background:#F3F3FF; color:#Vorlage:Standardfarbe;"| #F3F3FF	style="background:#FFFFFF; color:#Vorlage:Standardfarbe;"| #FFFFFF	style="background:#FFFFEC; color:#Vorlage:Standardfarbe;"| #FFFFEC

• Wird im Artikel eine Legende zur Bedeutung der einzelnen Farben benötigt, so ist dies beispielsweise über die Vorlage:Farbindex möglich.

Rahmenfarben

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

Klassenname	Farbcode		Farbname	Wirkung und Verwendung
	Heller Modus	Dunkelmodus
rahmenfarbe1	#Vorlage:Standardfarbe	style="text-align:center; background-color:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	–	neutral; wie Rahmen bei Inhaltsverzeichnis und Tabellen mit class="wikitable"
rahmenfarbe2	#Vorlage:Standardfarbe	style="text-align:center; background-color:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	–	unauffällig, geringer Kontrast
rahmenfarbe3	#Vorlage:Standardfarbe	style="text-align:center; background-color:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	„Rot“	auffällig
rahmenfarbe4	#Vorlage:Standardfarbe	style="text-align:center; background-color:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	„Graublau“	neutrale Farbe, deutlich
rahmenfarbe5	#Vorlage:Standardfarbe	style="text-align:center; background-color:#Vorlage:Standardfarbe; color:#Vorlage:Standardfarbe"| #Vorlage:Standardfarbe	–	hoher Kontrast

Farbcodes

Ausführliche Farbtabellen findest du im Artikel Webfarbe (die Abschnitte dort müssen mit der Maus aufgeklappt werden). Im Web lassen sich zahlreiche weitere Farbtabellen und Farbwähler finden. Verwende in der Wikipedia möglichst nicht die englischsprachigen Farbnamen, sondern die hexadezimalen Farbcodes (zum Beispiel #FF0000) per Kopieren und Einfügen.

Farbname	Farbcode
	CSS		X11
gray/grey	Vorlage:Coltit	#808080	Vorlage:Coltit	#BEBEBE
green	Vorlage:Coltit	#008000	Vorlage:Coltit	#00FF00
maroon	Vorlage:Coltit	#800000	Vorlage:Coltit	#B03060
purple	Vorlage:Coltit	#800080	Vorlage:Coltit	#A020F0

Farbnamen mit Nummern am Ende sind im Web nicht standardisiert. Diese sogenannten X11-Farben werden in der Regel nur von Webbrowsern unter Linux/Unix verstanden. Sie sollten in der Wikipedia nicht verwendet werden.

Weitere Informationen

• Hilfe:Farbtabelle – Tausende von Farbcodes
• Wikipedia:Farbe – Enzyklopädische Artikel mit Hintergrundinformationen sowie Projektseiten und Vorlagen in der deutschsprachigen Wikipedia

{{Wikipedia:Style}}

Extern

• Farbwähler im SelfHTML-Wiki
• Zusammenpassende Farb-Schemata (benötigt JavaScript) – sehr nützlich zur Auswahl passender Schattierungen