Eine der schwierigsten Aufgaben im Design ist die Auswahl der passenden Farben. Um diese Herausforderung zu meistern, ist es wichtig, dass du die Farben, Ihre Zusammensetzung, Erstellung und Wirkung verstehst.
Dieser Artikel erklärt dir die Farbenlehre und gibt dir hilfreiche Strategien an die Hand, so dass du danach selber gut loslegen kannst.
Die User möchten auf deiner Website unterwegs sein und dabei von ansprechenden, funktionalen Design-Elementen profitieren. Das maximiert die Bedeutung von Design und Farben erheblich.
Was bedeutet das nun für dich?
Du solltest ein Grundverständnis für die Farben, ihre Wirkung und ihr Zusammenspiel entwickeln. Denn nur so kannst du dir Farbeigenschaften zunutze machen und bestimmte Handlungen bei deinen Nutzern auslösen.
Ich erkläre dir alle Begriffe, die du rund um die Farbenlehre kennen solltest und erkläre dir, was du daraus für deine Screendesigns lernst.
Farben sind definitiv mehr als nur schön. Es ist sogar erstmal zweitrangig, ob sie uns gefallen oder nicht. Es gibt über 16 Millionen RGB-Farben und es ist nun deine Aufgabe, genau die 2-3 Farben zu finden, die zu deinem Projekt passen.
Klingt nach einer großen Herausforderung? Ist es nicht, wenn du dich einmal intensiv mit der Farbtheorie auseinandersetzt.
Die Farbtheorie ist eine Mischung aus Wissenschaft, Psychologie und Emotionen. Farben leisten eine ganze Menge für dich.
Mit ihnen kannst du Beziehungen herstellen, Highlights setzen, Signale senden und dich mit deiner Zielgruppe verbinden. Sie sind maßgeblich für die Wirkung deines Unternehmens.
Hinter der Entscheidung, welche Farben für deine Markenkommunikation verwendet werden, steckt nicht nur reine Ästhetik, sondern vor allem auch Psychologie. Denn Farben wecken bestimmte Assoziationen bei deiner Zielgruppe. Mit dieser Farbwirkung erreichst du potentielle Kunden auf einer anderen Ebene als das zum Beispiel mit Wörtern möglich wäre. Du weckst Emotionen, wie Vertrautheit, Neugier oder Motivation.
Deshalb ist es wichtig, ein passendes und harmonisches Farbschema zu finden. Um das zu erreichen, kannst du dir folgende Fragen stellen:
Welche Aussage möchtest du transportieren?
Wer soll sich davon angesprochen fühlen? Welche Wirkung möchtest du erzeugen? Welche Ziele verfolgt du?
Hast du ein Farbschema gefunden, repräsentiert dieses deine Marke. Denn setzt du immer die gleichen Farben auf all deinen Kanälen – online und offline – ein, steigt der Wiedererkennungswert deines Unternehmens deutlich. So schaffst du eine interne und externe Identifikation mit deinem Unternehmen.
Als Farbreiz bezeichnet man das Licht, das auf unser Auge trifft. Das Licht mit einer Wellenlänge zwischen 400 und 700 Nanometern nehmen wir als Farbe wahr – andere Wellenlängen liegen außerhalb unseres Farbspektrums und können wir deshalb nicht sehen.
Fallen die Lichtwellen auf unser Auge, werden sie auf die Netzhaut projiziert. Dort entstehen Energieimpulse, die dann über verschiedene Nervenbahnen an das Gehirn weitergeleitet und dort verarbeitet werden. Erst dann entsteht der Reiz, den wir als Farbe wahrnehmen.
Verrückt, oder? Noch verrückter ist, dass das Farbensehen von Mensch zu Mensch leicht unterschiedlich ist. Grundsätzlich sehen wir Farben sehr ähnlich, dennoch reagieren unsere Sehzellen nicht gleich auf die Wellenlängen des Lichts. Daher kommt es, dass das, was ich als Blau empfinde, für jemand anderes vielleicht eher wie ein Grünton wirkt.
Alle Wellenlängen, die vom menschlichen Auge wahrgenommen werden können, bezeichnet man als Farbspektrum. Darüber hinaus gibt es natürlich noch viele weitere Wellenlängen, diese sind für uns jedoch nicht sichtbar. Die kürzesten Wellen liegen bei etwa 400 Nanometern und erscheinen für uns als Violett. Die längsten Wellen, die bei etwa 700 Nanometern liegen, erscheinen hingegen als Rot.
Wie oben erklärt, handelt es sich bei Farben wissenschaftlich betrachtet um unterschiedliche Wellenlängen des sichtbaren Lichts. Trifft Licht auf eine Oberfläche, sehen wir diese in einer bestimmten Farbe. Ein grünes Blatt reflektiert grünes Licht. Ein blauer Stift reflektiert blaues Licht – und absorbiert alle anderen Wellenlängen.
Sind Schwarz und Weiß denn nun auch Farben?
Reflektiert eine Oberfläche nahezu das gesamte Licht, sehen wir Weiß. Und Schwarz sehen wir dann, wenn kein Licht reflektiert wird. Das heißt: Schwarz ist die Abwesenheit von Licht. Bedeutet, Schwarz gilt nicht als Farbe. Weiß hingegen wird bisher noch als Farbe gesehen, weil weißes Licht ja immerhin alle Farben der für uns sichtbaren Wellenlängen enthält.
Dem Farbkreis sind wir spätestens im Kunstunterricht alle schon einmal begegnet. Dabei gibt es gar nicht „den einen“ Farbkreis, sondern mehrere Modelle und Ansätze.
Die Farbenlehre nach Goethe stammt aus dem 18. Jahrhundert und beschäftigte sich vor allem mit der emotionalen Wirkung von Farben. Demnach gibt es sechs Grundfarben.
Dazu gehören: Purpur, Rotgelb, Gelb, Grün, Blau und Rotblau. Der Farbkreis setzt sich aus diesen Grundfarben und den entsprechenden Übergängen zusammen.
Der bekannte Farbkreis von Johannes Itten geht auf das Jahr 1961 zurück. Itten war Maler, Kunsttheoretiker und Kunstpädagoge und beschreibt mit seinem Konzept die Zusammenhänge der Farben anschaulich.
Der Farbkreis nach Itten setzt sich aus 12 Farben zusammen. Er unterschied zwischen Primärfarben, Sekundärfarben und Tertiärfarben.
Zu den Primärfarben zählte er Gelb, Rot und Blau und zu den Sekundärfarben Grün, Violett und Orange. Das ist auch der Farbkreis, der uns im Kunstunterricht meistens begegnet.
Ein weiteres Farbmodell ist der Farbkreis nach Harald Küppers. Der deutsche Drucktechniker und Dozent übte mit seinem Modell Kritik an Ittens subjektivem Konzept und verfolgt mit seinem Farbkreis einen wissenschaftlich fundierten Ansatz. Küppers Farbkreis basiert unter anderem auf Erkenntnissen hinsichtlich der Wahrnehmung und Interpretation von Farben sowie optischen Phänomenen des menschlichen Auges.
Es umfasst die acht Grundfarben, bestehend aus den sechs „bunten“ Farben Gelb, Grün, Cyan, Violett, Magenta und Orange sowie den zwei „unbunten“ Farben Weiß und Schwarz.
Weil es so viele Farben gibt, werden sie in Farbmodelle und -systeme eingeteilt. Dafür gibt es verschiedene Ansätze, die uns dabei helfen, Farben besser kategorisieren zu können.
Der Nachteil: Die Farbwerte der einzelnen Modelle lassen sich nur bedingt auf ein anderes System übertragen, da sie nicht vollkommen deckungsgleich sind. Am bekanntesten sind Farbmodelle für Bildschirme und für den Druck – zumindest sind das die beiden Farbräume, die im Design eine große Rolle spielen.
Um Farben zu bilden, wird vor allem zwischen verschiedenen Verfahren unterschieden: die subtraktive sowie die additive Farbmischung.
Während bei der additiven Farbmischung durch die Vermischung der Lichtfarben ein weißes Licht entsteht, bildet sich bei der subtraktiven Farbmischung von Körperfarben ein neutrales Grau-Schwarz.
In der Farbenlehre gibt es sogenannte Licht- und Körperfarben, die sich hinsichtlich ihrer Anwendungsbereiche unterscheiden. Lichtfarben verwendet man vor allem in digitalen Medien, während im Printbereich Körperfarben zu finden sind.
Lichtragen ihren Namen, da bei der sogenannten additiven Farbmischung die Farben durch Mischung von Lichtern entstehen. Als Schnittmenge aus allen Farben ergibt sich ein weißes Licht.
Bei den Körperfarben erfolgt durch die subtraktive Farbmischung hingegen eine Pigmentmischung (wie man es beispielsweise vom Malkasten kennt). Die einzelnen Pigmente reflektieren nur bestimmte Wellenlängen, wodurch die Wahrnehmung der Farben entsteht. Die subtraktive Farbmischung ist vor allem im Druckbereich zu finden, wo sie Anwendung im CMYK-System findet.
Additive bzw. subtraktive Farbmischung beschreibt also, ob Wellenlängen kombiniert (addiert) oder herausgefiltert (subtrahiert) werden.
Additives Farbmodell:
additive Farbmischung aus Rot, Grün und Blau für Bildschirme
Subtraktives Farbmodell:
subtraktive Farbmischung aus Cyan, Magenta, Gelb und Schwarz für den Druck
Farbmodell, das unserer menschlichen Farbwahrnehmung am nächsten kommt
Primärfarben bzw. Grundfarben sind die Farben, die nicht aus einer Mischung anderer Farben gebildet werden können. Sie sind die Basis des gesamten Farbsystems.
In der künstlerischen Farbenlehre sind Rot, Gelb und Blau die sogenannten Grundfarben (oder auch Primärfarben genannt). Orange, Grün und Violett sind die Sekundärfarben, die sich aus der Mischung der Grundfarben ergeben.
Die Mischung aus Primär- und Sekundärfarben ergibt dann noch die Tertiärfarben. Sie werden in der Regel mit zwei Wörtern bezeichnet, also zum Beispiel Gelb-Orange oder Rot-Violett.
Mehr dazu: Primärfarben – Grundlagen und Einsatz im Webdesign, Branding & UI-Design
Abhängig davon, an welchem Farbmodell man sich orientiert, variieren auch die Primärfarben. Das subtraktive Farbsystem basiert auf Cyan, Magenta und Gelb, während die Farben Rot, Grün und Blau das additive System bilden.
Neben den Primärfarben gibt es die Sekundärfarben. Sie entstehen durch Mischung zweier Grundfarben. Das funktioniert je nach Farbraum so:
RGB:
Rot + Blau = Magenta
Blau + Grün = Cyan
Grün + Rot = Gelb
CMYK:
Gelb + Magenta = Rot
Magenta + Cyan = Blau
Cyan + Gelb = Grün.
Die oben beschriebenen Farben lassen sich in zwei Typen einteilen: kalte und warme Farben. Die kalten Farben befinden sich auf der grün-blauen Seite des Farbkreises. Als kalt werden sie deshalb bezeichnet, weil sie einen eher kühlen, distanzierten Eindruck vermitteln.
Warme Farben sind das Gegenteil davon. Sie befinden sich auf der gelben, orangenen und roten Seite des Farbkreises und wecken eher warme, persönliche Assoziationen.
Von den reinen Farben im Farbkreis gibt es unzählige Farbnuancen. Diese sind entweder heller, dunkler, blasser oder kräftiger als die Ausgangsfarben. Sie entstehen, indem du eine Farbe mit Weiß, Grau oder Schwarz mischst.
Der Farbton ist das, was wir als reines Farbpigment bezeichnen. Es handelt sich also um eine Grundfarbe ohne Zusatz von weißen oder schwarzen Pigmenten. Farbtöne werden immer nur im Zusammenhang mit Rot, Grün, Blau oder Gelb gesehen. Es handelt sich dabei um den Grad, in dem visuelle Reize diesen Farben ähneln. Im Gegensatz dazu sind neutrale Farben – also Weiß, Schwarz und Grau – keine Farbtöne.
Von Tönung sprechen wir, wenn wir einen Farbton mit Weiß mischen. Ein Beispiel: Mischt man Blau mit etwas Weiß, dann entsteht ein helleres Blau – spricht ein blasserer Blauton. Je mehr Weiß man hinzumischt, desto heller wird der Farbton. Es reicht aber schon eine winzige Menge Weiß, um eine Farbe in einen helleren Farbton zu verwandeln. Du kannst auf diese Weise beliebig viele Abstufungen deiner reinen Farbpigmente erstellen.
Sobald du eine Farbe mit Schwarz oder Weiß mischst, veränderst du die Sättigung (auch Tonwert genannt) des Farbtons. Die Sättigung gibt an, ob wir eine Farbe als bunt oder eher unbunt wahrnehmen. Unbunt ist eine Farbe dann, wenn sie in Richtung Weiß, Grau oder Schwarz geht. Bunte Farben unterscheiden sich deutlich von diesen neutralen Tönen.
Die Schattierung ist quasi das Gegenteil der Tönung. Sie entsteht, wenn wir einen Farbton mit Schwarz mischen. Bleiben wir beim Blau: Mischt man Blau mit etwas Schwarz, dann entsteht ein dunklerer Blauton. Abhängig davon, wie viel Schwarz wir beimischen, entstehen unterschiedliche Schattierungen.
Auch die Helligkeit ist ein häufiges Farbmerkmal, welches wir mit unserem Auge wahrnehmen können. Die hellste unbunte Farbe ist Weiß, die dunkelste Schwarz. Bei den bunten Farben besteht der größte Helligkeitsunterschied zwischen Violett und Gelb.
Erst durch die verschiedenen Farben können wir die Welt um uns herum wahrnehmen und erleben. Sie bieten uns Orientierung. Kein Wunder also, dass die verschiedenen Farben unterschiedliche Gefühle und Assoziationen in uns wecken. Zum Beispiel lernen wir relativ früh, dass Rot für Gefahr steht und Grün für etwas Positives oder ein Erfolgserlebnis.
Deshalb ist es wichtig, die Farbwirkung zu berücksichtigen, wenn wir Designs erstellen oder Produkte entwickeln. Schließlich steckt dahinter jede Menge Psychologie. Aus diesem Grund hängt der Erfolg einer Website oder eines Produktes weitestgehend von den für das Design gewählten Farben ab.
Viele Unternehmen gestalten ihre Website noch immer nach dem persönlichen Geschmack. Der Prozess der Farbauswahl ist jedoch komplizierter, als es scheint, und spielt eine wichtige Rolle im Webdesign. Damit du ein gutes Design gestalten kannst, musst du verstehen, wie sich Farben zueinander verhalten.
Bei der Farbharmonie geht es darum, die einzelnen Farben im Design so anzuordnen, wie es für den Nutzer am attraktivsten und effektivsten ist. Eine Disharmonie sorgt für das Gefühl von Chaos, was nicht selten dazu führt, dass Nutzer abspringen. Ein funktionales Farbschema ist also von Bedeutung, wenn du deine User auf den ersten Blick für dich gewinnen möchtest.
Es gibt unterschiedliche Farbharmonien:
Die monochromatische Farbharmonie ist immer eine sichere Wahl. Sie basiert auf einer Farbe und verschiedenen Tönungen und Schattierungen dieses Farbtons. Die einzelnen Nuancen passen also von Haus aus gut zusammen und ergeben ein ruhiges, stimmiges Gesamtbild.
Wenn du eine analoge Farbharmonie schaffen möchtest, verwendest du Farben, die auf dem Farbkreis direkt nebeneinanderliegen. Dieses Schema eignet sich für Designs, bei denen wenig Kontrast erforderlich ist. Aber Achtung: Denn gerade im Webdesign spielt Kontrast eine tragende Rolle.
Bei dem Komplementärschema werden Farben miteinander kombiniert, die auf dem Farbkreis gegenüber voneinander liegen. Sie bilden also einen hohen Kontrast und sorgen für auffällige, unübersehbare Elemente.
Für das teilkomplementäre Farbschema verwendest du mehr als zwei Farben. Auch hier gehst du wieder von einer Farbe, bspw. Blau, aus und kombinierst sie mit zwei gegenüberliegenden Farben, also bspw. Gelb und Rot. Zwar schaffst du hier auch einen Kontrast, dieser fällt allerdings deutlich geringer aus als bei der komplementären Farbharmonie. Dafür kannst du aber mehrere Farben in dein Design integrieren.
Wenn ein Design mehrere Farben erfordert, kannst du ein triadisches Farbschema anwenden. Es basiert auf drei einzelnen Farbtönen, die im Farbkreis wie ein Dreieck zueinander angeordnet sind. Damit ein harmonisches Gesamtbild entsteht, solltest du eine Farbe als Basis und die anderen beiden als Akzentfarben verwenden.
Das tetraedrische Farbschema besteht aus vier Farben aus dem Farbkreis, die komplementäre Paare bilden. Das ergibt dann ein Rechteck. Weil es bei diesem Schema am schwierigsten ist, eine Harmonie zu finden, eignet es sich eher für erfahrene Webdesigner. Dann können auch wirklich beeindruckende Ergebnisse dabei entstehen.
Als Farbkontrast bezeichnen wir den Unterschied zwischen zwei Farbtönen. Farbkontraste sind wichtig, damit wir nicht nur eine einfarbige Fläche sehen. Deshalb leben Webdesigns von kontrastreichen Farbschemata. Bedacht gewählte Farben können nur voneinander profitieren.
Platzierst du zum Beispiel einen orangenen Button auf einem blauen Hintergrund, sticht dieser sofort ins Auge und animiert den Nutzer eher zum Klicken. Schon bei der Farbauswahl solltest du daher bedenken, welche Kontraste du auf deiner Website oder in deinem Design später erzeugen möchtest.
Erfahre hier mehr über die verschiedenen Farbkontraste
Komplementärfarben verstehen und nutzen: So schaffst du den richtigen Komplementärkontrast
In den letzten Jahren kommen im Webdesign immer mehr Farbverläufe ins Spiel. Das Gute: Sie geben Marken die Möglichkeit, ihre Ideen und Werte noch freier auszudrücken und harmonische Übergänge zwischen den Farbpaaren zu schaffen. Farbverläufe eröffnen eine weitere Dimension und schaffen deutlich mehr Tiefgang – aber natürlich nur, wenn sie gut gemacht sind.
Einige Farben passen einfach nicht zusammen. Von solchen Paaren solltest du dann auch für Verläufe die Finger lassen. Um stimmige Harmonien zu finden, kannst du dich zum Beispiel an der Natur orientieren und Farbverläufe entwickeln, die so auch in unserem Umfeld vorkommen.
Mischst du Farben, die auf dem Farbkreis weit voneinander entfernt liegen, solltest du unbedingt ein Zwischenelement einführen, also noch eine weitere Farbabstufung, um einen gelungenen Farbverlauf zu entwickeln.
Beim User Interface Design geht es darum, eine Website oder Apps so zu gestalten, dass diese nicht nur visuell gefallen, sondern zu einem klaren Ziel führen. Der User soll mit der Anwendung interagieren. Das bedeutet wiederum, dass die Anwendung selbst intuitiv bedienbar sein muss. Was hilft uns dabei? Farben! Mit Farben kannst du ein einzigartiges Nutzererlebnis gestalten und deinen Usern dabei helfen, mit Inhalten zu interagieren, sich zurechtzufinden und Handlungen vorzunehmen. Wenn du mehr über ein gelungenes User Interface Design lesen möchtest, klicke auf diesen Artikel: Farb-Branding einer Website.
Die Auswahl der passenden Farbkombination ist wohl eine der größten Hürden bei der Gestaltung eines Screendesigns. Auf der einen Seite möchte der Designer die Anforderungen der Zielgruppe berücksichtigen, auf der anderen Seite die Wünsche der Kunden und dann soll das Farbschema natürlich auch noch funktional sein.
Die Lösung ist eine umfassende Analyse, die du dann als Entscheidungsgrundlage für dein Farbschema nutzt. Beziehe folgende Aspekte mit ein:
Wenn du mehr darüber erfahren möchtest, wie du die richtige Farbkombination auswählst, ist dieser Artikel interessant für dich:
Farbpalette erstellen – So findest du die richtigen Farben für deine Designs
Es ist definitiv hilfreich, sich inspirieren zu lassen und sich hin und wieder über neue Farbtrends zu informieren. Denn wie alles andere hat sich natürlich auch im Webdesign einiges geändert in den letzten Jahrzehnten. Wichtig: Inspiration ist nicht gleich Kopie. Das bedeutet, du kannst dich durchaus umschauen, in welche Richtung sich die Trends gerade entwickeln, solltest aber nicht einfach etwas kopieren. Das gilt besonders beim Thema Farbe. Denn gerade diese trägt entscheidend zur Wirkung der Website bei und sollte daher individuell zum jeweiligen Projekt passen.
Einen Überblick über Farbtrends und -inspirationen liefert dieser Artikel: Farbtrends im Webdesign.
Das Netz ist voll von hilfreichen Online-Tools. Auch für Farben, Farbfindung usw. gibt es jede Menge kleine und große Helferlein. Keine Sorge, du musst nicht alle kennen 😉
Was du dir aber auf jeden Fall anschauen solltest:
ColorHexa, um zu einem bstimmten Farbton jede Menge Informationen und Beispiele wie Farbabstufungen, verschiedene Farbschemata und einen Farbblindheit-Simulator.
Colordot, um spielerisch zu einer Farbpalette zu gelangen.
Das WAVE Web Accessibility Evaluation Tool, um Websites auf Barrierefreiheit-Aspekte zu analysieren.
Adobe Color Explore, um passende Farbkombinationen und Bilder zu einem bestimmten Farbton angezeigt zu bekommen.
Entdecke über 30 Farbtools:
Farbe ist ein wirkungsvolles Gestaltungsmittel, um Emotionen zu wecken, die Markenidentität zu stärken und Handlungen auszulösen.
Denke bei deinen Designs also daran, wie eng Farben mit dem Auftritt und der Wirkung deines Unternehmens verbunden sind. Ganz gleich, ob du nach einem harmonischen Farbschema für dein Webdesign suchst oder nach einer Farbpalette für dein Logo – wenn du das Grundwissen aus der Farbenlehre in deinen Entwürfen umsetzt, wirst du am Ende ein deutlich wirkungsvolleres Design erzielen.
Über 8.500 sind schon dabei:
sowie exklusive Webdesign-Inhalte, kostenfreie Templates + regelmäßig Webdesign-Links & -tipps:
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.
Die Inhalte des Webdesign Journals wurden mit Sorgfalt, Engagement und Liebe erstellt – so auch dieser Artikel. Wenn du Ergänzungen oder Anmerkungen hast, kannst du dich gerne bei mir melden. Ebenso wenn du Ideen oder Wünsche für weitere Themen hast.
Wenn du Ausschnitte oder Zitate in wissenschaftlichen Arbeiten zitieren möchtest, kann du dies gerne machen. Was gar nicht geht: Inhalte klauen oder kopieren! Sollte aber selbstverständlich sein…
Unser Content wird täglich von tausenden Webdesignern genutzt
Anliegen:
Anleitungen:
Das Webdesign Journal ist ein Projekt von
hahnsinn – Büro für Webdesign & Branding.
Autor Martin Hahn ist Webdesigner, Dozent und Fachbuchautor.
Webdesign Journal – Webdesign aus Leipzig und Frankfurt am Main
Ein Projekt von hahnsinn – Webdesignagentur aus Leipzig & Frankfurt am Main
Über 8.500 sind schon dabei!
Bleibe up to date mit dem KI-Guide, Checklisten, kostenlosen Templates und den regelmäßigen Links & Tipps:
