Der Frühling ist da – 5 Online-Tools für schöne Farben

Der Frühling ist da und auch wenn dieser, zumindest bei mir in der Umgebung, gerade für viel Wirbel sorgt, indem er Schnee, Sonne, Frost und Wärme wild miteinander kombiniert, so sind doch auch die Annehmlichkeiten dieser Jahreszeit bereits mehr als sichtbar.

Zum Beispiel, dass die Welt wieder Farben bekommt. Bäume ergrünen mit einem Mal wieder, die ersten Blumen und Pflanzen sprießen aus dem sonst noch so leblosen Boden und überall beginnt es so langsam aber sicher bunt zu werden.

Farben sind auch das Thema in meinem heutigen Artikel. Wo lange Zeit alles ein wenig grau und trostlos wirkte, spüre ich nun förmlich, wie meine Umwelt mir Lust auf neue Farben bereitet und mich mit frischer Energie versorgt.

Genau deshalb habe ich euch meine Lieblings-Tools herausgesucht, wenn es darum geht, die richtigen Farben zu finden. Mit ihnen könnt ihr eurer Website neues Leben einhauchen und im Frühling vielleicht sogar für einen ganz neuen Anstrich sorgen.

Picular: Das Google für Farben

Picular ist so einfach wie genial. Es ist eine Suchmaschine für Farben. Das Google für Farben nennt sich das Tool und selbiges trifft auch durchaus zu. Denn bei Picular suche ich nicht nach »Grün« oder »Gelb«, sondern ich suche nach Begriffen.

Gebe ich »Wald« ein, zeigt mir das Tool typische Farbtöne des Waldes. Gebe ich »Sonnenblume« ein, erstrahlen die Farben eines Sonnenblumenfeldes vor mir.

Das ist ziemlich genial, wenn man selbst noch nicht so genau weiß, wie die farbliche Gestaltung letztendlich werden soll, aber passende Farbtöne für ein festes Thema benötigt.

Den richtigen Ton zu finden, ist oft eine langwierige Herausforderung, mit Picular bekommt ihr schnell und direkt ein paar Vorschläge spendiert. Vor allem wenn ihr feste Themen habt, könnt ihr mit Picular verwandte Farben finden und nutzen. Das macht Spaß und ist clever.

CoolHue: Verläufe sind im Trend

Aktuell sind Farbverläufe im Trend. Mit CSS können Buttons problemlos mit Verläufen aufgewertet werden und selbst Fließtext oder fettgedruckte Überschriften, werden häufig mit einem Verlauf unterlegt. Das ist möglich, weil es technisch inzwischen kein Problem mehr darstellt, aber auch beliebt, weil Verläufe eben sehr eindrucksvoll aussehen können. Und irgendwie sind sie eben auch zum Trend mutiert, weshalb viele nicht darauf verzichten möchten.

Wer mitmachen möchte, selbst aber nicht so kreativ ist, kann sich bei CoolHue ein paar grandiose Verläufe aussuchen. Das schöne dort ist, dass die Farbverläufe wirklich stimmig sind und in den meisten Umgebungen bereits ohne Anpassungen sehr gut aussehen. Statt also selbst herumzufummeln, schaut doch mal bei CoolHue vorbei.

FlatUI: Klassische Flat Design Farben

Flat Design ist schon wieder Schnee von gestern, die neutralen, kontrastarmen Farbtönen hingegen, bleiben für das Auge äußerst angenehm. Wer es also nicht so knallig mag und entsättigte Töne zu schätzen weiß, bekommt bei FlatUI eine wunderbare Palette an Farben spendiert.

Inzwischen übrigens mehr als nur eine, denn FlatUI ist nun nach Ländern sortiert, sodass die verschiedenen Trends berücksichtigt werden. Für mich persönlich bleiben Flat Colors und Flat Design fantastisch, weil beides vom Auge sehr angenehm und ohne ein unangenehmes Blenden wahrgenommen wird.

MaterialUI: Farben für Material Design

Nach dem Flat Design, kam das Material Design. Das brachte wieder unnötige Komplexität in die Sache, erlaubte Schatten und Lollipop-Farben, wie ich sie gerne nenne.

Gemeint sind möglichst knallige Farbtöne. Das ist Geschmacksache, gehört zum Material Design aber definitiv dazu.

Bei MaterialUI bekommt ihr solche Farben und zwar in jeder Version und Abstufung. Das macht ein Redesign im Frühling besonders einfach, zumal die grellen Farben zu dieser Jahreszeit fast schon eine Freude für die Augen sind.

Das Tool selbst wurde inzwischen clever erweitert und bietet neben Farben auch Unicode-Zeichen, weitere Paletten und sogar Icons an. Ein Blick ist die Website also sicherlich wert.

Coolors: Einfache Farbtabellen erstellen

Sind die richtigen Farbtöne ausgewählt, wird im Idealfall ein Style Guide erstellt. Dieser umfasst Hinweise darauf, wie bestimmte Objekte oder Elemente aussehen sollen, klärt aber auch über verwendete Farben auf.

Farbtabellen sind dabei nicht nur sinnvoll, um anderen Mitarbeitern die eigenen Farben aufzuzeigen, sondern auch, um selbst immer wieder eine klare Linie zu haben. Mit Coolors könnt ihr so eine Farbtabelle schnell und einfach generieren und als PDF abspeichern.

So behaltet ihr eure eigenen Farben im Blick und könnt sie innerhalb der Tabelle entsprechend anpassen, sodass alle bestmöglich und stimmig zusammenkommen. Ideal auch für das Feintuning, um gewählte Farben aufeinander abzustimmen.

Performance von CSS-Farben

Am Ende steht dann häufig auch die Frage im Raum, ob Hex-Codes (#000000) oder native CSS-Farben (Black) in Sachen Performance einen Vorteil haben. Wer es testet stellt fest, dass viele Browser-Versionen mit nativen Farben etwas besser zurechtkommen. Der Browser kann native CSS-Farbangaben also oft schneller bearbeiten und darstellen.

Das Problem ist, dass die nativen CSS-Farben entsprechend begrenzt sind. Ein Tool dafür, findet ihr beispielsweise hier. Die andere Sache ist, dass der Performancegewinn minimal ausfällt, also höchstens auf hochbesuchten Seiten mit schier endloser CSS-Datei wirklich ins Gewicht fällt. Als Performance-Fanatiker finde ich so etwas aber immer interessant. Am Ende bleiben die nativen Farbtöne also etwas schneller.

Raten würde ich euch, aus Gründen der Bequemlichkeit, dennoch die Hex-Werte zu verwenden. Im Idealfall aber die kurzen. Also statt #000000 lieber die #000 verwenden und so weiter. Oder ihr automatisiert diesen Prozess und nutzt den wunderbaren CSS Optimizer dafür, der derartige Optimierungen von alleine vornimmt.

Wer jetzt noch mehr CSS-Tricks sucht, findet sie in meinem anderen Artikel zum Thema, wo ich mich ganz und gar den oft vergessenen CSS-Befehlen widme.

Übertreibt es nicht mit den Farben

Am Ende noch der Tipp, dass ihr es mit der Farbgestaltung nicht übertreiben solltet. In vielen A/B Tests etc. hat sich immer wieder gezeigt, dass eine Website lieber wenige, dafür besonders klare Farben verwenden sollte. Denn auch Farben erzeugen eine Marke und sorgen dafür, dass bestimmte Bereiche schnell zu finden sind.

Hier auf Selbständig im Netz ist Rot die dominierende Farbe. Etwas Orange sorgt dafür, dass beispielsweise die Top-Artikel herausstechen und entsprechend wahrgenommen werden.

Weniger ist bei Farben jedoch mehr. Zum einen, weil quietschebunt eher unprofessionell wirkt, zum anderen aber auch, weil viele Farben die Gesamtdarstellung verwässern lassen. Wählt vielmehr eine Farbe aus, die eure Präsenz/Marke auszeichnet und wiedererkennbar macht.