1.6 Element #1: Farben

Bevor wir loslegen, nochmals eine kleine Erinnerung:

Das Ziel von diesem Kurs ist nicht, Dich mit möglichst vielen Informationen, Wissen und Theorie zu erschlagen. Sondern Dir die wichtigsten Prinzipien mit praktischen Tipps und Tricks zu geben.

Darum auch hier beim Thema Farben: Ich versuche Dich nicht mit zu viel Farbenlehre und -theorie zu langweilen.

Aber einige Grundlagen brauchen wir für die Praxis.

Gehen wir das Ganze schrittweise an:

Schritt #1: Das Farbkonzept. Wie viele Farben brauchen wir?

Du hast grundsätzlich 3 Möglichkeiten für Dein Farbkonzept. Du wählst:

• 1 Farbe
• 2 Farben
• 3 oder mehr Farben

Bei einer oder zwei Farben kann man nicht all zu viel „falsch“ machen. Aber es ist sehr schwierig, 3 oder mehr Farben aufeinander abzustimmen, damit das ganze Design immer noch stimmig wirkt.

Bei 3 oder mehr Farben ist es sehr wichtig, dass bei jeder Farbe der genaue Farbton stimmt, man muss auch die Wärme/Kälte der Farben beachten, und genau überlegen, welche Farbe wo und wie oft auf der Website eingesetzt werden soll.

Kurz gesagt: Ich rate dringend davon ab 🙂

Darum auch meine Empfehlung: Entscheide Dich, ob Du nur 1 oder 2 primäre Farben verwenden möchtest:

1. Du brauchst immer eine Hauptfarbe, die für Deinen Brand steht und auch für den Wiedererkennungseffekt ist (denk z.B. an das Starbucks Grün oder das Gelbe M von McDonald’s). Ein einfarbiges Design Konzept kann einen besonders starken Eindruck hinterlassen, dabei aber trotzdem auch minimalistisch wirken, was nie aus der Mode kommt.
2. Du kannst optional auf eine Kontrastfarbe setzen. Einerseits einfach um das Design etwas aufzulockern bzw. etwas mehr Abwechslung reinzubringen. Andererseits kannst Du mit dieser sehr gut die Aufmerksamkeit der Besucher auf wichtige Elemente lenken, also z.B. typischerweise damit die Buttons und Call To Actions herausstechen.

Wie gesagt: Beide Varianten sind eine super Wahl und es ist rein Geschmackssache, für was Du Dich entscheidest.

Übrigens: Genau genommen hast Du dann natürlich immer noch 4-5 Farben zur Auswahl: Du hast praktisch immer noch die neutralen Farben Weiss und Schwarz, plus ev. noch ein helles Grau im Repertoire. Plus natürlich Deine Hauptfarbe allenfalls in 2-3 verschiedenen Tönen.

So weit so einfach 🙂

Nächster Schritt:

Schritt #2: Welche Hauptfarbe?

Natürlich gibt es theoretisch unzählige Farben. Zuerst einmal müssen wir aber unsere Hauptfarbe wählen.

Die Hauptfarbe ist wichtig, weil diese die Stimmung und Emotion für den ersten Eindruck Deines Brand vorgeben.

Und diese finden wir auf dem Farbkreis (hier dargestellt mit in der Mitte den sogenannten primären Farben Rot, Blau, Gelb und sekundären Farben Grün, Orange, Violett):

Ittens Farbkreis von 1961, Quelle Wikipedia

Dazu kommen noch die neutralen Farben Weiss, Grau und Schwarz.

Farbpsychologie: Die Bedeutung der Farben und welche Emotionen und Gefühle sie wecken (und zu welchen Vorzügen der Faszination – Innovation, Emotion, Power, Prestige, Stabilität, Tiefgang, Wachsamkeit – sie passen können):

1. Blau: Ruhe, Vertrauen, Intelligenz, Zuverlässigkeit, Harmonie, Treue
   
   Vorzüge der Faszination: Innovation, Prestige, Stabilität, Tiefgang, Wachsamkeit
2. Türkis (oder Cyan, Aquamarin, Blaugrün/Grünblau): Im Prinzip sehr ähnlich wie Blau, aber mit mehr Selbstbewusstsein, Dynamik, Energie, Tropisch/Exotisch
   
   Vorzüge der Faszination: Innovation, Emotion, Power, Stabilität
3. Grün: Natur/Natürlichkeit, Wachstum, Harmonie, Wohlstand, Stabilität, Friedlichkeit
   
   Vorzüge der Faszination: Emotion, Stabilität, Tiefgang, Wachsamkeit
4. Gelb: Fröhlichkeit, Optimismus, Spontanität, Hoffnung, Klarheit
   
   Vorzüge der Faszination: Innovation, Emotion
5. Orange: Kombiniert die Wirkung von Gelb und Rot, speziell: Freude, Kreativität, Jugend, Enthusiasmus, Selbstbewusstsein
   
   Vorzüge der Faszination: Innovation, Emotion, Power
6. Rot: Aufregung, Leidenschaft, Mut, Energie, Aufmerksamkeit, Bestimmtheit, Geschwindigkeit
   
   Vorzüge der Faszination: Innovation, Emotion, Power, Prestige
7. Pink (oder Rosa, Magenta): Weiblichkeit, Sanftheit, Verspieltheit, Romantik, Sensibilität, Höflichkeit
   
   Vorzüge der Faszination: Emotion, Stabilität, Tiefgang
8. Violett (oder Lila): Luxus, Geheimnisvoll/Mysteriös, Spiritualität, Weisheit, Fantasievoll, Nostalgie
   
   Vorzüge der Faszination: Emotion, Prestige, Stabilität, Tiefgang
9. Braun: Gesundheit, Gemütlichkeit, Wärme, Natürlichkeit, Bodenständig, Ehrlichkeit
   
   Vorzüge der Faszination: Stabilität, Wachsamkeit
10. Weiss: Reinheit, Leichtigkeit, Unschuld, Minimalismus, Perfektion
    
    Vorzüge der Faszination: Innovation, Prestige, Stabilität, Wachsamkeit
11. Grau: Professionalität, Balance, Formalität, Ruhe, Konvention
    
    Vorzüge der Faszination: Prestige, Stabilität, Wachsamkeit
12. Schwarz: Kraft, Eleganz, Perfektion, Qualität, Luxus, Unabhängigkeit
    
    Vorzüge der Faszination: Innovation, Power, Prestige, Stabilität, Wachsamkeit

Ja, verschiedene Farben können teilweise die gleiche oder sehr ähnliche Bedeutung haben.

Wichtig: Sieh die Farbpsychologie als nützliches Werkzeug um Deine Wahl einzugrenzen, nicht als absolute Wissenschaft oder Wahrheit (weswegen ich oben bewusst keine ausschweifende und tiefgründige Deutung der Farben gemacht habe).

Auch meine Kategorisierung der Vorzüge der Faszination soll nur eine Hilfe sein, musst Du aber natürlich nicht unbedingt einhalten.

Ich gehe sogar so weit und sage, dass die Farbpsychologie (vor allem heutzutage) nur zweitrangig ist.

Denn:

Zuerst einmal bestimmt der Kontext, wie eine Farbe wahrgenommen wird.

Das beste Beispiel ist Rot: Einerseits kann es aggressiv und kämpferisch wirken (Blut), andererseits ist es auffällig und kann für Gefahr stehen (Feuerwehr oder Stop-Schilder), und in wieder anderen Fällen steht es für die Liebe, Romantik und positive Aufregung (Herz).

Auch in verschiedenen Kulturen haben Farben verschiedene Bedeutungen (Stichwort Globalisierung). In der heutigen Zeit der medialen Reizüberflutung, in der die verschiedensten Bewegungen und Gruppierungen sich lautstark Gehör verschaffen können, verwischen die Grenzen.

Steht Rot jetzt für den Kommunismus und linke Parteien (die SP in der Schweiz), oder für den Konsum (Coca Cola, Netflix und der Weihnachtsmann)? Wie gesagt, der Kontext zählt.

Ein weiteres sehr anschauliches Beispiel:

Nimmt irgendjemand tatsächlich BP (British Petroleum) oder McDonald’s die Naturverbundenheit, Natürlichkeit oder Nachhaltigkeit ab, nur weil sie auf Grün setzen (weiteres Stichwort „Greenwashing“)?

Wahrscheinlich nicht.

Oder auch die Logos von Migros und Coop:

Ist Orange (Freude, Kreativität, Jugend, Enthusiasmus, Selbstbewusstsein) tatsächlich die „richtige“ Farbe für einen Supermarkt und Detailhandelsunternehmen?

Eigentlich nicht. Aber deswegen ist es nicht falsch. Im Gegenteil, teilweise versuchen ja sowohl Coop als auch Migros mit humorvoller Werbung etwas jugendliche Freude und Kreativität reinzubringen.

Worauf ich hinaus will: Das ist einer der Gründe, weshalb ich Dir empfehle, Dich an diese Regel aus dem Klassiker „The 22 Immutable Laws of Branding“ zu halten:

The Law of Color: A brand should use a color that is the opposite of its major competitor’s.

Das Gesetz der Farben: Ein Brand sollte eine Farbe nutzen, die entgegengesetzt zu seinem Hauptkonkurrenten steht.

Wobei ich das jetzt nicht wörtlich nehmen würde (also die entgegengesetzte Farbe auf dem Farbkreis).

Aber grundsätzlich stimme ich absolut darin überein:

Es ist wichtiger, eine eigene Branding Identität zu schaffen, als die „richtige“ symbolische Farbe zu nutzen.

Darum haben wir uns in der letzten Lektion ja auch unsere 5 Hauptkonkurrenten angeschaut.

Also, hier nochmals eine kurze Checkliste, wie Du Dich für Deine Hauptfarbe entscheidest:

1. Schau Dir die Liste der Farben an (Blau, Türkis, Grün, Gelb, Orange, Rot, Pink, Violett, Braun, Weiss, Grau, Schwarz) und streiche die Farben, die schon durch Deine Konkurrenten übermässig beansprucht werden.
2. Welche der übrigen Farben passen von der Farbpsychologie am besten zu Dir und Deiner Firma? Denk dabei an Deine 2 Vorzüge der Faszination aus der vorherigen Lektion (Innovation, Emotion, Power, Prestige, Stabilität, Tiefgang, Wachsamkeit). Tipp, um die Entscheidung etwas einfacher zu machen: Streich zuerst einmal die Farben, die auf keinen Fall in Frage kommen.
3. Hab auch keine Hemmungen, einfach auf Dein Bauchgefühl zu hören. Wie schon erklärt: Es gibt nicht DIE „perfekte“ Farbe. Wenn also 2-3 Farben passen würden und Du Dich nicht entscheiden kannst: Lass ruhig Dein Gefühl und Vorliebe mitentscheiden.

Hast Du Dich dazu entschieden eine 2. Farbe als Kontrastfarbe zu wählen?

Diese kannst Du nicht völlig frei wählen, da sich diese ja mit Deiner Hauptfarbe vertragen muss (damit sich die Farben nicht „beissen“).

Damit Du die Kontrastfarbe auswählen kannst, musst Du also zuerst genau wissen, wie Deine Hauptfarbe überhaupt aussieht.

Und dafür brauchen wir jetzt ein bisschen trockene Farbenlehre und -theorie:

Schritt #3: Farbenlehre und Begriffe

Zuerst zur Theorie bzw. den Begriffen (immer jeweils auch gleich mit den englischen Begriffen als Referenz, da gewisse Online Tools nur in Englisch sind – damit Du Dich bei diesen auch zurechtfindest).

Eine mögliche Verwirrung im Deutschen gibt es nämlich wegen dem Begriff „Ton“, der mehrere Bedeutungen haben kann:

• Der Farbton (engl. Hue) ist der Name der Farbe in der reinsten Form (z.B. Blau, Rot oder Grün).
• Eine Tönung (eng. Tint) ist ein Farbton, dem Weiss hinzugefügt wurde (wenn genügend Weiss hinzugefügt wird, erhält man die sogenannten Pastellfarben).
  
  (diese Bilder sind von 99designs.de)
  • Beispiel: Rot + Weiss = Rosa
• Eine Schattierung (engl. Shade) ist ein Farbton, dem Schwarz hinzugefügt wurde.
  
  • Beispiel: Rot + Schwarz = Burgunderrot
• Ein Ton (engl. Tone) ist ein Farbton, dem Grau (also gleichzeitig Weiss + Schwarz) hinzugefügt wurde. Ein Ton kann einer Farbe einen Vintage/Retro Look geben.
  
  • Beispiel: Rot + Grau = Purpurrot

Es gibt verschiedene Modelle, wie Farben dargestellt werden (das heisst, die genau gleiche Farbe kann auf verschiedene Arten beschrieben/definiert werden).

Keine Sorge: Du musst nicht wissen, wie diese im Detail funktionieren. Wichtig ist nur, dass Du diese Modelle erkennst, wenn Du ihnen begegnest.

Die 3 wichtigsten Modelle und wie diese eine Farbe beschreiben:

• HSV: Definiert eine Farbe mit:
  • Hue = Farbton: Also wie wir gelernt haben, welche Farbe auf dem Farbkreis.
  • Saturation = Sättigung: Beschreibt die Reinheit des Farbton. Ist die Farbe rein (= kräftig/leuchtend) oder matt (wie viel Weiss, Grau oder Schwarz hinzugefügt wurde).
  • Value (= Helligkeit): Wie hell die Farbe ist, also ob mehr Schwarz oder Weiss hinzugefügt wurde.
  • Mit diesen 3 Werten kann jede Farbe eindeutig definiert werden:
    
    Darstellung des HSV-Modell, von Wikipedia
  • Dieses Modell ist beliebt, weil es für uns am „logischsten“ ist. Sprich, wie wir Farben tatsächlich wahrnehmen und beschreiben. Darum wird dieses Modell auch häufig in Bildbearbeitungsprogrammen verwendet.
• RGB: Definiert eine Farbe mit dem Anteil von Rot, Grün und Blau.
  • Das Konzept ist nicht ganz so intuitiv (wer würde schon annehmen, dass die Kombination von den 3 Farben Rot, Grün und Blau schlussendlich Weiss ergibt?!). Aber dieses Modell ist für uns besonders wichtig, weil Bildschirme so funktionieren und wir darum im Webdesign Farben als RGB Werte angeben (das sind die im HTML bzw. CSS genutzten Hexadezimalen Farb Codes – kurz Hex Code, z.B. #95c01f ).
    
• CMYK: Definiert eine Farbe mit dem Anteil von Cyan, Magenta, Yellow (Gelb) und Key (Schwarz).
  • Dieses Modell wird im Druckbereich genutzt. Deshalb gibt es das Schwarz auch separat: Das ist damit das häufig gebrauchte Schwarz nicht mit den teureren Farben zusammengemischt werden muss, sondern direkt in Schwarz gedruckt werden kann.
     

Hier die Funktionsweise von RGB im Webdesign kurz erklärt (also die Hex Codes):

Anstatt von 00 bis 99 im Dezimalsystem, wird einfach von 00 bis FF (also umgerechnet 0 bis 255) im Hexadezimalsystem gezählt (Hexadezimal zählt von 0 bis 15, wobei A=10, B=11, C=12, D=13, E=14 und F=15 ist).

Die ersten beiden Ziffern stehen für den Rot-Anteil, die mittleren zwei für den Blau-Anteil, und die rechten zwei für den Grün-Anteil.

#FF0000 wäre also ein reines Rot (keinerlei Blau oder Grün Anteil). #000000 ist Schwarz. Und #FFFFFF ist Weiss (Du erinnerst Dich: Alle 3 Farben kombiniert ergeben Weiss – gar keine Farbe ist Schwarz).

Die Schreibweise ob GROSS (#FF0000) oder klein (#ff0000) ist übrigens ganz egal, Du kannst beliebig beides verwenden.

In den Inspirationsquellen die ich Dir als Nächstes gebe, solltest Du praktisch immer direkt den benötigten Hex Code erhalten. Du musst Farben also natürlich nicht selber im Hex Code schreiben können.

Falls Du einmal einen Farb Code im HSV oder CMYK Modell findest, kannst Du diesen übrigens jederzeit einfach umrechnen lassen. Dazu gibt es Online Tools wie z.B. auf dieser Website hier: https://www.rapidtables.com/convert/color/hsv-to-rgb.html

Du gibst einfach z.B. die HSV Werte ein, und erhältst so den Hex Code. Auf der rechten Seite kannst Du zwischen praktisch allen benötigten Umrechnungsmethoden wechseln.

Soviel zur Theorie. Weiter zu den praktischen Tipps:

Schritt #4: Wie genau soll meine Hauptfarbe aussehen?

Blau ist nicht gleich Blau.

In diesem dritten Schritt geht es darum, den genauen Farbton zu wählen (und eine Auswahl für die optionale Kontrastfarbe zu bekommen).

Es wäre nicht sehr hilfreich, wenn ich Dir jetzt einfach sagen würde: „Spiel einfach mit einem Farbkreis Tool herum und füge zufällig etwas Weiss, Grau oder Schwarz hinzu, bis Du ein Blau findest, das Dir gefällt.“

Stimmige Farbpaletten „aus dem Nichts“ zu erstellen ist etwas, dass meistens nur sehr erfahrene Grafikdesigner können.

Deshalb zeige ich Dir als nächstes 4 kreative Wege, wie Du tolle Farben und Farbpaletten findest.

Tipp: Die meisten Farbkonzepte die Du so findest, haben 4-5 Farben. Denk daran: Du brauchst nur 1 Farbe (plus natürlich allenfalls eine 2. Farbe als Kontrastfarbe).

Inspirationsquelle #1: Fertige Farbpaletten

Meine erste Anlaufstelle: https://colorhunt.co/

Auf dieser Website findest Du Tausende von Hand ausgewählte Farbpaletten.

Das beste daran: Du kannst auf der rechten Seite unter „Search Palettes“ gezielt nach Deiner gewählten Hauptfarbe suchen (oder auch nach Themen, also z.B. Retro Stil, Pastell Farben oder Farben passend zur Jahreszeit):

Nehmen wir als Beispiel an, Deine Hauptfarbe ist Grün und Du möchtest eine Kontrastfarbe (weisst aber noch nicht welche).

Wir suchen also nach Farbpaletten mit Grün. Du siehst einerseits viele verschiedene Grüntöne, andererseits siehst Du auch gleich, mit welche Kontrastfarben dazu passen (Rot, Orange und Gelb).

Dann hast Du nur noch die Qual der Wahl 🙂

Tipp: Wenn Du eine Farbe gefunden hast, kannst Du einfach auf den Hex Code klicken, um diesen zu kopieren:

Und schon hast Du Deine Farben, wie in diesem Beispiel:

• Hauptfarbe Grün: #2c786c
• Kontrastfarbe Gelb: #f8b400

Inspirationsquelle #2: Zufällige harmonische Farbpaletten generieren lassen

Die ganz spontane Variante ist der Generator Coolors (einfach die Leertaste drücken, um eine neue Farbpalette generieren zu lassen): https://coolors.co/app

Die Farben werden basierend auf der Farbenlehre generiert, und sind darum meistens sehr harmonisch.

Trotzdem wirst Du Dich wahrscheinlich durch einige Farbpaletten durchklicken, bis Dich etwas anspricht.

Wenn die Farben in grossen Flächen und direkt nebeneinander angenehm anzuschauen sind, dann sind sie auch für Deine Website eine sichere Wahl.

Nehmen wir wieder an, unsere Hauptfarbe ist Grün. Hier haben wir ein Beispiel mit einem schönen Pastell Grün gefunden:

Als Kontrastfarbe kommt grundsätzlich jede der 4 anderen Farben in Frage.

Bei der Wahl der Kontrastfarbe kann Dir wieder die Farbpsychologie bzw. Deine Vorzüge der Faszination helfen: Willst Du z.B. bei der obigen Farbpalette eher das jugendliche und freundliche Orange als Ergänzung, oder das Lavender/Violett, um etwas mehr Luxus und Exklusivität reinzubringen?


Inspirationsquelle #3: Farbpalette von einem Bild erstellen lassen

Ein Bild gefällt Dir von den Farben und Stimmung her perfekt?

Dann lass Dir automatisch eine auf dem Bild basierende Farbpalette erstellen.

Dafür verwenden wir wieder das Tool Coolors: https://coolors.co/

Über diesen Button/Icon kannst Du ein beliebiges Bild hochladen:

Hier als Beispiel habe ich ein stimmiges Strandbild mit kräftigen und warmen Farben hochgeladen. Auch in diesem Beispiel soll unsere Hauptfarbe Grün sein.

Mit dem Button „Auto“ kannst Du neue Farbpaletten generieren lassen. Auch hier kann es einige Anläufe brauchen, bis Dir das Tool die gewünschten Farben rauspickt.

Du kannst auch direkt den Farbkreis im Bild verschieben, um so selber die Farbe im Bild auszuwählen:

Passend zum kräftigen Grün würde als Kontrastfarbe das helle Blau vom Himmel passen (einfach auf die gewünschte Farbe klicken, um den Hex Code anzuzeigen):

Hier habe ich Dir noch 2 Links mit vielen tollen Beispielen von Bildern und darauf basierenden Farbpaletten:

• 100 komplett verschiedene Bilder und Farbpaletten: https://www.canva.com/learn/100-color-combinations/
• Und hier findest Du viele verschiedene feminin wirkende Paletten mit Pastellfarben: https://www.design-seeds.com/

Bonus Tipp: Diese Funktion vom Coolor Tool kannst Du auch nutzen, indem Du von einer Website einen Screenshot machst, und diesen Screenshot hochlädst (siehe direkt den nächsten Tipp und Inspirationsquelle #4):

Inspirationsquelle #4: Fremde Websites

Sei Dir nicht zu schade, ein Farbkonzept, das Dir auf einer fremden Website gefällt, als Inspiration zu nehmen. Natürlich nicht von der direkten Konkurrenz. Aber wenn Du z.B. ein Ernährungsberater bist, kannst Du Dich problemlos von einem ausländischen Ernährungsberater inspirieren lassen. Oder natürlich einfach von einer komplett fremden Branche.

Hinweis: Es gibt nur ganz wenige Farbtöne, die geschützt sind. Z.B. das Gelb der Schweizerischen Post, das Nivea-Blau oder das Lila der Milka Schokolade. Und der Schutz gilt nur für die Branche bzw. Art der Produkte. Irgendein Schokolade Produkt mit Lila? Nicht erlaubt. Lila für einen Hochzeitsfotograf? Kein Problem.

Du hast keine Vorbild Websites? Dann gebe ich Dir hier einige Alternativen:

Mein erster Tipp ist: https://www.lapa.ninja/

Diese Website ist eine Sammlung von Websites (genauer, Landing Pages). Auch hier kannst Du einfach nach Deiner gewählten Hauptfarbe suchen:

Dann suchst Du einfach nach einer Website, bei der Dir die Farbpalette gefällt (Hauptfarbe + ev. Kontrastfarbe):

Dann machst Du einfach einen Screenshot von der Website und lädst diesen in das Tool Coolors (https://coolors.co/) hoch, welches wir vorher bereits angeschaut haben:

Du hast keine Vorbild Website? Hier eine Sammlung von Artikeln, die genau das für viele verschiedene Websites gemacht haben:

• Speziell für einfarbige Designs: https://designmodo.com/websites-single-color-background/
• Sehr viele verschiedene und kreative Farbkombinationen von Websites: https://visme.co/blog/website-color-schemes/
• Hier Farben von Illustrationen und echten Produkten https://99designs.de/blog/design-kreativitaet/farbkombinationen/
• Speziell Pastellfarben: https://www.templatemonster.com/blog/pastel-color-schemes-for-refined-website-design/
• Verschiedene Beispiele nach Farbe sortiert (Rot, Gelb, Grün, etc.): https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/

Schritt #5: Deine komplette Farbpalette für die Anwendung auf der Website

Jetzt wo Du Deine Hauptfarbe plus ev. Kontrastfarbe gewählt hast, können wir Deine Farbpalette (welche Du dann für die Website brauchst) vervollständigen.

Auf der Website brauchen wir nämlich häufig verschiedene Tönungen (heller) und Schattierungen (dünkler) der gleichen Farbe (z.B. für Hover-Effekte).

Hover-Effekte sind alle Effekte, die beim darüberfahren mit dem Mauszeiger passieren. Links oder Buttons sind ein typisches Beispiel:

Aber es kann auch sein, dass wenn Du Deine Farbe für eine grössere Fläche benutzen willst, dass sie zu grell wirkt.

Es ist also sehr nützlich, Deine Farbe in verschiedenen Tönungen und Schattierungen zur Verfügung zu haben.

Und diese kannst Du Dir ganz einfach mit folgendem Tool hier generieren lassen: https://maketintsandshades.com/

Nehmen wir das Grün und Rosa aus dem letzten Beispiel:

• Grün: #296253
• Rosa: #F7D6DD

Notiere Dir folgende zusätzlichen Hex Codes:

• Je 2 Tönungen und Schattierungen pro Farbe.
  • Wie Du oben am Beispiel siehst, müssen das nicht unbedingt die ersten beiden Hex Codes sein. Beim bereits hellen Rosa habe ich z.B. jeweils eine Tönung übersprungen, da der Kontrast ansonsten sehr schwach wäre.
• Zusätzlich die hellste Tönung der Farben. Diese können wir als Hintergrundfarbe nutzen.

Notiere Dir Deine komplette Farbpalette mit allen Hex Codes (kopiere einfach diese Liste und füge dann Deine eigenen Farben und Hex Codes ein):

• Hauptfarbe: #296253
  • Schattierung 1: #25584b
  • Schattierung 2: #214e42
  • Tönung 1: #3e7264
  • Tönung 2: #548175
• Kontrastfarbe (optional): #F7D6DD
  • Schattierung 1: #dec1c7
  • Schattierung 2: #c6abb1
  • Tönung 1: #f9dee4
  • Tönung 2: #fae6eb
• Hintergrund von Hauptfarbe: #eaefee
• Hintergrund von Kontrastfarbe: #fefbfc
• Schwarz: #222222 oder #333333
  • Hier ein kleiner Tipp: Es ist für das Auge viel angenehmer, wenn die Textfarbe nicht ein „hartes“ #000000 Schwarz ist, sondern eben ein etwas helleres und „weicheres“ #222222 oder #333333 Schwarz.
• Weiss: #FFFFFF

Damit bist Du ausgerüstet, um Deine Website (oder z.B. auch Deine Social Media Profile) in Deinen Farben zu gestalten.

Zusammenfassung und Checkliste für diese Lektion

Das war eine äusserst lange Lektion. Hier noch einmal alles kurz zusammengefasst:

1. Wähle, ob Du 1 oder 2 primäre Farben nutzen willst (Hauptfarbe plus ev. Kontrastfarbe).
2. Entscheide Dich für eine Hauptfarbe (Blau, Rot, Grün, etc.), basierend darauf, welche Farben noch nicht von der Konkurrenz besetzt sind und zu Deinen Vorzügen der Faszination passen (also die passenden Emotionen und Gefühle wecken).
3. Farbenlehre und Begriffe: Die Quintessenz ist: Im Webdesign (HTML/CSS) arbeiten wir mit dem RGB Hex Wert (z.B. #296253).
4. Wie genau soll meine Hauptfarbe aussehen? Hier habe ich Dir 4 verschiedene Inspirationsquellen gezeigt, wie Du tolle Farben findest.
5. Vervollständige Deine Farbpalette mit den Tönungen und Schattierungen (mit einem simplen Online Tool).

Schau mir über die Schultern

Hier wie ich vorgegangen bin, um mein eigenes Farbkonzept zu erstellen:

Schritt #1 (wähle, ob Du 1 oder 2 primäre Farben nutzen willst): Ich habe mich dafür entschieden, es einfach zu halten und werde nur mit 1 Hauptfarbe arbeiten. Einfach auch um Dir zu zeigen, dass man wirklich auch mit nur einer Farbe und minimalem Aufwand ein stimmiges Design hinbekommt 🙂

Schritt #2 (entscheide Dich für eine Hauptfarbe basierend darauf, welche Farben noch nicht von der Konkurrenz besetzt sind und zu Deinen Vorzügen der Faszination passen): Als Hauptfarbe kommen Blau und Orange nicht in Frage, da diese bereits von meiner Konkurrenz verwendet werden.

Von den übrigen Farben schliesse ich die für mich gar nicht Passenden aus (bezüglich Emotionen und/oder meinen 2 Vorzügen der Faszination: Tiefgang und Innovation): Gelb, Pink, Braun, Weiss, Grau, Schwarz

Es bleiben die folgenden 4 Farben, die grundsätzlich passen würden: Türkis, Grün, Rot, Violett

Hier kommt jetzt auch ein wenig das Bauchgefühl zum Zug: Ich kann Grün (der Natur und Emotion Aspekt passt irgendwie gar nicht) und Rot (zu viel Aufmerksamkeit und Energie) schnell ausschliesen.

Es bleibt Türkis und Violett, welche mir beide sehr gefallen und Potenzial haben.

Meine Wahl fällt schliesslich auf Türkis. Ich denke, es passt einerseits etwas mehr zu dem mir wichtigen Aspekt „Innovation“, und andererseits hat es auch eine sehr dynamische und positive Stimmung, welche ich den Besuchern auf meiner Website vermitteln möchte.

Ich hoffe Du siehst, wie wertvoll dieser ganze Prozess ist! Spontan aus dem Nichts wäre ich niemals bei diesen Farben gelandet. Und so muss ich meine Wahl in Zukunft auch nie hinterfragen.

Schritt #3 (Farbenlehre und Begriffe): Hier gibt es nichts zu entscheiden/zeigen 🙂

Schritt #4 (Wie genau soll meine Hauptfarbe aussehen?): Jetzt wo ich weiss, welche Farbe ich suche, habe ich die verschiedenen beschriebenen Inspirationsquellen abgeklappert, bis ich ein Türkis gefunden habe, welches mir gefällt:

Schritt #5 (vervollständige Deine Farbpalette mit den Tönungen und Schattierungen mit https://maketintsandshades.com/): Ich glaube, auch das muss ich nicht nochmal im Detail zeigen.

Und so habe ich meine eigene Farbpalette erstellt 🙂