6 geniale Tools für die Suche nach den passenden Website-Farben

Farben sind aus unserem Leben nicht wegzudenken. Wie öde und trist wäre doch alles, wenn es keine Farben gäbe. Warum?
Farben haben eine bestimmte Wirkung auf unsere Psyche und unseren Körper. Sie erzeugen Emotionen und Stimmungen, erregen Aufmerksamkeit und hinterlassen einen direkten visuellen Eindruck.

Das gilt in allen Lebensbereichen, ob in der Natur, zu Hause oder in der Arbeit. Die Energie der Farben überträgt sich direkt auf uns und bestimmt unsere Stimmung und unser Verhalten.

Was haben Farben mit deiner Website zu tun?

Farben haben eine psychologische Wirkung und können gezielt eingesetzt werden, um bestimmte Zielgruppen zu erreichen, aber auch, um bestimmte Reaktionen und Gefühle hervorzurufen. Sie tragen dazu bei, eine Marke oder Identität zu schaffen und sorgen für einen gewissen Wiedererkennungswert.

Daher ist es enorm wichtig, dass du dir vor der Erstellung deiner Website überlegst, welche Farben zu dir, zu deinem Thema, deiner Branche und deiner Zielgruppe passen und was du mit diesen Farben erreichen willst.

Website-Farben sollten also:

• zu deinem bestehenden Corporate Design (Logo, Flyer, Visitenkarten) passen
• einen gewissen Wiedererkennungswert haben
• zu dir, deinem Thema, deinem Business passen
• sich an deiner Zielgruppe orientieren
• durchgängig in dein Webdesign einfließen

Wenn du mehr über die Wirkung der einzelnen Farben erfahren willst, empfehle ich dir diesen tollen und ausführlichen Artikel auf webdesign-journal.de.

Für welche Bereiche werden Website-Farben gebraucht?

In erster Linie solltest du deine Primärfarbe aus deinem Logo oder Corporate Design verwenden. Darüber hinaus brauchst du weitere Farben für Texte, Hintergründe und bestimmte Aktionen.

Hier nochmal zusammengefasst, welche Farben du brauchst:

• 1 primäre Farbe, basierend auf deinem Thema, deinem Logo, deinem Corporate Design
• 1 bis max. 2 Akzentfarben für Buttons, Icons, Links und Navigation (Menü)
• einen dunklen Grauton für den Text (kein reines Schwarz)
• dezente Farben für Hintergründe und Schatten (Weiß, Grautöne oder Primär-/Akzentfarben in hellen Nuancen)
• eventuell eine Signalfarbe um spezielle Dinge zu kommunizieren, um Aufmerksamkeit zu erregen oder bestimmte Aktionen auszulösen

Worauf du bei der Farbwahl achten solltest:

Um eine gute Lesbarkeit der Texte, speziell für Sehbehinderte, zu erreichen (Thema Barrierefreiheit), solltest du auf einen ausreichenden Kontrast achten. Beim Text solltest du auf reines Schwarz oder reines Weiß generell verzichten.

Einige der Tools, die ich dir hier vorstelle, verfügen auch über einen Kontrastchecker. So kannst du schon vorab testen, ob du dich im barrierefreien Bereich bewegst. Auch ein wichtiger Punkt in Sachen Suchmaschinenoptimierung.

Orientiere dich nicht an den aktuellen Farbtrends oder deinen persönlichen Vorlieben, sondern achte auf ein nachhaltiges Design, das zu deiner Marke passt. Ein Zuviel an Farben macht deine Website unübersichtlich und überfordert den Besucher.

Je nach Kulturkreis oder auch nach Person, können Farben unterschiedlich wahrgenommen werden. Daher solltest du darauf achten, wie deine Zielgruppe die gewählten Farben interpretiert.

Wie findest du die richtigen Farben für deine Website?

Neben zahlreichen Profi-Tipps und Büchern, gibt es für Website-Farben tolle Online-Tools, die die Suche nach der richtigen Farbkombination enorm erleichtern. 6 dieser Tools möchte ich dir hier vorstellen.

Die Tools haben unterschiedliche Ansätze. Mit manchen Tools kannst du bei Null starten, also wenn du noch keine existierenden Farben hast. Andere helfen dir, bereits vorhandene Farben mit weiteren passenden Farben zu ergänzen.

Bei den vorgeschlagenen Farbpaletten solltest du maximal 2-3 Farben auswählen oder helle Farben aus der Palette nur für Hintergründe verwenden.

Tool 1: Picular

Picular basiert auf der Bildersuche von Google und wird auch Google der Farben genannt.

Und so funktioniert es: du gibst einfach einen Suchbegriff ein, der zu deinem Websitethema passt und schon bekommst du zahlreiche Farbvorschläge.

Diese Vorschläge basieren auf den Bildern, die Google dir bei Eingabe des Begriffs in die Suchmaschine anzeigen würde.

Du kannst dir die Bilder sogar anzeigen lassen, indem du mit der Maus auf das kleine Bildersymbol im Farbfeld klickst.
Mit einem Klick auf die kleine Pinnadel kannst du dir die Farbe oben in einer Palette zum Merken und Teilen anheften.

Täglich neue Farbinspirationen findest du auf dem Instagram-Profil von Picuar.

Tool 2: Coolors

Coolors ist ein Farbpalettengenerator, der dir viele Optionen bietet, die richtigen Farben zu finden.

Du kannst dir Farbpaletten generieren lassen, die du verändern, speichern und teilen kannst. Du kannst aus tausenden bereits fertigen Farbpaletten auswählen. Du kannst Bilder hochladen und Coolors erstellt dir eine Farbpalette basierend auf deinem Bild.

Sehr hilfreich finde ich hier auch den Contrast Checker, der dir zeigt, ob deine gewählte Textfarbe auf einem farbigen Hintergrund noch gut lesbar ist. Mit dem Color Picker bekommst du außerdem ein sehr hilfreiches Tool, das dir tiefergehende Informationen zu einer bestimmten Farbe bietet wie beispielsweise passende Kombifarben, Farbvariationen oder auch Barrierefreiheit (Lesbarkeit).

Farbpalettenvorschläge findest du auch auf Instagram. Außerdem gibt es Coolors als App für Android und iOS in einer kostenlose Version oder  einer Bezahlversion, um mehr Paletten speichern zu können und für eine werbefreie Nutzung.

Tool 3: Colorhunt

Colorhunt bietet dir ebenfalls eine große und schöne Auswahl an Farbpaletten. Du kannst hier nach verschiedenen Farben oder Collections (Themen) suchen. Deine Lieblingspaletten kannst du in einer eigene Collection speichern. Jede Palette kann als Bild heruntergeladen oder per Link verschickt werden.

Tool 4: colorhexa

ColorHexa ist ein kostenloses Farbtool, das dir ausführliche Informationen zu jeder beliebigen Farbe liefert.

Gibst du einen bestimmten Farbton ein, generiert dir das Tool passende Farbpaletten (komplementäre, analoge, usw.), aber auch Farbalternativen und Schattierungen. Darüber hinaus bekommst du Informationen wie die gewählte Farbe als Text oder als Hintergrund wirkt und wie sehbehinderte Menschen diese Farbe wahrnehmen.

Tool 5: Adobe Color

Adobe Color ist ein sehr mächtiges Tool zur Farbfindung.
Du kannst hier nach Farben, Stimmungen und Stichwörtern suchen und Adobe präsentiert dir eine riesige Auswahl an Fotos und Farbpaletten. Unter Trends findest du Farbtrends verschiedener Branchen wie Mode, Architektur, Reisen usw.

Wie auch bei den zuvor genannten Tools, kannst du hier Farbpaletten nach Wunsch erstellen oder ein Bild hochladen. Erwähnenswert ist hier die neue Option, ein Kontrastprüfung von Text und Hintergrund nach WCAG Kriterien für barrierefreie Inhalte durchführen zu lassen (Web Content Accessibility Guidelines).

Tool 6: Colormind

Colormind ist ein Farbschema-Generator, der Deep Learning verwendet. Er kann Farbstile aus Fotos, Filmen und populärer Kunst lernen. Über den Button „Generate“ kannst du immer wieder neue Farbpaletten generieren. Die Farben, die dir gefallen, kannst du per Klick auf das Schlosssymbol fixieren.

Wenn du bereits Farben aus deinem Corporate Design hast, kannst du diese gleich zu Beginn eingeben und fixieren. 

Viel Spaß beim Ausprobieren!