Farben spielen im Webdesign und im Branding eine zentrale Rolle. Die gewählten Farben müssen zu Ihrem Unternehmen und zur angestrebten Zielgruppe passen. Allerdings ist das Finden der passenden Farbpalette gar nicht so einfach.
Auf dem Markt gibt es mittlerweile zahlreiche Online-Tools, die dabei behilflich sein können. “Coolors” ist ein solches Programm. Coolors kann man sich entweder als App aufs Smartphone laden oder auf dem Computer als Web-App benutzen (https://coolors.co). Um die erstellten Farbpaletten zu benennen und speichern, lohnt es sich, einen kostenlosen Account zu erstellen.
Nützliche Tipps aus der Farbenlehre – Grundlagen
Vorgängig machen wir einen kleinen Abstecher in die Farbenlehre, um die Wirkung der Farben besser zu verstehen. Wahrscheinlich können Sie sich noch an den Farbkreis in der Schule erinnern. Und vielleicht sagt Ihnen der Begriff «Primärfarben» (die drei Hauptfarben Gelb, Rot und Blau) auch noch etwas.
Mischt man zwei dieser Primärfarben zusammen, entstehen die Sekundärfarben.
Mischt man eine Primär- mit einer Sekundärfarbe, erhält man die Tertiärfarben.
Eine komplementäre Farbpalette erhält man, wenn man sich für zwei gegenüberstehende Farben entscheidet.
Das analoge Farbschema entsteht, wenn man sich in der selben Farbfamilie bewegt – das heisst man pickt sich nebeneinanderstehende Farben raus, die miteinander «verwandt» sind.
Bei einer monochromen Farbpalette definiert man einen Farbton und verändert diesen durch die Helligkeit oder Sättigung.
Um diese Nuancen richtig unterscheiden zu können, sehen wir uns das nächste Bild an. Sie sehen – ausgehend von den reinen Farben des Farbkreises – wie sich die Farben verhalten, wenn man etwas Weiss oder Schwarz dazu mischt.
Es entstehen verschiedene Schattierungen eines Farbtons, man kann unterschiedlich ausgeprägte Tönungen hervorrufen oder die Sättigung einer Farbe beeinflussen.
Wenn man mit Farben arbeitet, ist die Umgebung und damit der Kontrast ebenfalls ein wichtiger Faktor. Sehen wir uns das nächste Bild mit den zwölf Kreisen an.
Die drei inneren, kleineren Kreise habe jeweils dieselbe Farbe – das einzige was sich ändert, ist die Farbe der grossen Kreise im Hintergrund. Allein durch diese Farbe erhält man ganz unterschiedliche Kontraste und erzielt andere Wirkungen auf den Betrachter.
Je nach Hintergrund wirken die kleineren Kreise heller, blasser oder man nimmt sie gar nicht mehr gross wahr. Die Kontrastgebung ist zum Beispiel ein wichtiger Bestandteil beim Erstellen einer gut lesbaren und benutzerfreundlichen Webseite und sollte deshalb unbedingt mit einbezogen werden.
Farbpaletten erstellen mit Coolors
Zurück zu unserer Coolors-App, welche wirklich «coole» Funktionen bietet, um sich eine passende Farbpalette zusammen zu stellen. Der kurze, theoretische Exkurs in die Welt der Farben, hilft nun beim Erkunden des Tools.
Coolors ist ein nützlicher und anwenderfreundlicher Farbpaletten-Generator mit einem sehr breiten Funktionsumfang. Es lassen sich aus eigenen Bilder passende Farbpaletten und Collagen erstellen, man hat die Möglichkeit ausgehend von einer bestimmten Farbe entsprechende Kombinationen zusammenzustellen oder man lässt sich ganz vom Zufallsprinzip leiten.
Auf der Startseite von Coolors gibt es zwei Varianten. Entweder man inspiriert sich von bereits existierenden Farbkombinationen und klickt auf «Explore trending palettes» um diese zur Auswahl stehenden Farbpaletten zu erkunden oder man erstellt sich gleich eine eigene Farbpalette durch Klick auf den blauen Button «Start the generator!». Mit der «Leertaste» kann man nun x-beliebig klicken und es erscheinen immer neue per Zufall generierte Paletten.
Gefällt einem eine Farbe, kann man diese mit dem «Schloss» in der Farbe sichern und es ändern sich beim Klick auf die Leerschlagtaste nur die restlichen Farben. Dies kann man jetzt mit jeder weiteren Farbe machen bis man die fertige Palette vor sich hat.
Existiert bereits eine vordefinierte Farbe in Ihrem Unternehmen, zum Beispiel vom Logo, macht es Sinn diese gleich zu Beginn einzugeben, damit die Farbpalette um dieses Farbfeld gebaut werden kann. Klicken Sie hierfür einfach auf die Buchstaben-Zahlenkominbation und geben Sie Ihren Farbcode da ein.
Wenn zum Beispiel schon ein passendes Foto für Ihren Branding-Auftritt vorhanden ist, können Sie Ihre Farbpalette auch anhand von diesem Bild ableiten. Entweder Sie lassen sich direkt eine passende Collage zusammenstellen (Create a collage) oder Sie laden bei dem «Fotoapparat-Icon» ebenfalls Ihr eigenes Bild hoch und können nun mit dem «Cursor» die gewünschten Farben zusammenstellen.
Farbpalette in Coolors auf Ihre Zielgruppe ausrichten
Haben Sie die Palette zusammen, finden aber die Farben wirken etwas zu knallig, können Sie nun bei dem «Sonnen-Icon» weitere Schritte ausprobieren. Hier lässt sich zum Beispiel ganz einfach die Helligkeit, Sättigung oder die Farbtemperatur der ganzen Auswahl ändern.
Und dies sind ja bekanntlich wichtige Aspekte, im Zusammenhang mit Ihrer Zielgruppe. Denn wie wir gelernt haben im Beitrag Farb-Psychologie der Zielgruppen, sprechen die warmen Farben eher die «Harmonischen» an und die «Genauen» bevorzugen eine kühlere Farbpalette.
In Bezug auf die Zielgruppe haben wir auch von den «Komplementärfarben» und einer «monochromen» Farbpalette gesprochen. Unter dem Navigationspunkt «More» (die drei Punkte ganz links) befindet sich der Link «Generate methode», wo sich genau solche Farbkombinationen erstellen lassen.
Klicken Sie sich da doch einfach mal durch und probieren Sie die verschiedenen Punkte aus – Sie werden die in der obenstehenden Theorie erwähnten Begriffe wiedererkennen und Anschauungsbeispiele dazu erhalten.
Ein ebenfalls sehr hilfreiches Werkzeug ist das «Teilen». Denn nachdem Sie genug experimentiert und sich für eine passende Farbpalette entschieden haben, können Sie diese jetzt per Link direkt an WebSENNsation zur Ansicht leiten.
Fazit: Farbpalette erstellen mit Coolors
Coolors ist definitiv eine nützliche Web-App um passende Farben für Ihr Unternehmen zu finden und den Prozess der Farbdefinition zu beschleunigen. Sei es als Ideenfindung für ein Farbkonzept oder gleich als definitive Vorlage für das nächste Projekt. Am besten probieren Sie es gleich aus, denn es gibt viele weitere Funktionen, die Sie eigenständig erkunden können.