Farben im Webdesign: Grundlagen für Einsteiger

16,7 Millionen – so viele Farbtöne gibt es im RGB-Spektrum. Hinter dieser großen Zahl befinden sich viele Anwendungsmöglichkeiten, aber auch Herausforderungen. Wie du dir diese große Vielfalt zunutze machen kannst, zeigen wir dir in diesem Artikel.

Komplementärfarben

Den Begriff „Komplementärfarben“ hast du bestimmt schon einmal gehört – aber was genau bedeutet er eigentlich? Zwei Farben, die sich im Farbkreis gegenüberstehen und somit den höchstmöglichen Kontrast bilden, sind zueinander komplementär.

‍

Dieser Effekt ist jedoch nur recht selten effektiv anwendbar, denn meist führt ein zu starker Kontrast dazu, dass z.B. Text schwerer zu lesen ist und die Augen schneller müde werden. Allerdings eignen sich Komplementärfarben sehr gut, um zwei Objekte zu vergleichen, da sie das genaue Gegenteil voneinander sind und somit eindeutig unterschieden werden können.

‍

Farbtöne

Die 16,7 Millionen Farbtöne teilt man in Gruppen auf, um sich einen besseren Überblick zu verschaffen und um klarer differenzieren zu können.

‍

Die Primärfarben, auch Erst- oder Grundfarben, kennst du bestimmt von deinen Druckerpatronen zu Hause, namentlich RGB (Rot, Grün, Blau). Obwohl diese drei nie durch Farbmischung gewonnen werden können, kann man aus ihnen alle Farben des RGB-Spektrums mischen.

‍

Die Sekundärfarben befinden sich auf dem CMYK-Spektrum, namentlich Cyan, Magenta, Gelb und der Schwarzanteil Key. Man erhält sie, indem zwei Primärfarben im gleichen Verhältnis gemischt werden.

‍

Mischt man nun eine Primär- mit einer Sekundärfarbe, erhält man eine Tertiärfarbe, z.B. werden rot und violett zu rot-violett oder auch Purpurrot.

‍

Jetzt aber genug zur Farblehre, kommen wir zu den Gruppen, die vermehrt Anwendung bei deinen Projekten finden werden. Angefangen mit den Pastelltönen: sehr sanfte, schwach saturierte Farben. Sie haben daher eine sehr ruhige und entspannte Wirkung und eignen sich perfekt als Hintergrundfarben oder sekundäre Farbtöne, da selbst Text noch sehr gut lesbar ist. Sie können auch gut in Kombination mit intensiveren Farben verwendet werden.

‍

Intensive Farben, wie Neon-Töne, ziehen viel Aufmerksamkeit auf sich und erfordern einen kontrastreichen Hintergrund, um die Elemente oder Texte klar erkenntlich zu machen. Diese Eye-Catcher sind auf Dauer allerdings sehr anstrengend für die Augen und sollten daher nur in elementaren Sektionen und in geregeltem Maße Anwendung finden. Überschriften, Icons oder Produktinszenierungen können hier stark profitieren, allerdings solltest du auch zwischen Signalfarben unterscheiden.

‍

Denn Farben wie Grün oder Rot ziehen nicht nur Aufmerksamkeit auf sich, sondern haben auch eine unterbewusste Bedeutung. Grün wird meist mit Positivem assoziiert, wohingegen rot eher negativ konnotiert ist. Genau solche Eigenschaften kannst du dir zu deinem Vorteil machen und somit z.B. bei Vergleichen klar herausstellen, welche Seite zu bevorzugen ist.

Farbverläufe

Gerade als Hintergrund oder bei großen Überschriften haben Farbverläufe eine harmonisierende Wirkung und heben die Inhalte hervor. So kannst du z.B. wichtige Titel betonen, indem du einen Gradienten anwendest.

‍

Auch bei den Farbverläufen unterscheiden wir zwischen verschiedenen Verlaufsformen, wobei die häufigste wohl der lineare Verlauf ist. Je nachdem, was gefärbt werden soll, eignen sich die verschiedenen Formen besser. So ist bei Texten und Rechtecken ein linearer Verlauf am natürlichsten und bei Kreisen ein radialer Verlauf.

‍

Einen simplen Verlauf kannst du ganz einfach selbst erstellen. Wähle dazu eine Farbe deiner Wahl und verschiebe für die zweite Farbe den Slider ein kleines Stück auf dem Farbspektrum. Und schon erhältst du einen Verlauf wie hier im Beispiel.

‍

Neben den klassischen Verlaufsformen gibt es unter anderem Mesh-Gradients (Netzverläufe). Sie werden hauptsächlich als Hintergrundelemente verwendet, da sie einen eher komplexen Aufbau haben und mit mehreren Farben arbeiten und manchmal sogar animiert sind. Auf meshgradients.com kannst du kostenlos deine eigenen Verläufe für deine Projekte erstellen.

‍

Für Farbverläufe im Allgemeinen gilt ebenfalls: nicht zu viel des Guten. Ist dein ganzes Projekt voller Farbverläufe, kann sich auch nichts mehr voneinander abheben. An gewissen, essenziellen Stellen, wie z.B. Überschriften, können durch Farbverläufe genau die richtigen Akzente gesetzt werden. Achte auch immer darauf, dass die Verläufe mit der Schriftart kompatibel und die Inhalte gut lesbar sind.

‍

Kontrastverhältnis (Contrast-Ratio)

Von bunten Farben und Verläufen kommen wir nun zu Unterscheidungen von Kontrasten. Die Contrast-Ratio prüft, wie stark der Kontrast zwischen zwei Elementen ist und stellt somit eine gute Lesbarkeit und Optik sicher.

‍

Sind die Kontraste zu schwach oder stark, werden die Augen stärker beansprucht und die Inhalte sind schlechter lesbar. Um das zu vermeiden, sollte das Kontrastverhältnis zwischen 4,5 und 21 liegen. So können auch farbenblinde Menschen die Inhalte noch lesen.

‍

Überprüfen kannst du das ganz einfach über verschiedene Webseiten, wie z.B. contrast-ratio.com. Welches Verhältnis nun das Beste ist, ist Geschmackssache. Wir bevorzugen Verhältnisse im Bereich von 5 bis 20, da sie nicht zu kontrastreich und sehr gut lesbar sind.

Dark- und Lightmode

Wohl eine der relevantesten Bewegungen im UI-Design der letzten Jahre sind Darkmode-Designs. Ein dunkles Nutzerumfeld beansprucht die Augen deutlich weniger und die Inhalte sind angenehmer zu lesen. Viele mögen auch einfach den Look der dunklen Farben lieber. Aber auch hier gibt es kein wirkliches falsch oder richtig, denn Geschmäcker sind verschieden. Ein paar Richtlinien möchten wir dir dennoch mitgeben, damit dein Darkmode die bestmögliche Erfahrung bietet.

• Kein pures weiß (#FFFFFF), im dunklen Umfeld sehr anstrengend für die Augen
• Pures Schwarz ist in Ordnung, sehr dunkles Grau oftmals besser geeignet (siehe Apple, Discord uvm.)
• Keine grellen Farben

‍

Farbsymbolik

Rot ist eine Signalfarbe und ist oft negativ konnotiert. Reduzierst du die Saturation, entsteht ein Pastellton und die eben genannte Wirkung wird verringert. So steht rot in vielen Fällen für Liebe und Leidenschaft und kann mit emotionalen Themen assoziiert werden.

‍

Grün ist ebenfalls eine Signalfarbe und wird oft mit positiven Dingen in Verbindung gebracht. Grün steht für Wachstum oder Natur – speziell auch Nachhaltigkeit. Durch steigendes Umweltbewusstsein, auch bei großen Unternehmen, gewinnt die Farbe in letzter Zeit mehr und mehr an Bedeutung und wird z.B. in Nachhaltigkeitsberichten häufig verwendet.

‍

Blau steht in den meisten Fällen für Hoffnung und Vertrauen. So verwenden viele Unternehmen, wie Allianz oder KPMG, blau, um Stärke und Klarheit auszustrahlen.

‍

Gelb wird oft mit Licht, Wärme und Kreativität in Verbindung gebracht. Als die hellste Grundfarbe findet Gelb im Design eher schwierig Anwendung, da die Leserlichkeit erschwert ist. Auf dem richtigen Hintergrund oder in Farbverläufen kann Gelb ein wertvoller Bestandteil sein.

‍

Orange steht für Fröhlichkeit, Wärme und Licht. Die Farbe kann als ein intensiveres Gelb interpretiert werden, da sie neben ähnlichen Eigenschaften auch besser auf verschiedenen Hintergründen erkennbar ist.

‍

Violett ist eine komplexe, vielschichtige Farbe, die konzentrationsfördernd und beruhigend wirken kann. Dunkle Töne können geheimnisvoll und gewissenhaft wirken.

Farbpaletten

Da du jetzt einiges über Farben, Verläufe, Kontraste und Lesbarkeit weißt, kannst du dir Farbpaletten für dein Projekt zusammenstellen. Das geht natürlich auch per Hand, ist aber sehr mühsam und zeitintensiv. Webseiten wie coolors.co erleichtern den Prozess und erstellen dir komplette Paletten. Du kannst die Farben nach Bedarf anpassen, eine Anfangsfarbe wählen, an der sich die übrigen Farben orientieren und deine Favoriten mit dem Schloss sichern.

Zusammenfassung

Farben sind ein sehr vielfältiges Gebiet im Design und mit der richtigen Verwendung kannst du deine Projekte auf das nächste Level bringen. Komplementärfarben zu verstehen und anzuwenden, kann Vergleiche aufwerten und Gegensätze optimal darstellen.

‍

Mit unterschiedlichen Farbtönen kannst du die Thematik deiner Projekte entsprechend visualisieren und mit Farbverläufen den Fokus auf wichtige Überschriften oder Inhalte setzen.

‍

Kontrastverhältnisse sind sehr wichtig, um Inhalte gut lesbar zu machen und auch um Menschen mit Einschränkungen deine Designs nicht vorzuenthalten. Dementsprechend gibt es auch ein paar best-practices aus Dark- und Lightmode-Anwendungen, die die Nutzeroberfläche deutlich aufwerten.

‍

Abgeschlossen mit der Bedeutung von Farben, hast du nun einen guten Überblick und kannst dir anschließend mithilfe der Webseiten eine tolle Palette zusammenstellen und im Allgemeinen Farben besser verstehen.

‍