Webfarbe

Aus PlusPedia
Wechseln zu: Navigation, Suche

Als Webfarbe werden Farben bezeichnet, die für die Gestaltung von Webseiten eingesetzt werden. Verschieden Hersteller von Browsern haben eine Vielzahl von Farbnamen definiert. Bei diesen ist aber nicht sichergestellt, dass alle Browser diese Farbnamen auch sicher darstellen können. Um browserunabhängiges Farbenbild in Webseiten zu erzeugen, empfiehlt es sich solche Farbnamen nicht zu verwenden.

Als Websichere Farben werden Farben bezeichnet, deren Hexadezimalcode aus einer Kombination von drei (RGB: Rot, Grün, Blau) Strings bestehen.

1 Sichere Webfarben[Bearbeiten]

Wirklich sichere Webfarbe besteht hauptsächlich aus grünen und gelben Farbtönen, ihre Werte 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 siehe Liste 216 Webfarben

2 Farben verwenden[Bearbeiten]

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

3 Hinweise[Bearbeiten]

Die Farbe Rot als Textfarbe sollte in Artikeln nicht verwendet werden.


4 CSS-Klassen[Bearbeiten]

CSS-Klassen die in Software der bei PlusPedia verwendeten Datei - MediaWiki:Common.css - festgelegt sind.


4.1 Hintergrundfarben[Bearbeiten]

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


4.2 Rahmenfarben[Bearbeiten]

Anwendung beispielsweise: <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


5 Weblinks[Bearbeiten]