Hilfe:Farbe
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.
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.
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, 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
Syntax für den Quelltext
| Aktion | Wikitext | Ergebnis |
|---|---|---|
| Farbiger Text | <span style="color:#00FF00"> Text </span>
|
Text |
| Farbige Blöcke | <div style="color:darkgreen"> Block </div>
|
Block
|
| Hintergrund für ein oder einige Wörter | <span style="background:yellow"> Beispiel </span>
|
Beispiel |
| Hintergrund eines Blocks | <div style="background:yellow"> Block </div>
|
Block
|
| Farbiger Text + Hintergrund eines Blocks | <div style="background:yellow; color:darkgreen"> Block </div>
|
Block
|
| Hintergrund einer Tabellenzelle | style="background:#EAECF0"| Text
|
Text |
class="hintergrundfarbe5"| Text
|
Text | |
bgcolor="#EAECF0"| Text (veraltet, nicht mehr neu verwenden)
|
Text |
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 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. Hier: Standardvorgaben für „dunkle Schrift auf hellem Grund“.
Hintergrundfarben
Anwendungsbeispiele:
- Innerhalb vom Fließtext 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 |
|---|---|---|---|
| hintergrundfarbe1 | #F8F9FA | „helles Hellgrau“ | neutral; wie Tabellenzelle bei class="wikitable"
|
| hintergrundfarbe2 | #FFFFFF | „Weiß“ | neutral; für Nicht-Artikel-Seiten |
| hintergrundfarbe3 | #FFFF40 | „Gelb“ | auffällig |
| hintergrundfarbe4 | #FFAA00 | „Orange“ | sehr auffällig |
| hintergrundfarbe5 | #EAECF0 | „helles Grau“ | neutral, abgesetzt; wie Tabellenkopf bei class="wikitable"
|
| hintergrundfarbe6 | #B3B7FF | „helles Violett“ | allgemein „bunt“; für Hervorhebungen und Unterscheidungen |
| hintergrundfarbe7 | #FFCBCB | „helles Rot“ | |
| hintergrundfarbe8 | #FFEBAD | „helles Orange“ | |
| hintergrundfarbe9 | #B9FFC5 | „helles Grün“ |
| Anwendung | Farbe je nach Skin | |||
|---|---|---|---|---|
| vector | monobook | modern | cologneblue | |
| Inhaltsverzeichnis | #F8F9FA | #F8F9FA | #F0F0F0 | #F7F8FF |
| Artikelseiten | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF |
| Diskussions- und Projektseiten | #FFFFFF | #F3F3FF | #FFFFFF | #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 |
|---|---|---|---|
| rahmenfarbe1 | #A2A9B1 | „graues Graublau“ | neutral; wie Rahmen bei Inhaltsverzeichnis und Tabellen mit class="wikitable"
|
| rahmenfarbe2 | #EAECF0 | „Weißgrau“ | unauffällig, geringer Kontrast |
| rahmenfarbe3 | #C00000 | „Rot“ | auffällig |
| rahmenfarbe4 | #8888AA | „Graublau“ | neutrale Farbe, deutlich |
| rahmenfarbe5 | #000000 | „Schwarz“ | 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 oder #F00) per Kopieren und Einfügen.
| Farbname | Farbcode | |||
|---|---|---|---|---|
| CSS | X11 | |||
gray/grey
|
#808080
|
#BEBEBE
| ||
green
|
#008000
|
#00FF00
| ||
maroon
|
#800000
|
#B03060
| ||
purple
|
#800080
|
#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
- FarbFinder Ein JavaScript-Programm zum direkten Einfärben einer HTML-Seite. Die Tabellen sind der natürlichen Wahrnehmung entsprechend dreidimensional sortiert.
