Kommentare 9

Watch out for Colors: Kreative Farb-Inspirationen für Webdesigner

Farben spielen eine sehr wichtige Rolle im Webdesign, obwohl sie vom Betrachter einer Webseite meist eher unterbewusst wahrgenommen werden. Die gewählten Farben für eine Webseite vermittelt eine Atmosphäre, und tragen somit genau wie das Logo, die gewählten Formen und Flächen und die Schriftarten zum Gesamtbild der Webseite bei. Daher ist es sehr hilfreich, sich vor der Umsetzung eines neuen Webdesigns ein Farbschema zu erstellen, und sich auch Gedanken über die Wirkung der Farben zu machen. Ich habe einige kreative Tipps, Inspirationen und Tools zusammengestellt, mit denen du schnell tolle Farbpaletten für deine Webdesigns erstellen kannst.

1. Farb-Inspirationen unterwegs sammeln

Um tolle Farb-Kombinationen, Logos, Schriften oder Texturen festzuhalten ist es praktisch, immer eine kleine Digitalkamera oder eine Handy-Kamera mit im Gepäck zu haben. So kannst du auch unterwegs Inspirationen für deine kreative Arbeit sammeln. Besonders viel Spaß macht das Fotografieren natürlich, wenn man auf einer Reise oder einem Städtetrip unterwegs ist. Aber auch im Alltag lassen sich immer wieder tolle Kleinigkeiten und schöne Farb-Kombinationen entdecken.

Hier einige Beispiele, wie du Farb-Inspirationen für Webseiten in deiner Umwelt sammeln kannst.

Farben Inspirationen Webdesign
Der mit Moos bedeckte Stein bietet eine sehr angenehme Grau / Rot / Braun Palette.

Farben Inspirationen Webdesign
Diese Blume hat nicht nur eine tolle Form, sondern auch spannende Farben zwischen Grün, Blau und Grau.

Farben Inspirationen Webdesign
Das vegetarische Sushi-Set ergibt die eine schöne Farb-Kombination aus Grün-, Braun- und Rot-Tönen.

2. Farb-Inspirationen im Internet

Neben der Inspiration im Alltag findest du natürlich auch online jede Menge kreativen Input. Da es im Internet aber sehr leicht passieren kann, dass du dich auf Grund der Fülle an Inspirationen nicht mehr entscheiden kannst, finde ich es immer wichtig nicht zu viele verschiedene Bilder oder Webseiten auf einmal anzuschauen.

Webseiten, auf denen du kreative Farben und Farb-Kombinationen sammeln kannst, gibt es natürlich jede Menge. Ich persönlich schaue derzeit besonders gerne bei FFFFOUND! oder bei FlickrDesign nach schönen Farben und Farb-Inspirationen. Indem du dir die Bild-URL deiner Favoriten speicherst, kannst du dann mit Hilfe von praktischen Online Farb-Tools schnell ein Farbschema von einem Bild erstellen.

3. Vom Foto zur Farbpalette

Um von einem Foto schnell eine passende Farbpalette zu erstellen, kannst du praktische Online Farb-Tools wie ColorSuckr oder den Color Palette Generator nutzen.

3.1. Colorsuckr

Mit ColorSuckr kannst du entweder eine Bild-URL einfügen, um eine Farbtabelle von einem bestimmten Foto zu bekommen oder du kannst einen Suchbegriff auswählen, um eine Auswahl an Flickr-Fotos zu erhalten.

Farben Inspirationen Webdesign
So wird aus deinem Designerstuhl mit einem Klick eine tolle Farbpalette für Webdesigns.

Alle Farben der Palette kannst du dann frei auf der Webseite verschieben, um die unterschiedlichen Kombinationen zu vergleichen. Die Farbangaben kannst du dabei aus- oder einblenden.

Farben Inspirationen Webdesign
Bei ColorSuckr kannst du deine Farben mit Drag’n’Drop frei auf der Webseite anordnen.

Als weiteres Feature kannst du dir zu deiner Lieblingsfarbe passende Farbschemen von der Webseite ColorLovers anzeigen. Gefällt dir eines der Farbschemen kannst du dir das Original des Farbschemas (inklusive aller Farb-Werte) bei ColorLovers anschauen und dort abspeichern.

Möchtest du die Farbpalette deines Fotos speichern, kannst du dies bei ColorSuckr entweder über RSS, JASON oder als XML-Datei. Außerdem kannst du eine .ASE Swatch-Datei deines Farbschemas für Adobe herunterladen oder dein Farbschema sichern, indem du dir den Permalink für deine Palette speicherst.

Farben Inspirationen Webdesign
Bei ColorSuckr kannst du Farbschemen von ColorLover für deine einzelnen Farben anzeigen lassen oder deine generierte Farbpalette in unterschiedlichen Formaten speichern.

Um Bild-URLs nicht immer extra kopieren und einfügen zu müssen, kannst du dir auch das Colorsuckr Firefox-Addon installieren.

3.2. Color Palette Generator

Ein weiteres Online Farb-Tool mit einer ähnlichen Funktion wie ColorSuckr ist der Color Palette Generator. Bei dem Tool kannst du ebenfalls die URL eines Fotos eingeben, und auf den Farben des Fotos eine passende Farbtabelle generieren. Allerdings gibt es außer der Farbtabelle keine weiteren Optionen und die Farbwerte müssen bei diesem Tool manuell abspeichert werden.

Farben Inspirationen Webdesign
Eine generierte Farbpalette von Color Palette Generator.

4. Über die Wirkung von Farbe

Um eine Farbtabelle für eine Webseite beurteilen zu können, ist es wichtig sich über die Wirkung der gewählten Farben Gedanken zu machen. Ist die Farbpalette aus kühlen oder warmen Farben zusammengestellt? Wie harmonieren die Farben untereinander? Ist die Mischung aus hellen und dunklen Farbtönen ausgewogen?

Dezentere, gemischte Farbtöne eignen sich meist am ehesten für den Webseiten-Hintergrund und für größere Farbflächen. Markante, grellere Farben sollte man dagegen eher dezent einsetzen. So können die Farben im Kontrast die größte Wirkung erzielen.

Außerdem ist es ratsam eine Farbtabelle nicht sofort zu beurteilen, sondern sich wenn möglich über einige Tage mit den Farben »anzufreunden«. Oft passiert es nämlich, dass man anfangs von einer Farb-Kombinationen begeistert ist und nach einer Weile erkennt, dass man sich bereits satt gesehen hat oder die Farben sich doch nicht so gut wie gedacht, für den Einsatz im Webdesign eignen.

5. Tipps zum Weiterlesen

Wenn du dich noch näher mit dem Thema Farben, deren Wirkung und den Einsatzmöglichkeiten im Webdesign auseinandersetzen möchtest, bieten folgende Artikel jede Menge hilfreichen Lesestoff.

Wie gefallen dir die Tools und Tipps zur Farb-Inspiration? Und wie findest du passende Farbschemen für deine Webseiten? Über dein Feedback und weitere Empfehlungen freue ich mich sehr!

9 Kommentare

    • Hallo Sabiene,

      vielen Dank für deinen Kommentar :-) Ja, ich habe das Colorsuckr-Addon auch schon bei Firefox installiert. Leider gibt es glaube ich bisher noch keine Google Chrome Extension. Aber vielleicht kommt das ja auch noch in der Zukunft :-)

      Viele Grüße,
      Ellen

    • Hallo Charlotte,

      vielen Dank für deinen Kommentar und deinen Tipp zu Kuler. Stimmt, Kuler ist auch ein klasse Tool zur Farbfindung und Inspiration. Vielen Dank für diese Ergänzung :-)

      Viele Grüße,
      Ellen

Schreibe eine Antwort