Spielend leicht passende Farbkombinationen finden

Oftmals hat man für seine Website mindestens eine Farbe vorgegeben, weil sie im Logo vorkommt. Doch um Akzente zu setzen, braucht es weitere Farben. Wie findet man passende Farben und Farbkombinationen für eine eigene Farbpalette? Und wie bekomme ich stimmige Farben anhand eines Bildes?

In diesem Artikel zeige ich einige Wege auf, wie man sich eine Farbpalette für die Website zusammenstellen kann.

Die Wichtigkeit von Farben

Farben sind auf einer Website enorm wichtig. Eine Internetseite in schwarz/weiss ist kaum denkbar und nur in ganz seltenen Fällen wirklich toll.

Mit Farben kannst du die Aufmerksamkeit deiner Besucher gezielt auf wichtige Bereiche lenken. Zudem schaffen sie unbewusst Abwechslung beim Lesen eines längeren Beitrages.

Selbst Seiten, die vorwiegend auf weissem Hintergrund und dunkler Schrift basieren, verwenden häufig farblich abweichende Elemente wie zum Beispiel Buttons oder Linkfarben.

Farben schaffen Abwechslung und lenken die Aufmerksamkeit des Lesers gezielt auf wichtige Bereiche.

Natürlich vermitteln Farben auch eine gewisse Stimmung oder wecken Assoziationen. Gerade bei Letzterem kann es schnell heikel werden. So ist zum Beispiel erwiesen, dass Buttons besser nicht in rot gehalten werden sollten, weil man rot unbewusst mit STOP, Gefahr oder Warnung verbindet. Buttons in Grün oder Blau werden häufiger gedrückt.

Natürlich sollen deine Buttons jetzt nicht unbedingt immer grün oder blau sein. Denn wenngleich sich ein Button sinnvollerweise farblich abhebt, so muss er trotzdem mit den ansonsten verwendeten Farben harmonieren.

Wenn es dir ähnlich geht wie mir und du dir nicht schon alles vor dem inneren Auge sehen kannst, helfen dir die Tools weiter, die ich nachfolgend vorstelle. Sie können die Zeit, die du für die Suche der passenden Farbkombinationen verwendest, massiv verkürzen.

Tools zur inspirierenden Suche von Farbkombinationen

Wenn du maximal eine Farbe als konkrete Vorgabe hast, kann es helfen, dich in einer ersten Phase einfach mal inspirieren zu lassen. Es gibt einige kostenlose Tools, die dabei eine grosse Hilfe sein können.

Ich zeige dir eine kleine Auswahl davon. Dabei beschränke ich mich auf Tools, die ich selber schon nutzte oder sogar regelmässig einsetze. Selbstverständlich gibt es unzählige weitere Colorfinder im Web.

Coolors

Coolors – ein Wortspiel aus Colors und dem englischen Begriff cool – ist eine fantastische Möglichkeit, rasch eine passende Farbpalette zu finden oder auch nur auf spielerische Weise sich inspirieren zu lassen.

Wenn du keine farblichen Vorgaben hast, ist Coolors super. Denn du bekommst innerhalb kürzester Zeit viel Inspiration.

Per Mausklick zu tollen Farbkombinationen dank Coolors.
Screenshot coolors.co

Wenn du Coolors startest, erhältst du fünf Farben nach dem Zufallsprinzip. Jedes Mal, wenn du die Leertaste drückst, ändern die Farben. Dabei bringt Coolors stets miteinander harmonierende Farben.

Willst du eine bestimmte Farbe als Vorgabe nutzen, trägst du die am besten in der Mitte ein (1). Danach klickst du das Schloss-Symbol (2) an, um diese eine Farbe zu sperren.

Wenn du jetzt wieder die Leertaste drückst, erscheinen vier passende Farben zu der einen in der Mitte fixierten. Das Spielchen wiederholst du so lange, bis du eine Palette hast, die dir gefällt.

Nach Belieben kannst du dabei auch weitere Farben mit dem Schloss-Symbol sperren, bis am Ende deine Farbpalette steht. Jetzt kopierst du die HEX-Codes in eine Text-Datei, damit du sie später jederzeit verwenden kannst.

Paletton

Das Gratis-Tool Paletton kannst du auf überraschend vielseitige Weise nutzen. Es eignet sich hervorragend, um einfach rumzuspielen mit verschiedenen Farben. Es gibt aber noch ein paar weitere Möglichkeiten, die Coolors nicht hat.

Paletton ist vielseitiger, als es auf den ersten Blick vermuten lässt.

Paletton bietet einige hilfreiche Funktionen bei der Suche nach den richtigen Farben
Screenshot paletton.com

Am besten beginnst du damit, dass du deine vorgegebene Farbe unten links (1) eingibst. Wenn du keine spezifische Vorgabe hast, kannst du die Farbe auch am äusseren grossen Farbrad manuell wählen.

Im oberen Bereich (2) entscheidest du dich nun für einge gewünschte Paletten-Art, die Paletton anzeigen soll. Von links nach rechts sind das:

  • monochromatic, wenn du alles in einem Farbton, aber verschiedenen Nuancen willst
  • Adjacent liefert dir zwei zusätzliche Farben, die verwandt sind. Auch hier bekommst du verschiedene Nuancen angezeigt.
  • Triad gibt dir zu zusätzliche passende Farben, die gleichmässig auf dem Farbrad verteilt sind und deshalb gut harmonieren
  • Tetrad macht dasselbe, aber mit insgesamt vier, also drei zusätzlichen Farben.

Mit der Maus kannst du jederzeit die Punkte als Gesamtes verschieben oder nur einzelne Punkte (mit gedrückter Shift-Taste) anders platzieren.

Wenn du mit deinem Ergebnis zufrieden bist, kannst du deine Farbkombination sogar auf vielseitige Art exportieren (3). Für Anfänger empfehle ich den Export als TXT-Datei. Die kannst du dann so anpassen, dass die Farbnamen für dich verständlich sind. Erfahrenere Nutzer können die Farbpalette auch gleich als CSS exportieren und nach wenigen Anpassungen auf ihrer Website verwenden.

Oder du machst es wie ich und kopierst dir die benötigten HEX-Codes dahin, wo du sie haben willst.

So oder so hast du auf diese Weise alle gewählten Farben plus hellere und dunklere Varianten davon jederzeit griffbereit.

0to255

Von den beiden vorher vorgestellten Tools unterscheidet sich 0to255. Während Paletton und Coolors nützlich sind, um eine Farbpalette zu erhalten, liefert dir 0to255 lediglich zahlreiche hellere und dunklere Abstufungen deiner Farbe.

Das Tool ist sehr simpel, kann aber hilfreich sein, wenn du HEX-Codes für Schattierungen (dunkler), Hintergrund-Overlays oder aufgehellte Farbtöne, z.B. für Buttons, suchst.

Sofort hellere und dünklere Varianten einer Farbe finden und HEX-Code kopieren.
Screenshot 0to255.com

Du fügst oben rechts (1) deinen Farbcode ein und schon liefert dir 0to255 das ganze Spektrum dieser Farbe, von fast weiss ganz oben bis zu fast schwarz ganz unten. Fahre mit der Maus über den gewünschten Code, klicke einmal und der HEX-Code ist in der Zwischenablage.

Als Bonus-Tipp zeigt dir 0to255 auch gleich an, bei welchen Farbtönen du besser mit schwarzer oder weisser Schrift arbeitest, damit der Kontrast optimal ist. Solltest du Schriftfarben verwenden, die nicht weiss oder schwarz sind, musst du selber darauf achten, dass sie gut lesbar bleibt.

Bonus-Tipps: Farben aus einem Bild extrahieren

Hast du ein Bild als Ausgangslage und möchtest darum herum die Website bauen? Dann ist es hilfreich, wenn du Farben aus dem Bild verwendest. Doch wie geht das am einfachsten?

Wenn du ein Grafikprogramm einsetzt, kannst du das Pipette-Werkzeug verwenden und eine Farbe wählen. Oder du benutzt eine Browser-Erweiterung, die es dir ermöglicht, überall Farben zu “picken”. Ich setze hierfür ColorZilla ein. Für Chrome und verwandte Browser ist das frei erhältlich.

Noch bequemer ist es aber mit dem folgenden Tools. Denn das macht das nicht nur automatisch, sondern liefert dir auch gleich eine passende Mini-Farbpalette zu jedem Bild.

Adobe Color

Mit Adobe Color kannst du auch Farbkombinationen suchen, schau dir die dazugehörigen Funktionen ruhig mal an. Hier geht’s aber um eine andere Funktion, nämlich eben das Extrahieren von Farben aus einem Bild.

So einfach findet man Farben, die zu einem bestehenden Bild passen.
Screenshot color.adobe.com

Hierfür lädst du dein Bild hoch und wartest ungefähr eine halbe Sekunde (lach). Schwups, schon zeigt dir Adobe Color eine kleine Farbpalette an, die zum hochgeladenen Bild passt.

Meistens funktioniert das ganz gut. In allen anderen Fällen kannst du einfach einzelne Farbselektoren auf dem Bild mit der Maus verschieben, bis es dir gefällt.

Übrigens: Ebenfalls sehr cool ist die Möglichkeit, einen Farbverlauf aus einem Bild zu extrahieren. Wähle hierfür oben den Menüpunkt “Farbverlauf extrahieren” und lass Adobe Color die Arbeit machen. Auch hier kannst du manuell eingreifen und die automatisch gesetzten Farbpunkte mit der Maus verschieben.

Cool, oder?

Weniger ist mehr

Das waren sie, meine Tool-Tipps für die Farbwahl. Wie eingangs erwähnt, gibt es selbstredend Dutzende weitere Tools. Aber die hier vorgestellten haben sich bei mir im Einsatz bewährt.

Bedenke bei der Verwendung von Farbe stets, dass Farben zwar wichtig sind, um eine Website zum Leben zu erwecken. Das heisst aber nicht automatisch, dass mehr Farben mehr Leben bringen. Man kann es, wie fast überall, auch übertreiben.

Bewährt hat sich eine Farbpalette mit ungefähr fünf Farben, wobei zwei für Schrift und und Überschriften reserviert sind, eine meistens für Hintergründe verwendet wird. Bleiben zwei bis drei für Linkfarbe, Buttons und andere Akzente.

Setze Farben unbedingt ein. Aber setze sie gezielt und zurückhaltend ein, dann entfalten sie ihre Wirkung umso mehr.

Schreibe einen Kommentar