Harmonische Farbkombinationen? Der Natur ins Farbspektrum schauen

Das Auge isst mit. Und das ist durchaus nicht nur im kulinarischen Sinn zu verstehen. Die tollste Website, der beste Flyer können verdorben werden, wenn die Farb-Sprache nicht stimmt, die Farben nicht harmonieren.

Ja, ja, Form follows Function – der Inhalt und die Funktionalität sind viel wichtiger als die Optik. Grundsätzlich stimmt das natürlich. Trotzdem geben Unternehmen nicht umsonst ein Vermögen fürs Design vor der Einführung neuer Produkten oder bei der Entwicklung des eigenen Corporate Design aus.

Und auch klar: Es muss nicht jeder alles können, fürs gute Aussehen von was auch immer gibt es Profis: Grafiker und Designer. Die ich immer einschalten würde, wenn es um Wichtiges geht.

Aber manchmal will man ja auch selbst was tun. Oder Basisideen finden für die Profis. Und das ist gar nicht immer so einfach, denn ein sicheres Gespür zum Beispiel für gute Farbkombinationen hat nicht jeder. Und das betrifft durchaus nicht nur Menschen mit einer organisch oder genetisch bedingten Farbenfehlsichtigkeit.

Aber – Internet sei Dank – wir müssen ja gar nicht mehr alles alleine können. Da gibt's Tools und alles, was das Farbkombi-Herz begehrt, frei Haus. Ha! Man muss es nur kennen. Hier ein paar Tipps für das Herausknifteln gelungener Farbkombinationen:

Anlass für diesen Artikel war dieser Beitrag bei Dr. Web: Tierfotografien als Farbinspiration: 50 brillante Fotos und Farbschemata. Dessen Titel aber verspricht zumindest dem Laien etwas mehr als sein Inhalt bietet.

Was zum Titel passt: Es sind 50 wirklich wundergroßartige (!) Tierfotos zu sehen.

Und was auch stimmt: Bilder aus der Natur bilden zu 99,5 Prozent Vorlagen für absolut harmonische Farbkombinationen. In der Natur gibt es nämlich nahezu keine Farb-Disharmonien. Das gilt natürlich nur für 'naturreine' Bilder. Ein Tiger vor einer mit knallbunten Graffiti-Wand ist kein gültiges Beispiel für diese Regel.

Wenn ihr also Inspirationen sucht, guckt euch Naturbilder an.

Hier findet ihr zum Beispiel 15 Bilddatenbanken, um gratis Stock-Fotos zu bekommen oder eben zur Inspiration.

Was in dem Artikel leider nicht beschrieben ist: WIE ihr aus den inspirativen Fotos tatsächlich die Farbschemata herausfinden könnt. Das geht nämlich nur 'um die Ecke' sprich, mit zusätzlichen Tools. Na, dieses WIE reiche ich hier mal eben nach. Da gibt's mehrere Möglichkeiten:

1. ColorSuckr
Mein Lieblingstool zum Herausfiltern von Farbschemata aus Fotos- Beispiele siehe oben. Super easy: Foto von eurem Rechner hochladen oder aus dem Netz fischen, URL eingeben und – zack – zeigt euch ColorSuckr die 9 wichtigsten Farben in dem Foto an.

Von jeder Farbe werden angezeigt:

• der Hexadezimal-Code, der für HTML gebraucht wird (z. B. Hex: #5D2C0F),
• der Hex-Code der nächstliegenden Web-sicheren Farbe – davon gibt's ja nur 256 – (z. B. Web safe: #663300) und
• die Rot-Gelb-Blau-Werte für die Farbeinstellungen für Bilder im RBG-Farbraum, also dem, der für Farbeinstellungen zur Bildschirmdarstellung benötigt wird (z. B. R:93 G:44 B:15)

Ganz oben rechts, winzig klein auf dem Ergebnisbildschirm könnt ihr übrigens noch wählen, ob ihr Foto und Farbschema auf hellem oder dunklem Grund abgebildet haben möchtet. Wirkt ja doch sehr verschieden.

Bei Naturfotos passen in der Regel alle neun Farben gut zueinander. Pickt euch die raus, die euch am besten gefallen und bastelt damit eure Website, euer Blog, euren Flyer, euren Twitter-Hintegrund – was auch immer.

Für Firefox-Nutzer ist das ganze noch einfacher: ColorSuckr-AddOn installieren, dann könnt ihr von jedem Foto mit Rechts-Klick darauf das Farbschema anzeigen lassen.

2. Google-Bildersuche eingrenzen
Um nicht von Bildern erschlagen zu werden, könnt ihr bei der Google-Bildersuche übrigens seit einiger Zeit die Suche gleich auf eine bestimmte Grundfarbe hin einschränken.

3. Colr.org
Sehr cool finde ich auch colr.org. Bild entweder vorschlagen lassen oder hochladen, Mouseover hebt die verschiedenen Farben hervor. Oben links könnt ihr euch einzelne Farben, oben rechts selbst zusammengestellte Farbschemata anzeigen lassen.

Sehr praktisch: Ihr könnt euch das Schema gleich als .aco-Datei speichern. Heißt, ihr könnt das Schema direkt als Farbfelder nach Photoshop importieren.

4. ColorZilla
Und dann noch ein Firefox-AddOn, das ich fast täglich nutze: Den ColorZilla. Liegt immer nett klein unten in der Statusleiste. Ein Klick drauf und er zeigt euch jede Farbe und ihre Werte (Hex und RGB) an, über die ihr mit der Mouse gerade im aktiven Browserfenster fahrt.

Es gibt noch unzählige andere Tools, die euch bei der Farbauswahl helfen. Und natürlich fast genauso viele Blogger, die sie für euch sammeln ;-) Hier ein paar Beispiele:

Funkygog: Farben rühren, mischen und malen

Bestdesigntuts: 20+ Color Tools for Designers

~ 30 bei Dotconcepts: Free Color Tools and Resources for Web Designers

Reencoded: 20 Amazingly Easy to Use Color Tools for Designers

Ach, und wo wir gerade beim Designen sind: Wie ihr schicke Streifen-Hintergründe mit dem Stripe-Generator hinbekommt, hab ich euch ja schon erzählt: Blogparade: Pimp your Page.

Thematisch passende Artikel:

• 8 Blindtextgeneratoren
• 25 tolle Tools für Schriften-Begeisterte
• Blogparade: Pimp your Page
• 20 Tools zur Keyword-Recherche
• 500 Logo-Vorlagen als offene Photoshop- oder Illustrator-Dateien
• Phishing-Risiko durch Kurz-URLs
• Linktipp: 60+ Beautiful Logo Design Tutorials And Resources
• DAS Standardwerk für Photoshop CS4

Tags: Design, Farben, Tools, Website