los (1K) 4.Farben verwenden

Auf "websichere" Farben und gute Lesbarkeit achten

Durch die Verwendung passender, unterschiedlicher Farben kann die Wirkung einer Botschaft an den Leser verstärkt werden. In der Farbauswahl sollte man im Regelfall auf die Palette der "websicheren Farben" zurückgreifen. Doch in der Auswahl sollte auch die gute Lesbarkeit des Textes bedacht werden.

Einführung | Websichere Farben | Farbwahl | Farbtest

Wir brauchen: Einen Raum mit Computer


 

Einführung

Das ist eine allgemeine Einführung in die Verwendung von Farben auf Webseiten.

Mehr darüber, wie du Farben für Text und Hintergründe mit CSS programmierst in 7. HTML: CSS verwenden

 

"Websichere" Farben

16 VGA Farben
Benannte Farben (Die 16 VGA-Farben)
#000000 = black #808080 = gray
#800000 = maroon #FF0000 = red
#008000 = green #00FF00 = lime
#808000= olive #FFFF00= yellow
#000080 = navy #0000FF = blue
#800080 = purple #FF00FF = fuchsia
#008080 = teal #00FFFF = aqua
#C0C0C0 = silver #FFFFFF = white

"Die VGA-Palette ist der kleinste gemeinsame Nenner aller VGA-kompatiblen Grafikkarten und Bildschirme. Für die 16 Farben der VGA-Palette sind in HTML und CSS auch die vordefinierten Farbnamen erlaubt.

Die Beschriftungen zeigen, welchen in HTML und CSS erlaubten Farbnamen die jeweiligen Farben entsprechen. Die entsprechenden Hexadezimalnotationen sind als zusätzliche Information und zur Kontrolle angegeben."

Angabe nach Stefan Münz, dem Autor von SelfHTML: http://selfhtml.teamone.de/diverses/farbpaletten.htm

216 Websichere Farben und ihre hexadezimalen Wertangaben
RGB 00 51 102 153 204 255
# 00 33 66 99 CC FF

Die websichere Palette setzt sich aus Farben zusammen, bei denen Rot, Grün und Blau auf folgende Werte gesetzt sind:

Bei nur sechs unterschiedlichen Werten an drei Stellen ergibt sich die Zahl von 36 = 216 möglichen Kombinationen. Dies sind die 216 "websicheren" Farben.

Die Tabelle unten zeigt einen Überblick aller möglichen Farbkombinationen und die ihnen jeweils zugeordnete hexadezimale Farbangabe.
Bob Stein von www.visibone.com ist der Autor dieser Zusammenstellung.

FFFFFF CCCCCC 999999 666666 333333 000000 FFCC00 FF9900 FF6600 FF3300
99CC00 CC9900 FFCC33 FFCC66 FF9966 FF6633 CC3300 CC0033
CCFF00 CCFF33 333300 666600 999900 CCCC00 FFFF00 CC9933 CC6633 330000 660000 990000 CC0000 FF0000 FF3366 FF0033
99FF00 CCFF66 99CC33 666633 999933 CCCC33 FFFF33 996600 993300 663333 993333 CC3333 FF3333 CC3366 FF6699 FF0066
66FF00 99FF66 66CC33 669900 999966 CCCC66 FFFF66 996633 663300 996666 CC6666 FF6666 990033 CC3399 FF66CC FF0099
33FF00 66FF33 339900 66CC00 99FF33 CCCC99 FFFF99 CC9966 CC6600 CC9999 FF9999 FF3399 CC0066 990066 FF33CC FF00CC
00CC00 33CC00 336600 669933 99CC66 CCFF99 FFFFCC FFCC99 FF9933 FFCCCC FF99CC CC6699 993366 660033 CC0099 330033
33CC33 66CC66 00FF00 33FF33 66FF66 99FF99 CCFFCC CC99CC 996699 993399 990099 663366 660066
006600 336633 009900 339933 669966 99CC99 FFCCFF FF99FF FF66FF FF33FF FF00FF CC66CC CC33CC
003300 00CC33 006633 339966 66CC99 99FFCC CCFFFF 3399FF 99CCFF CCCCFF CC99FF 9966CC 663399 330066 9900CC CC00CC
00FF33 33FF66 009933 00CC66 33FF99 99FFFF 99CCCC 0066CC 6699CC 9999FF 9999CC 9933FF 6600CC 660099 CC33FF CC00FF
00FF66 66FF99 33CC66 009966 66FFFF 66CCCC 669999 003366 336699 6666FF 6666CC 666699 330099 9933CC CC66FF 9900FF
00FF99 66FFCC 33CC99 33FFFF 33CCCC 339999 336666 006699 003399 3333FF 3333CC 333399 333366 6633CC 9966FF 6600FF
00FFCC 33FFCC 00FFFF 00CCCC 009999 006666 003333 3399CC 3366CC 0000FF 0000CC 000099 000066 000033 6633FF 3300FF
00CC99 0099CC 33CCFF 66CCFF 6699FF 3366FF 0033CC 3300CC
00CCFF 0099FF 0066FF 0033FF


TIP:
Diese Tabelle kann man als Farbwähler für HTML-Seiten verwenden. Einfach den Farbcode mit der Maus markieren, in die Zwischenablage kopieren, im Farbwähler unten in einem Eingabefeld einsetzen, Knopf drücken und als HTML-Seite exportieren.
Oder direkt in den Quelltext einer HTML-Seite einsetzen:
<body style="background-color:#CC9966">

Noch mehr Farbmuster mit der browsersicheren Palette sind bei www.visibone.com für viele populäre Grafikpakete frei erhältlich.

Websichere Farben, nach Reinheit und Grauabstufungen sortiert
colorDavid_hb24 (15K)

"Nur 216 unterschiedliche Farben sind allgemein verbreitet und verdienen daher den Namen: 'websicher'.

In den drei Tabellen wurden diese Farben benutzerfreundlich angeordnet. Die 152 Farben in der ersten Tabelle sind reines Rot, reines grünes und reines Blau sowie Schwarz und Weiss; darüber hinaus noch alle Mischfarben mit den jeweils benachbarten reinen Farben. Das sind die "bunten" Farben. Die zweite Tabelle wird mit 56 mittleren Kontrastfarben gefüllt. Diese Farben tendieren leicht zu Grau. Die dritte Tabelle besteht aus den restlichen 8 Farben die noch stärker nach Grau tendieren."

colorDavid_mb24 (6K) colorDavid_lb24 (1K)

Informationen und Tabellen von der niederländischen Seite http://www.mensinghe.nl/colorDavid/, übersetzt aus dem Englischen. Sie dürfen kopiert und auf anderen Seiten weiterverwendet werden, solange dieser Hinweis intakt bleibt.

 

Farbenwahl und Lesbarkeit

Lesbarkeit Schriftfarbe Hintergrundfarbe
1. Stelle schwarz gelb
2. Stelle grün weiss
3. Stelle rot weiss
4. Stelle blau weiss
5. Stelle weiss blau
6. Stelle schwarz weiss
7. Stelle gelb schwarz
8. Stelle weiss rot
9. Stelle weiss grün
10. Stelle weiss schwarz
11. Stelle rot gelb
12. Stelle grün rot
13. Stelle rot grün

Die Farbwahl bei Schriften spielt eine große Rolle für die Lesbarkeit.
Wegen des mangelnden Hell-Dunkel- und Farb-Kontrastes sollten "Ton in Ton"-Farben, z.B. hellorange auf gelb generell gemieden werden; es sei den man beabsichtigt die Erfindung einer Geheimschrift für besonders kryptischen Text, eine extrem sadistische Foltermethode für verhasste Leser oder man arbeitet als geschäftstüchtiger Augenarzt an der Erweiterung seines Patientenstamms.

Nebenstehende Tabelle ist das Ergebnis von Untersuchungen zu diesem Thema: beim Darüberfahren mit der Maus verändern sich zu Demonstrationszwecken Text- und Hintergrundfarbe dieses Dokuments.

Erstaunlicher Weise belegt die Kombination schwarz auf weiss dabei nur einen Platz im Mittelfeld und man fragt sich, wie konnten Generationen von Buchdruckern und Verlegern nur so irren...

Die Kombinationen von Rot mit Grün auf den unteren Plätzen können dagegen nich groß verwundern - Die Rot/Grün-Fehlsichtigkeit ist bei uns relativ weit verbreitet.

Abseits aller wissenschaftlichen Untersuchungen ist das Farbempfinden bei uns Menschen doch wohl recht verschieden. Der ein oder andere mag darum wohl manche dieser Kombinationen nach seinem Empfinden anders anordnen.

 

Farbwähler: Farbkombinationen testen

Mit diesem Farbwähler kannst du eigene Farbkombinationen testen, indem du die Farben für Hintergrund, Text und Links aus der Palette wählst.
Vorher eine Wahltaste drücken.
Zur Feinabstimmung kannst du über die Eingabefelder unten über 16 Millionen Farbnuancen erzeugen.

Ein Druck auf die Taste ganz unten erzeugt eine neue Seite mit deinen aktuellen Farbeinstellungen - wahlweise mit CSS oder in reinem HTML.


Weiter geht's:


Erste Schritte | Projektordner anlegen | Seite teilen | nach oben