Quelltext der Seite Hilfe:Farbe

{{Hilfe}}
Um ein einheitliches Erscheinungsbild zu wahren, sollten '''Farben''' in der Wikipedia mit viel Bedacht eingesetzt werden.
* Nutze Farben in [[Wikipedia:Artikel|Artikeln]] nur in Ausnahmefällen, wenn sie inhaltlich sinnvoll sind.
* Auf deiner [[Hilfe:Benutzernamensraum|Benutzerseite]] sind deiner Farbgestaltung kaum Grenzen gesetzt.
* Wenn du ein [[Wikipedia:Portale|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 [[Hilfe:Textgestaltung/Barrierefreiheit#bedeutungsunterscheidend|bedeutungsunterscheidend]] verwendet werden und es sollte auf einen [[Hilfe:Textgestaltung/Barrierefreiheit#Erkennbare Schriften und Farben|ausreichenden Kontrast]] geachtet werden.

== Zuweisung ==
Zur Farbgebung dient in [[MediaWiki]] wie in [[Hypertext Markup Language|HTML]] das [[Hilfe:Tags#style|''style-''Attribut]]. Es wirkt auf in [[Hilfe:Tags|Tags]] eingeschlossene Bereiche sowie in der [[Hilfe:Tabellen|Tabellensyntax]]. Farben werden mit einem sogenannten RGB-Wert (Rot, Grün, Blau) angegeben.

=== {{Anker|CSS}} CSS-Anweisungen ===
Im ''style-''Attribut kann man mit den [[Cascading Style Sheets|CSS]]-Anweisungen <code>color:#RRGGBB</code> den Text und mit <code style="white-space:nowrap">background:#RRGGBB</code> (oder in der Regel unnötig umständlich <code style="white-space:nowrap">background-color:#RRGGBB</code>) die Hintergrundfläche einfärben; außerdem gibt es für Rahmenfarbe <code style="white-space:nowrap">border-color:#RRGGBB</code> (oder, wenn keine anderen Definitionen geerbt werden sollen, <code style="white-space:nowrap">border:#RRGGBB</code> mit weiteren Angaben zur Art des Strichs).

<code>#RRGGBB</code> 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.&nbsp;B. hexadezimal „33“ für dezimal „51“), kann die Angabe auch auf eine Stelle verkürzt werden (<code>3</code> statt <code>33</code> also etwa <code>#369</code> anstatt <code>#336699</code>) – allerdings nicht beim ohnehin veralteten <code>bgcolor</code> ([[Hilfe:CSS#Veraltete Anweisungen]]), das bei <code>wikitable</code>-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 [[HSV-Farbraum#HSL|HSL]] ist aus Kompatibilitätsgründen zu unterlassen.

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

== Farben verwenden ==
Mit der Einführung eines [[Wikipedia:Dark Mode|Dark Modes]] für den [[Hilfe:Skin/Vector 2022|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 <code>color:#{{Standardfarbe|text|body|mode=light}};</code> {{Farbe|#{{Standardfarbe|text|body|mode=light}}|border=1}} als Standardschriftfarbe erkannt und musste in vielen Fällen nicht angegeben werden. Im Dark Mode ist diese hingegen nahezu weiß <code>color:#{{Standardfarbe|text|body|mode=dark|ucase=1}};</code> {{Farbe|#{{Standardfarbe|text|body|mode=dark|ucase=1}}|border=1}}. 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|Klassen]] benötigen keine zusätzliche Angabe einer Textfarbe.

=== Syntax für den Quelltext ===
{| class="wikitable hintergrundfarbe-basis"
|- class="hintergrundfarbe9"
! colspan="4"| passende Farbenpärchen
|- 
! Aktion
! Wikitext
! Ergebnis hell
! dunkel
|-
| Farbiger Text{{FN|*}}
| <code><nowiki><span style="color:#999999;"> Text </span></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <span style="color:#999999;">Text</span>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <span style="color:#999999;">Text</span>
|-
| Farbiger Text + passender Hintergrund
| <code><nowiki><span style="background:#0000FF; color:#00FF00;"> Text </span></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <span style="background:#0000FF; color:#00FF00;">Text</span>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <span style="background:#0000FF; color:#00FF00;">Text</span>
|-
| Alternativ über [[Vorlage:Farbe]]
| <code><nowiki>{{Farbe|#0000FF|color=#00FF00|Text=Text}}</nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| {{Farbe|#0000FF|color=#00FF00|Text=Text}}
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| {{Farbe|#0000FF|color=#00FF00|Text=Text}}
|-
| Hintergrund für ein oder einige&nbsp;Wörter
| <code><nowiki><span style="background:yellow; color:#202122;"> Beispiel </span></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <span style="background:yellow; color:#202122;">Beispiel</span>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <span style="background:yellow; color:#202122;">Beispiel</span>
|-
| alternativ über [[Hilfe:Tags#mark|mark-Tags]]
| <code><nowiki><mark> Beispiel </mark></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <mark>Beispiel</mark>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <mark>Beispiel</mark>
|-
| Hintergrund eines Blocks
| <code><nowiki><div style="background:yellow; color:#202122;"> Block </div></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <div style="background:yellow; color:#202122;">Block</div>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <div style="background:yellow; color:#202122;">Block</div>
|-
| Farbiger Text + Hintergrund eines&nbsp;Blocks
| <code><nowiki><div style="background:yellow; color:darkgreen"> Block </div></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <div style="background:yellow;color:darkgreen;">Block</div>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <div style="background:yellow;color:darkgreen;">Block</div>
|-
| Hintergrund einer Tabellenzelle
| <code><nowiki>class="hintergrundfarbe5"| Text</nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}};"| Text
|style="background:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| Text
|- class="hintergrundfarbe7"
! colspan="4"| schlechte Farbwahl oder fehlende Text- oder Hintergrundfarbe
|- 
! Aktion
! Wikitext
! Ergebnis hell
! dunkel
|-
| Farbiger Text
| <code><nowiki><span style="color:#00FF00"> Text </span></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <span style="color:#00FF00">Text</span>{{FN|1}}
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <span style="color:#00FF00">Text</span>{{FN|2}}
|-
| Farbige Blöcke
| <code><nowiki><div style="color:darkgreen"> Block </div></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <div style="color:darkgreen">Block</div>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body}};"| <div style="color:darkgreen">Block{{FN|3}}</div>
|-
| Hintergrund für ein oder einige&nbsp;Wörter
| <code><nowiki><span style="background:yellow"> Beispiel </span></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <span style="background:yellow; color:#{{Standardfarbe|text|body}};">Beispiel</span>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body}};"| <span style="background:yellow; color:#{{Standardfarbe|text|body}};">Beispiel</span>
|-
| Hintergrund eines Blocks
| <code><nowiki><div style="background:yellow"> Block </div></nowiki></code>
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <div style="background:yellow; color:#{{Standardfarbe|text|body}};">Block</div>
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| <div style="background:yellow; color:#{{Standardfarbe|text|body}};">Block</div>
|-
|rowspan="2"| Hintergrund einer Tabellenzelle
| <code><nowiki>style="background:#EAECF0;"| Text</nowiki></code>
|style="background:#EAECF0; color:#{{Standardfarbe|text|body}};"| Text
|style="background:#EAECF0; color:#{{Standardfarbe|text|body}};"| Text
|-
| <code><nowiki>bgcolor="#EAECF0"| Text</nowiki></code> <small>''(veraltet, nicht mehr neu verwenden)''</small>
| bgcolor="#EAECF0"| Text
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};"| 
|}
{{FNZ|*|Die Textfarbe ist nicht gut lesbar, diese Art der Formatierung sollte ohne zusätzlich kontrastierende Hintergrundfarbe besser ganz vermieden werden}}
{{FNZ|1|Die Textfarbe ist zu hell für hellen Hintergrund}}
{{FNZ|2|Der Text ist nur auf dunklem Hintergrund gut lesbar}}
{{FNZ|3|Die Textfarbe ist zu dunkel für den Dark Mode}}
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 [[Hilfe:Skin|Skins]] und Anzeigemodi (hell, [[Wikipedia:Dark Mode|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 [[Hilfe:Skin|Skin]]-Einstellungen des Betrachters an. Vorrangig werden sie benutzt für Rahmen und Hintergründe von Tabellen und [[Wikipedia:Textbausteine|Textbausteinen]].

Die hier beschriebenen Klassen greifen auf [[Wikipedia:Technik/Skin/CSS/Variablen#projektweit verfügbare CSS-Variablen|projektspezifische CSS-Variablen]] zurück, die die Farbwerte enthalten. 

==== Hintergrundfarben ====
'''Anwendungsbeispiele:'''
* Innerhalb eines Fließtextes oder einer Textzeile
** <code><nowiki><span class="hintergrundfarbe8"></nowiki></code><span class="hintergrundfarbe1">innerhalb <span class="hintergrundfarbe8">einer</span> Textzeile</span><code><nowiki></span></nowiki></code>
* oder etwas schöner mit „padding“ links und rechts
** <code><nowiki><span class="hintergrundfarbe8" style="padding:0 3px 0 3px"></nowiki></code><span class="hintergrundfarbe1" style="padding:0 3px 0 3px">innerhalb <span class="hintergrundfarbe8" style="padding:0 3px 0 3px">einer</span> Textzeile mit etwas Abstand zum Buchstaben </span><code><nowiki></span></nowiki></code>
* Blockweise
** <code><nowiki><div class="hintergrundfarbe8"></nowiki></code> Text, Bilder, Tabellen usw. <code><nowiki></div></nowiki></code><div class="hintergrundfarbe8">Text, Bilder, Tabellen usw.</div>
* Für eine Tabellenzeile
** <code><nowiki>|- class="hintergrundfarbe8"</nowiki></code>
{|class="wikitable" style="margin-left:3em;"
|- class="hintergrundfarbe8"
| Text || Text || Text
|}

{| id="hintergrundfarben" class="wikitable" style="min-width:90ex"
|- 
! rowspan="2" | Klassenname
! colspan="2" | Farbe in allen [[Hilfe:Skin|Skins]]
! rowspan="2" | Farbname
! rowspan="2" | Wirkung und Verwendung
|-
! Heller Modus
! [[Wikipedia:Dark Mode|Dunkelmodus]]
|-
| hintergrundfarbe-basis
|style="text-align:center; background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};" | #{{Standardfarbe|hintergrund|basis|ucase=1}}
|style="text-align:center; background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}" | #{{Standardfarbe|hintergrund|basis|mode=dark|ucase=1}}
| –
| neutral; wie Seitenhintergrund
|-
| hintergrundfarbe1
|style="text-align:center; background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};" | #{{Standardfarbe|hintergrund|1|ucase=1}}
|style="text-align:center; background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}" | #{{Standardfarbe|hintergrund|1|mode=dark|ucase=1}}
| –
| neutral; wie Tabellenzelle bei <code>class="wikitable"</code>
|-
| hintergrundfarbe2
| colspan="2" class="hintergrundfarbe2" style="text-align:center;" | #{{Standardfarbe|hintergrund|2|ucase=1}}
| „Weiß“
| neutral; für Nicht-Artikel-Seiten
|-
| hintergrundfarbe3
| colspan="2" class="hintergrundfarbe3" style="text-align:center;" | #{{Standardfarbe|hintergrund|3|ucase=1}}
| „Gelb“
| auffällig
|-
| hintergrundfarbe4
| colspan="2" class="hintergrundfarbe4" style="text-align:center;" | #{{Standardfarbe|hintergrund|4|ucase=1}}
| „Orange“
| sehr auffällig
|-
| hintergrundfarbe5
|style="text-align:center; background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}};" | #{{Standardfarbe|hintergrund|5|ucase=1}}
|style="text-align:center; background:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}" | #{{Standardfarbe|hintergrund|5|mode=dark|ucase=1}}
| –
| neutral, abgesetzt; wie Tabellenkopf bei <code>class="wikitable"</code>
|-
| hintergrundfarbe6
| colspan="2" class="hintergrundfarbe6" style="text-align:center"| #{{Standardfarbe|hintergrund|6|ucase=1}}
| „helles Violett“
|rowspan="4"| allgemein „bunt“; <br /> für Hervorhebungen und Unterscheidungen
|-
| hintergrundfarbe7
| colspan="2" class="hintergrundfarbe7" style="text-align:center"| #{{Standardfarbe|hintergrund|7|ucase=1}}
| „helles Rot“
|-
| hintergrundfarbe8
| colspan="2" class="hintergrundfarbe8" style="text-align:center"| #{{Standardfarbe|hintergrund|8|ucase=1}}
| „helles Orange“
|-
| hintergrundfarbe9
| colspan="2" class="hintergrundfarbe9" style="text-align:center"| #{{Standardfarbe|hintergrund|9|ucase=1}}
| „helles Grün“
|}

{| class="wikitable" style="text-align:center; min-width:90ex"
|- 
!rowspan="3"| Anwendung
!colspan="5"| Farbe je nach [[Hilfe:Skin|Skin]]
|-
! colspan="2" | vector,<br>minerva
! monobook
! modern
! cologneblue
|-
! hell
! dunkel
! hell
! hell
! hell
|-
|style="text-align:left"| Inhaltsverzeichnis
|style="background:#{{Standardfarbe|hintergrund|1}}; color:#{{Standardfarbe|text|body}};"| <!--vector -->#{{Standardfarbe|hintergrund|1|ucase=1}}
|style="background:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <!--vector dark -->#{{Standardfarbe|hintergrund|1|mode=dark|ucase=1}}
|style="background:#F8F9FA; color:#{{Standardfarbe|text|body}};"| <!--monobook -->#F8F9FA
|style="background:#F0F0F0; color:#{{Standardfarbe|text|body}};"| <!--modern -->#F0F0F0
|style="background:#F7F8FF; color:#{{Standardfarbe|text|body}};"| <!--cologneblue-->#F7F8FF
|-
|style="text-align:left"| Artikelseiten
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <!--vector -->#{{Standardfarbe|hintergrund|basis|ucase=1}}
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <!--vector dark -->#{{Standardfarbe|hintergrund|basis|mode=dark|ucase=1}}
|style="background:#FFFFFF; color:#{{Standardfarbe|text|body}};"| <!--monobook -->#FFFFFF
|style="background:#FFFFFF; color:#{{Standardfarbe|text|body}};"| <!--modern -->#FFFFFF
|style="background:#FFFFFF; color:#{{Standardfarbe|text|body}};"| <!--cologneblue-->#FFFFFF
|-
|style="text-align:left"| Diskussions- und Projektseiten
|style="background:#{{Standardfarbe|hintergrund|basis}}; color:#{{Standardfarbe|text|body}};"| <!--vector -->#{{Standardfarbe|hintergrund|basis|ucase=1}}
|style="background:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <!--vector dark -->#{{Standardfarbe|hintergrund|basis|mode=dark|ucase=1}}
|style="background:#F3F3FF; color:#{{Standardfarbe|text|body}};"| <!--monobook -->#F3F3FF
|style="background:#FFFFFF; color:#{{Standardfarbe|text|body}};"| <!--modern -->#FFFFFF
|style="background:#FFFFEC; color:#{{Standardfarbe|text|body}};"| <!--cologneblue-->#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: <code><nowiki><span class="rahmenfarbe3" style="border-style: solid; border-width: 2px; margin: 2px"> </nowiki></code>Text<code><nowiki></span></nowiki></code>

{| id="rahmenfarben" class="wikitable" style="min-width:90ex"
|- 
! rowspan="2" | Klassenname
! colspan="2" | Farbcode
! rowspan="2" | Farbname
! rowspan="2" | Wirkung und Verwendung
|-
! Heller Modus
! [[Wikipedia:Dark Mode|Dunkelmodus]]
|-
| rahmenfarbe1
|style="text-align:center"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|1}}; margin: 2px;">#{{Standardfarbe|rahmen|1|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|1|mode=dark}}; margin: 2px;">#{{Standardfarbe|rahmen|1|mode=dark|ucase=1}}</span>
| –
| neutral; wie Rahmen bei Inhaltsverzeichnis und Tabellen mit <code>class="wikitable"</code>
|-
| rahmenfarbe2
|style="text-align:center"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|2}}; margin: 2px;">#{{Standardfarbe|rahmen|2|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|2|mode=dark}}; margin: 2px;">#{{Standardfarbe|rahmen|2|mode=dark|ucase=1}}</span>
| –
| unauffällig, geringer Kontrast
|-
| rahmenfarbe3
|style="text-align:center"| <span class="rahmenfarbe3" style="border-style: solid; border-width: 2px; margin: 2px;">#{{Standardfarbe|rahmen|3|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span class="rahmenfarbe3" style="border-style: solid; border-width: 2px; margin: 2px;">#{{Standardfarbe|rahmen|3|ucase=1}}</span>
| „Rot“
| auffällig
|-
| rahmenfarbe4
|style="text-align:center"| <span class="rahmenfarbe4" style="border-style: solid; border-width: 2px; margin: 2px;">#{{Standardfarbe|rahmen|4|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span class="rahmenfarbe4" style="border-style: solid; border-width: 2px; margin: 2px;">#{{Standardfarbe|rahmen|4|ucase=1}}</span>
| „Graublau“
| neutrale Farbe, deutlich
|-
| rahmenfarbe5
|style="text-align:center"| <span class="rahmenfarbe5" style="border-style: solid; border-width: 2px; margin: 2px;">#{{Standardfarbe|rahmen|5|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|5|mode=dark}}; margin: 2px;">#{{Standardfarbe|rahmen|5|ucase=1|mode=dark}}</span>
| –
| 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 <code>#FF0000</code>) per [[Kopieren und Einfügen]].

{| class="wikitable"
|-
!rowspan="2"| Farbname
!colspan="4"| Farbcode
|-
!colspan="2"| [[Cascading Style Sheets|CSS]] <!-- W3C -->
!colspan="2"| [[X Window System|X11]]
|-
| <code>gray</code>/<code>grey</code>
|{{Coltit|808080}} || <code>#808080</code>
|{{Coltit|BEBEBE}} || <code>#BEBEBE</code>
|-
| <code>green</code>
|{{Coltit|008000}} || <code>#008000</code>
|{{Coltit|00FF00}} || <code>#00FF00</code>
|-
| <code>maroon</code>
|{{Coltit|800000}} || <code>#800000</code>
|{{Coltit|B03060}} || <code>#B03060</code>
|-
| <code>purple</code>
|{{Coltit|800080}} || <code>#800080</code>
|{{Coltit|A020F0}} || <code>#A020F0</code>
|}

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'''
* [http://wiki.selfhtml.org/wiki/Farbw%C3%A4hler Farbwähler] im [[Selfhtml|SelfHTML]]-Wiki
* [http://colorschemedesigner.com Zusammenpassende Farb-Schemata] (benötigt JavaScript) – sehr nützlich zur Auswahl passender Schattierungen

{{Hinweis Farbdarstellung}}
{{Dokumentation/Suchbegriffe|Hintergrundfarbe Rahmenfarbe}}
<noinclude>
[[Kategorie:Hilfe:Formatieren|Farben]]
</noinclude>