Wenn jemand zum ersten Mal auf deiner Webseite ankommt, spielt die Farbe eine wichtige Rolle bei dem, was er denkt. Zwischen 62-90 % des ersten Eindrucks der Verbraucher beruht allein auf der Farbwahl, sagen Untersuchungen.
Wenn du Farben auswählst, die zu deiner Marke passen – und zu dem, was deine Verbraucher über dein Unternehmen und deine Produkte denken sollen – kann das ein starkes Branding- und Marketinginstrument sein.
In diesem Artikel behandeln wir mehr als 25 fantastische Website-Farbschemata für Landing Pages, E-Commerce und persönliche Webseiten und wie du deine eigenen Farben ohne Zeitverlust auswählen kannst.
Wie du Farbschemata für deine Webseite auswählst
Die Augen eines nicht farbigen menschlichen Erwachsenen können über 1.000.000 verschiedene Farben sehen. Wie wählst du mit all diesen Optionen schnell und effizient das richtige Farbschema aus? Das ist die Herausforderung für alle Webdesigner, die versuchen, ein Farbschema oder eine Farbpalette für ihr Design von Grund auf neu zu erstellen.
Mit so vielen Auswahlmöglichkeiten kannst du nicht alle Schattierungen und Farbtöne einzeln bewerten und ohne Bezugspunkt die geeignetsten auswählen. Du musst deine Optionen eingrenzen. Am besten fängst du damit an, eine Primärfarbe als Ausgangspunkt zu finden.
Vielleicht ist der beste Weg dies zu tun, indem du dir die beliebtesten Auswahlen der Industrie ansiehst. Das kann dir helfen, etwas über die Psychologie der Farbe zu lernen und welche Primärfarben für deine Firma oder dein Produkt gut funktionieren könnten.
Farbauswahl nach Industrie
Verschiedene Firmen und Produkte wählen verschiedene Farben, um ihre Marke zu identifizieren. Aber warum? Farbe ist nicht nur eine effizientere Methode, um die Aufmerksamkeit deiner Interessenten und Verbraucher zu erregen. Es ist eine Möglichkeit, mit ihnen auf einer emotionalen, fast unbewussten Ebene zu kommunizieren.
In gewisser Weise ist es eine Möglichkeit, deine Marke im Kopf des Verbrauchers aufzubauen, bevor du ein einziges Wort oder einen einzigen Satz der Kopie verwendest. Keine Farbe erzählt dem Verbraucher die gleiche Geschichte, daher hängen die beliebtesten Primärfarben der Marke von Branche zu Branche ab.
“Welche Emotion sollen potenzielle Kunden mit deiner Marke, deinem Produkt oder deiner Dienstleistung verbinden?”
Das ist die Leitfrage, die dir helfen soll, deine Primärfarbe für deine Palette zu identifizieren.
Blau vermittelt:
In Branchen, in denen das Vertrauen der Verbraucher wichtiger ist als jeder andere Faktor und in denen Professionalität und Zuverlässigkeit wichtige Verkaufsargumente sind, wird Blau oft als primäre Markenfarbe verwendet.
Sie spricht weder Spontaneität noch Emotionen an. Stattdessen leitet es einen ruhigen und logischen Entscheidungsprozess ein.
Am häufigsten wird es in den folgenden Branchen verwendet:
- Bankwesen
- Fluggesellschaften
- Kommunikation
- Konsumfinanzierung
- Energieversorger
- Schwere Ausrüstung
- Heimwerken
- Hotels
- Pharmazeutische Erzeugnisse
Rot vermittelt:
Industrien, die auf Emotionen und impulsive Entscheidungen angewiesen sind (wie Restaurants und Fastfood), verwenden oft Rot als Primärfarbe. Es wird angenommen, dass Rot den Hunger anregt, daher ist es eine Lieblingsfarbe internationaler Lebensmittelmarken.
Am gebräuchlichsten in den folgenden Industrien:
- Restaurants
- Getränke
- Lebensmitteleinzelhandel
- Immobilien
- Bekleidung
Grün vermittelt:
Die meisten Menschen assoziieren die Farbe Grün mit der Natur, Pflanzen und lebhaften, erholsamen Umgebungen. Industrien, die sich auf das Versprechen eines besseren Wohlbefindens oder Produkte mit rein natürlichen Inhaltsstoffen verlassen, entscheiden sich oft für Grün.
Am häufigsten in den folgenden Industrien:
- Nahrungsmittel und Getränke
- Kaufhäuser
- Immobilien
- Chemikalien
Schwarz: Selbstvertrauen, Raffinesse
Auch wenn einige Firmen vielleicht standardmäßig auf Schwarz setzen, anstatt eine bestimmte Farbwahl zu treffen, da es sich sicher anfühlt, ist es auch eine führende Wahl in Branchen, in denen das Vertrauen oder die Raffinesse der Verbraucher ein Schlüsselfaktor ist.
Am gebräuchlichsten in den folgenden Industrien:
- Bekleidung
- Zubehör
- Internet- und Mobilfunkanbieter
- Kaufhäuser
- Hotels
Folge nicht blind deinem Geschmack und deinen Instinkten, ziehe die Farbtheorie und Farbpsychologie in Betracht, wenn du deine Entscheidung triffst.
Wie viele Farbschemata sollten auf einer einzigen Webseite verwendet werden?
Bei einem Standard-Farbschema für Webseiten kannst du drei bis sieben verschiedene Farben in einem einzigen Schema oder einer Palette auswählen.
“Aber wie viele verschiedene Farbschemata solltest du auf einer einzigen Webseite verwenden?”
Das hängt von den individuellen Umständen und deinen Zielen mit deiner Webseite ab. Wenn es sich bei deiner Webseite um eine Firmenwebsite oder einen Blog handelt, die einer einzigen Marke, einem Produkt oder einem Unternehmen gewidmet ist, solltest du dich an ein einziges Farbschema halten.
Handelt es sich bei deiner Webseite hingegen um einen E-Commerce-Shop, kannst du verschiedene Farbschemata für verschiedene Produktschemata verwenden, um unterschiedliche emotionale Reaktionen für verschiedene Produktkategorien hervorzurufen.
Das Problem bei der Verwendung mehrerer Paletten ist, dass du die Dinge für alle internen oder externen Content-Ersteller komplizierter machst, was die Wahrscheinlichkeit für menschliche Fehler und Komplikationen erhöht.
Wenn du ein Farbschema für deine Webseite auswählst, solltest du es unbedingt vermeiden, es zu übertreiben und Wochen mit der Aufgabe zu verbringen. Es ist sicherlich eine wichtige Entscheidung, aber die Wahl der richtigen Farben wird dir nicht helfen, allein den Traffic auf deiner Webseite zu erhöhen oder die Conversions auf deinen Produktseiten zu steigern.
Wie man die exakten Farbschemata auf eine Webseite bekommt
Um jede Farbe, die auf einer Webseite verwendet wird, bis hin zum exakten Farbton und Hex-Code zu identifizieren, kannst du eine Google Chrome Erweiterung oder Firefox Addon wie ColorZilla verwenden.
Wenn ColorZilla installiert ist, kannst du einfach mit dem Mauszeiger direkt über jedes Designelement auf jeder Webseite, jedem Logo oder Bild fahren und es zeigt dir die exakten HTML-Hex- oder RGB-Farbcodes für diesen Pixel an. Wenn du die verwendeten Farben nicht einzeln identifizieren möchtest, kannst du auch einen Farbpalettengenerator verwenden, der ein Bild verwendet, wie z.B. Colormind’s Image Color Extraction Tool.
Allerdings ist das keine so perfekte Lösung, wie es scheinen mag. Du musst einen Screenshot von der Webseite machen und ihn hochladen und die generierte Palette wird nicht unbedingt 100% genau zu den tatsächlich im Design verwendeten Schattierungen passen. Wenn die Webseite zum Beispiel einen Farbverlauf oder ein Bild mit Farben enthält, die über das Hauptfarbschema hinausgehen, neigt die generierte Palette dazu, ungenau zu sein.
Im Moment ist der beste Weg, die exakten Farben, die im Webdesign verwendet werden, immer noch ein Plugin oder eine Erweiterung zur Farberkennung zu verwenden, oder einen Screenshot zu machen und die Dinge manuell in einem Bildbearbeitungswerkzeug wie PhotoShop zu erledigen.
Welches Webseiten Farbschema benutzen wir bei Kinsta?
Wie die meisten Webseiten folgen wir bei Kinsta einem grundlegenden 3-Farben- oder Triadenschema für alle unsere Inhalte. Da wir ein Hostingunternehmen sind, das sich auf WordPress konzentriert, müssen wir nicht mehrere Paletten auf unserer Webseite implementieren.
Wir verwenden ein dunkles Violett (#5333ed) als Primärfarbe, Türkis (#2cd4d9), um eingängige und dennoch ausgewogene Farbverläufe nebeneinander zu stellen und zu erzeugen, und ein gedämpftes Grau für den Text (#6E7076).
Aber was machen andere Firmen?
Lasst es uns herausfinden!
26 Beispiele für das beste Webseiten Farbschema
Wir haben das Web nach großartigen Beispielen für Farbschemata durchforstet und die Seiten sogar nach Kategorien getrennt, so dass es für dich einfach sein wird, Inspiration von relevanten Webseiten zu finden.
Tolle E-Commerce Webseiten Farbschemata
Im Folgenden behandeln wir ausgezeichnete E-Commerce-Beispiele für Farbschemata, die zu ihrer Marke und Branche passen.
1. Hautpflege Produkt: Hell & Verspielt
Bliss‘ Farbwahl ist genau richtig, wenn es um ihre Marke geht. Die Farben sind leuchtend und verspielt und begleiten perfekt die Botschaft des Unternehmens von körperlicher Positivität und innerem Glück.
2. Kleidungsmarke: Klar und prägnant
Le Bonnet ist ein Bekleidungsunternehmen, das bei der Farbpalette seiner Webseiten auf Klarheit setzt. Einige wenige, intensive Farben, zusammen mit einer undurchsichtigen beigen Hintergrundfarbe, um die Produkte voneinander zu trennen, tragen dazu bei, die Einfachheit des Designs hervorzuheben.
3. Bekleidungsgeschäft: Schlichtheit
Revise Concept ist eine Website für Bekleidungsmarken, und anstatt sich auf die Farben in der Farbpalette der Webseite zu verlassen, verwendet sie einfache Farben und Weißraum, um die Farben und Designs der Kleidung selbst hervorzuheben.
Diese Herangehensweise kann eine ausgezeichnete Alternative für E-Commerce-Websites sein, die das Produkt für sich selbst sprechen lassen wollen, anstatt ein schlagkräftiges Design zu entwerfen, das die Geschichte erzählt.
4. Geschirr: Zuverlässigkeit und Professionalität
My Tableware ist eine deutsche E-Commerce Webseite für anpassbares Geschirr.
Die Webseite verwendet ein einfaches Farbschema aus dunkelblau, hellbraun und grau, um ein Gefühl von Professionalität und Zuverlässigkeit zu vermitteln, mit einem Hauch von Raffinesse.
5. Kaugummi: Natürlich und Impulsiv
Neuro ist eine Marke von Koffeinkaugummi und Minzbonbons, die den Menschen helfen sollen, sich zu konzentrieren. Es verwendet eine Mischung aus weicheren Farben wie Türkis, Hellblau und Beige, um ein Gefühl von natürlichen Inhaltsstoffen zu vermitteln.
Mit Rot und Orange werden auch Emotionen und Impulsentscheidungen angesprochen, wobei die Akzentfarbe hervorragend eingesetzt wird.
6. Uhr: Raffinesse und Luxus
Prime Ambassador ist eine schwedische Uhrenmarke mit einer edlen E-Commerce Webseite, die die Produkte hervorheben soll. Die Farbkombinationen aus einem fast goldenen, hellbraunen Farbton auf dunkelgrauem Hintergrund und Holzakzenten auf dem Bild vermitteln dem Besucher ein Gefühl von Raffinesse und Luxus.
Die Farben sind perfekt, um ein hochwertiges Produkt wie eine maßgefertigte Uhr zu bewerben, würden sich aber fehl am Platz anfühlen, wenn man normale Konsumgüter verkaufen würde.
7. Hosen: Kreativ & Zugänglich
Alday ist eine Marke von Komforthosen, die besser passen als die massenproduzierten Jeans und Chinos, die zu niedrigeren Preisen verkauft werden.
Die Webseite ist kreativ und spielerisch, mit lebhaften Farbkombinationen, die dem Besucher und potentiellen Kunden ein Gefühl der Zugänglichkeit vermitteln.
8. Frucht-Snacks: Elegante und akzentuierende Farben
Madies ist eine Produktlinie gefriergetrockneter Fruchtsnacks, die sich an einen modebewussteren Verbraucher richtet als markenlose Trockenfrüchte, die als Massenware verkauft werden.
Der schwarze Hintergrund und die gelbe Personifizierung der reifen Mango unterstreichen die Einfachheit des Designs, was zu einem eleganten Endprodukt führt.
9. Custom Fit Denim: Es lebt
Unspun verwendet leuchtendes Rot und Orange, um die Webseite zum Leben zu erwecken. Perfekt für die Kommunikation mit einem Publikum, das einen aktiven und lebhaften Lebensstil führt.
Farbschemata für persönliche und Reise-Webseiten
Unten findest du unsere Auswahl der besten Beispiele für die Farbgebung von Webseiten für persönliche und Reise-Websites.
10. Kreative Einfachheit
Madeleine Dalla ist eine in New York lebende Fotografin mit einem guten Gespür für Webseitendesign (und einem beeindruckenden Portfolio).
Dadurch, dass sie die Farbe für den Rest des Designs außer Acht lässt, hebt sie die lebhaften Farben ihrer handverlesenen Fotos von jedem ihrer hervorgehobenen Projekte wirklich hervor. Sie nutzt die Abwesenheit von Farbe genauso wie die Farben selbst.
11. Graustufen mit einem Spritzer
Ali Rifai ist ein Creative Art Director und das zeigt sich im Konzept der Webseite. Durch die Verwendung von Graustufen mit nur einem Farbtupfer wird deine Aufmerksamkeit auf die richtigen Keywords und kritischen Bereiche des Designs gelenkt, auf das Wort „originell“ und das charmante Lächeln.
12. Eins mit der Natur
iFly 50 ist ein Online-Magazin, das von KLM zur Feier ihres 50-jährigen Bestehens herausgegeben wurde.
Indem es das Blau des Himmels und des Wassers und das Grün von Gras und Wald hervorhebt, gibt es jedem Besucher das Gefühl, eins mit der Natur zu sein – ein perfekter Ansatz für jede Webseite eines Natur- oder Landschaftsfotografen.
13. Sauber & Professionell
Die Webseite von Benediktas Gylys ist eine Meisterklasse für sauberes Design. Es gibt kein Durcheinander und das gilt auch für die Farbauswahl.
Die primäre violette Farbe unterstreicht die Professionalität, und obwohl es nur ein paar wenige Farben gibt, dienen sie alle dazu, die kritischen Elemente, die Illustrationen, hervorzuheben.
14. Pragmatische Farben
BucketListly verwendet Farben pragmatisch, indem es das Gelb benutzt, um Keywords, CTAs und bisher besuchte Länder hervorzuheben.
Es zeigt, wie viel Wert man aus einer einzelnen Farbe in einem Design ziehen kann, wenn man sie in Verbindung mit Weißraum und den richtigen Konzepten verwendet.
15. Elegante Einfachheit
Das Bild auf der Webseite von Lars Franzen verwendet eine dunkle Hintergrundfarbe, um die Farbe und Individualität der Personen auf dem Porträt hervorzuheben.
16. Futuristisches Overlay
Die persönliche Webseite von Dot Lung macht einen großartigen Job, die einfache Farbpalette mit Überlagerungen und sauberen Hintergrundgrafiken zu maximieren. Das Violett im Hintergrund schafft ein zusammenhängendes Erlebnis von Seite zu Seite.
17. Hell und dunkel
Love for Iceland ist ein großartiges Beispiel dafür, wie die Farben in einem hervorgehobenen Bild die Stimmung bestimmen können. Mit dem hellen Blau von klarem Eis, beleuchtet vom Sonnenlicht, oben links, bis zur höhlenartigen Dunkelheit unten, setzt es eine unheilvolle und abenteuerliche Stimmung für den Besucher ein.
Landing Page Farbschemata
Unten haben wir verschiedene Landing Pages mit einzigartigen oder effektiven Farbschemata hervorgehoben.
18. Scharfe Kontraste
Zenly verwendet scharf kontrastierende Farben, um die eigentliche Funktionalität der Live Map App hervorzuheben (so bettet man übrigens Google Maps auf WordPress Webseiten ein). Der Hintergrund des Weltraums hebt das Design der kugelförmigen App hervor und verleiht ihr einen futuristischen Beigeschmack.
19. Farbe zum Hervorheben
Slack verwendet eine bewährte Landing-Page-Farbschema-Taktik, bei der Farben meist dazu verwendet werden, wichtige Handlungsaufforderungen und andere wesentliche Elemente hervorzuheben. Für eine Landing Page musst du das Design nicht überkomplizieren, und das gilt auch für Farben.
Seht euch unbedingt unseren ausführlichen Vergleich Microsoft Teams vs. Slack an.
20. Leuchtende Farben wecken Emotionen
Spotify verwendet lebhafte Farben, um auf seiner überaus einfachen neuen Landing Page Emotionen bei einem Publikum zu wecken. Die Farben erzählen mehr von einer Geschichte als die Zwischenüberschrift vor dem CTA-Button. Schau dir unseren Leitfaden an, wenn du darüber nachdenkst, bald einen Podcast zu starten.
21. Farbkontraste schaffen Ordnung im Chaos
Autonomy benutzt Farben und Kontrast, um Ordnung in einem ansonsten chaotischen, animierten Design zu schaffen. Das lebhafte Gelb schneidet sich durch und trennt sich vom Hintergrund und anderen Objekten.
22. Futuristisches Farb-Ensemble
Bugsnag verwendet eine abwechslungsreiche Farbkollektion, um mit seinem flachen Design ein futuristisches Hightech-Gefühl zu vermitteln. Die Kombination von Farben und Formen gibt dem Besucher das Gefühl, dass es das Jahr 2020 ist und dass er darauf vertrauen kann, dass das Unternehmen auf dem neuesten Stand der Technik ist.
23. Lebendig mit Farbe
Die Landingpage von Connect Homes erwacht mit hellen, aber sanften Farben zum Leben. Die Farbpalette schafft eine aufregende Balance, die ein modernes Gefühl vermittelt.
24. Konservative Farben, verspieltes Design
Plink’s Landing Page basiert auf einem relativ konservativen Dunkelblau, gleicht dies aber mit einer spielerischen und lustigen Animation und Design im Allgemeinen aus.
25. Natürliche Vitalität
Travelshift verlässt sich stark auf die Farbe Grün, um ein Gefühl von Natur und Vitalität zu vermitteln. Anstatt CTAs oder Schlüsselinhalte mit einer aufmerksamkeitsstarken Farbe wie Rot oder Orange hervorzuheben, fungiert das Grün stattdessen als Versprechen der Verjüngung.
26. Leuchtende Farben der Hoffnung
Swab the World verwendet ein Farbschema aus hellen, kontrastierenden Farben, um ein Gefühl der Hoffnung zu vermitteln. Das passt perfekt zur Landing Page einer gemeinnützigen Organisation. Der Farbkontrast arbeitet mit den Formen zusammen, um den modernen/futuristischen Ansatz hervorzuheben, mit dem sie die Herausforderung angehen.
Webseiten Farbschema-Generatoren
Wenn du keine angrenzenden Farben, Farbverläufe oder Schattierungen für dein Schema oder deine Palette manuell auswählen möchtest, kannst du Online-Hilfswerkzeuge verwenden. Es gibt eine Reihe von kostenlosen Farbschemata oder Palettengeneratoren, die online verfügbar sind. Wir werden uns einige der besten Optionen weiter unten genauer ansehen.
Colormind
Colormind ist ein KI-gesteuerter Farbgenerator, mit dem du Farben für Webseiten, Vorlagen und vieles mehr sofort erzeugen kannst. Das einzige Problem ist, dass du keine Primärfarbe festlegen kannst, aus der du eine Palette extrapolieren kannst, du musst sie jedes Mal zufällig generieren. Er kann auch Farbpaletten aus jedem Bild extrahieren, das du willst.
Coolors.co
Coolors.co ist eine Web- und Handy-App, die dir hilft, Paletten von Grund auf neu zu erstellen. Sie bietet Farbvarianten für jede Farboption und andere fortgeschrittene Tools, die dir helfen, effiziente Entscheidungen über deine Farbschemata zu treffen.
Paletton
Anstatt zufällige Schemata zu generieren, gibt dir Paletton die volle Kontrolle über deine Palette und darüber, welche Farbe du als Basis-/Primärfarbe verwenden möchtest. Du kannst wählen, welche Art von Palette du willst, ob benachbarte Farben, ein triadisches Farbschema oder andere. Du kannst jede Farbe aus dem Farbkreis auswählen.
ColorSpace
ColorSpace generiert Farbpaletten basierend auf einer Primärfarbe, die du eingibst. Es bietet eine große Auswahl an Stiloptionen, die dir mehr Flexibilität bieten.
Farbenblindheit: Wie du eine farbenblindenfreundliche Palette für deine Webseite auswählst
Das letzte, was man bei der Erstellung einer Webseite beachten sollte, ist, wie verschiedene Leute die Farben sehen werden.
Nicht jeder sieht die „Standard“-Farbpalette. Es gibt drei verschiedene Haupttypen von Farbenblindheit: Deuteranopie, Protanopie und Tritanopie.
Die rot-grüne Farbenblindheit (Deuteranopie und Protanopie) ist die häufigste Form der Farbenblindheit. Sie betrifft etwa 1 von 12 Menschen nordeuropäischer Abstammung. Bei einer so großen Zahl der von ihr betroffenen Bevölkerung lohnt es sich, bei der Gestaltung und/oder Auswahl eines WordPress Themes darüber nachzudenken.
Blau-gelbe Farbenblindheit ist viel seltener und betrifft Männer und Frauen gleichermaßen.
Wie du eine farbenblindenfreundliche Palette für deine Webseite auswählst
Da die Zahl der rot-grünen Farbenblinden viel höher ist als jede andere Form der Farbenblindheit, sollte es deine oberste Priorität sein, sie mit deinem Design anzusprechen. Da sie Rot, Grün und Violett nicht trennen können, sondern sie eher als unterschiedliche Farbtöne von Gelb und Blau sehen, solltest du vermeiden, kontrastierende Farben zu verwenden, die am Ende zu ähnlich aussehen.
- Setze Grün nicht in Kontrast zu Gelb oder umgekehrt.
- Setze Gelb nicht in Kontrast zu Rot oder Orange.
- Setze Lila nicht in Kontrast mit ähnlichen Blautönen.
Wenn du eigenständige Primärfarben für dein Logo oder Design wählst, solltest du überlegen, ob es für farbenblinde Verbraucher noch On-Brand ist. Zum Beispiel ist das Lila von Kinsta für rot-grüne farbenblinde Verbraucher immer noch ein dunkles Blau, das eine Botschaft der Zuverlässigkeit und Vertrauenswürdigkeit vermittelt. Für uns ist das 100% On-Brand, also gibt es keinen potentiellen Konflikt in der Vorstellung unserer Kunden.
Zusammenfassung
Das menschliche Auge ist vielleicht in der Lage, Millionen verschiedener Farbschattierungen zu unterscheiden, aber du musst nicht alle deine Optionen durchkämmen, um ein Farbschema zu finden, das für deine Webseite funktioniert.
Indem du dich auf deine Marke und deine idealen Kunden konzentrierst, kannst du deine Auswahl an Primärfarben eingrenzen. Sobald du deine Auswahl getroffen hast, kannst du dich auf Online-Farbpalettengeneratoren verlassen, um deine eigene Farbpalette zu vervollständigen, oder du kannst passende Farben anhand von Beispielen und Vorlieben auswählen.
Mit der richtigen Herangehensweise kann ein Farbschema für Webseiten erstellt werden, das als Ausgangspunkt deines Designprozesses verwendet werden kann. Allerdings ist es oft notwendig, den richtigen Webentwickler/-designer einzustellen, wenn du das richtige professionelle Aussehen und Gefühl für deine Marke erhalten möchtest.
Jetzt ist es an der Zeit, die Schriftarten auszuwählen, oder?
Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.
Schreibe einen Kommentar