Griff ins Farbtöpfchen

Teil 2: Farbschemata für die Webseite

  1. Farbschemata für die Webseite
  2. Teil 2: Farbschemata für die Webseite

Color Scheme Generator 2

Das neben Kuler wohl bekannteste Werkzeug zur Erstellung von Farbschemata dürfte Color Scheme Generator 2 () sein.

Farbschemata für die Webseite

© Archiv

Color Scheme Generators 2 kann Auswirkungen verschiedener Farbfehlsichtigkeiten simulieren.

Ausgehend von einem Farbrad, das zwischen warmen und kalten Tönen unterscheidet, legen Sie eine Basisfarbe fest, zum Beispiel die des Logos, und wenden dann eine der gebräuchlichen Harmonieregeln (Monochrom, Kontrast, Triade, Tertiär oder Analogie) an. Ein Farbkreis zeigt sodann die zur ausgewählten Farbe passenden Kombinationen. Variationen wie unterschiedliche Abtönungen und Kontraste ergänzen den Werkzeugkasten. Per Dropdown können Sie Farbfehlsichtigkeiten simulieren. Leider lassen sich die gewonnenen Farbschemata nicht exportieren - die HEX-Werte müssen Sie schlicht abschreiben.

Color Schemer Studio

Auch im für Windows und Mac erhältlichen Color Schemer Studio () bildet das Farbrad den Ausgangspunkt. Alternativ steht eine Mosaikdarstellung zur Verfügung. Auf die Auswahl der Basisfarbe folgt das Aussuchen einer Harmonie-Regel, nach der die Software die passenden Farben ermittelt. Über Kreativitätslöcher hilft die Vorschlagsfunktion, die Sie über Suggest Colors aufrufen, mit automatisch erzeugten, ansehnlichen Kombinationen hinweg. Die Funktion Photoschemer entnimmt einem Bild dessen dominante Farben. Diese Funktion erweist sich als praktisch, wenn von vornherein feststeht, dass ein bestimmtes Bild auf die Website integriert werden soll, beispielsweise eine Collage im Kopfbereich.

Für Webentwickler bietet Color Schemer Studio mit seinem Quick-Preview besonders hohen Nutzen. Der Modus zeigt eine stark schematisierte Website mit Navigation, Text, Header und Content-Bereich an, die Sie per Drag and Drop mit den Tönen aus der zuvor erzeugten Palette einfärben. Die Website derart vor Augen zu haben erleichtert die praxisgerechte Auswahl stimmiger Farben deulich. Für optimale Lesbarkeit von Texten sorgt die Analyzer getaufte Funktion. Nach Eingabe einer Untergrundfarbe ermittelt sie automatisch die am besten lesbare Textfarbe. Mit der Color Blindness Simulation können Auswirkungen von Farbfehlsichtigkeiten wie die Rot-Grün-Schwäche erkannt werden.

Die fertigen Farben können Sie über die Favoriten-Funktion in Color Schemer Studio speichern und für die weitere Verwendung als HTML-Seite, CSS-Code, Grafik-Datei, als Photoshop- bzw. Illustrator-Palette und in diversen weiteren Formaten exportieren. Die Demo-Version arbeitet fünfzehn Tage lang kostenlos ohne Einschränkungen, danach sind 49,99 USDollar fällig.

Color Wheel Pro

Color Wheel Pro () ist eine Windows-Anwendung, die - ausgerüstet mit einem interaktiven Farbrad - passende Ergänzungsfarben zu einer Ausgangsfarbe liefert. Neben diversen klassischen Harmonie-Regeln lassen sich dazu auch eher assoziative Regeln wie Herbst, Frühling, Luxus, Dämmerung etc. heranziehen. Zudem können Sie eigene Zusammenstellungen als Grundlage für die automatisierte Farbsuche anlegen.

Color Wheel Pro bietet eine besonders ausgefeilte Vorschau, welche die Wirkung der Palette für verschiedene Medien auf dem Bildschirm simuliert, zum Beispiel für Websites, Briefpapiere, Produktverpackungen und vieles mehr. Die Previews basieren auf Flash und lassen sich mit entsprechenden Autorenwerkzeugen leicht um eigene Beispiele ergänzen - die Anleitung finden Sie in der Programmhilfe.

Ihre Palette können Sie im Photoshopund Illustrator-Format exportieren und die Previews als Bitmaps und JPEGs sichern. Color Wheel Pro kostet 39,95 US-Dollar. Eine kostenlose Testversion ist ebenfalls erhältlich, sie blendet jedoch bei manchen Ansichten einen nervigen Registrierungshinweis ein.

Barrierefrei für farbfehlsichtige User

Beinahe jeder zehnte Mann, aber nur ein Prozent der Frauen leidet an Farbfehlsichtigkeit. Typische Einschränkungen wie etwa die Rot- Grün-Schwäche, bei der die Betroffenen die beiden Farben kaum auseinanderhalten können, führen auch zu Schwierigkeiten bei der Bedienung von Websites, wenn deren Farbauswahl dies nicht berücksichtigt. Doch wie erkennt man, ob die eigene Farbauswahl eine Barriere aufbaut oder nicht?

Gewissheit bietet der Colorblind Web Page Filter unter . Nach kurzer Analyse einer Website oder einer Entwurfsgrafik zeigt er diese so an, wie Farbfehlsichtige sie sehen würden. Probleme in der Farbauswahl lassen sich so leicht erkennen.

Contrast Analyser 2.0 () nimmt sich eines verwandten Problems an, das auch Normalsichtige trifft. Das für Windows- und Mac kostenlos verfügbare Programm nimmt eine Kontrast-Bewertung für Normal- und Fehlsichtige nach den offiziellen W3C-Regeln vor und hilft so, schlecht lesbaren Text zu identifizieren.

Websichere Farben?

Häufig finden Sie in den Farbhelfern die Möglichkeit, websichere Farben auszuwählen. Diese Einschränkung stammt aus den Anfängen des WWW, als viele Monitore mit einer Farbtiefe von acht Bit angesteuert wurden. Auf diesen Systemen zeigen Browser nur 216 Farben an, was zu Farbverschiebungen führt, wenn man von der websicheren Farbenabweicht. Heute ist kaum noch ein Nutzer ohne True-Color-Farbeinstellung im Web unterwegs - deshalb muss man auf websichere Farben beim Design normaler Websites keine Rücksicht mehr nehmen. Ganz anders sieht dies aber bei Handys und Smartphones aus. Deren kleine Displays sind noch deutlich öfter an eine Obergrenze von 256 Farben gebunden. Für Entwickler mobiler Web-Anwendungen ist die Berücksichtigung der reduzierten Farbpalette deshalb immer noch Pflichtbestandteil der Farbschema-Entwicklung.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…