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 | FarbtestWir 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
| #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
"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."
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