Wussten Sie, dass bestimmte Farben bei Menschen unterschiedliche Gefühle und Reaktionen hervorrufen?
Fühlen Sie sich von der Anzahl der möglichen Farbpaletten für Ihre Website überwältigt? Sie wissen nicht, welche Sie wählen sollen?
Jeder hat Lieblingsfarben.
Ein erfahrener Designer weiß jedoch, wie wichtig es ist, ein Farbschema auf der Grundlage der Marke zu bewerten. Die Bedeutung der Farben. Und die Produkte oder Dienstleistungen, die beworben werden.
Farben verursachen tatsächlich emotionale Reaktionen, je nachdem, welche Palette Sie verwenden.
Eine gute Farbauswahl erfordert sorgfältige Planung.
Sie können die Interpretation des Gesehenen durch einen Besucher ebenso beeinflussen wie das Layout und die Typografie einer Site – und wenn sie gut gemacht sind, können sie sich positiv auf die Bewertung der Marke als Ganzes durch jeden Besucher auswirken.
In diesem Artikel werfen wir einen Blick darauf, warum es wichtig ist, für Ihre Site die richtigen Farben auszuwählen. Außerdem stellen wir Ihnen 23 verschiedene Farbpaletten von echten Sites vor, mit denen Sie die Aufmerksamkeit Ihrer Besucher effektiv auf sich ziehen können.
Warum ist Ihr Farbschema so wichtig?
Bevor wir uns in den Prozess der Auswahl eines Farbschemas für Ihre Site stürzen, ist es wichtig, genau zu verstehen, warum das Farbschema Ihrer Website so wichtig ist.
Schließlich glauben Sie vielleicht, dass es auf den Inhalt ankommt. Und das stimmt, aber er ist nicht alles.
Menschen lieben Inhalte. Sie fühlen sich von frischen Stimmen und verlockenden Informationen angezogen, aber Sie müssen zuerst ihre Aufmerksamkeit gewinnen. Und hier kommen die Farbpaletten von Websites ins Spiel.
Wenn Sie das richtige Farbschema für Ihre Website wählen, haben Sie die Möglichkeit, das Erlebnis Ihrer Besucher mit Ihren Inhalten drastisch zu verbessern.
So gehts:
1. Schaffen Sie Markenbekanntheit
Ihre Site ist im Wesentlichen das Online-Zuhause Ihres Unternehmens.
Das heißt, es muss eine genaue Darstellung Ihrer Marke sein. Und darüber hinaus muss es einprägsam genug sein, damit die Benutzer nach ihrem ersten Besuch wiederkommen.
Schließlich sind viele Ihrer Besucher bei ihrem ersten Besuch noch nicht bereit, einen Kauf zu tätigen oder eine andere größere Transaktion durchzuführen – und sie müssen sich an Ihr Unternehmen erinnern, um wiederzukommen und diese Aktionen durchzuführen.
Glücklicherweise Farbe steigert die Markenbekanntheit um 80 %.
Wenn Ihr Unternehmen also bereits ein etabliertes Farbschema hat, ist es wichtig, dieses in das Design Ihrer Website zu integrieren. So können Besucher es viel einfacher sofort mit anderen Orten verknüpfen, an denen sie Ihre Marke gesehen haben.
Und wenn Ihr Farbschema auf Ihrer gesamten Site einheitlich ist, wissen Ihre Besucher bei ihrer Rückkehr, dass sie am richtigen Ort sind, unabhängig davon, auf welcher Seite sie genau gelandet sind.
Ihr Webdesign informiert die Benutzer nicht nur darüber, wer Ihr Unternehmen ist, sondern spielt auch eine wichtige Rolle bei der spontanen Beurteilung Ihrer Marke durch die Benutzer.
Einer Umfrage zufolge nannten 94 Prozent der Befragten Webdesign als einen der Haupttreiber für Erste Eindrücke der Website.
Natürlich umfasst Webdesign viel mehr als nur Farbe.
Aber wenn man bedenkt, dass die Farbe eines der auffälligsten Elemente auf Ihrer Site ist und eines der wenigen, das ein Benutzer in diesen ersten 50 Millisekunden erkennen kann, kann Ihre Farbpalette für die Beurteilung Ihres Unternehmens durch einen Benutzer ausschlaggebend sein.
2. Beeinflussen Sie die Meinung Ihrer Besucher über Ihre Website
Bis zu einem gewissen Grad ist der Grund dafür klar.
Schließlich ist die Farbe einer der am einfachsten zu „verstehenden“ Aspekte einer Seite. Sie kann fast augenblicklich beurteilt werden und erfordert nicht, dass Besucher den Text oder andere Botschaften bewerten.
Aber es ist auch wichtig, die Rolle zu berücksichtigen, die die Psychologie der Farbe spielt bei diesen vorschnellen Urteilen eine Rolle.
Viele Unternehmen nutzen diese Verbindungen, wie die Logos in der folgenden Tabelle.
Marken, die beispielsweise ein Gefühl von Kreativität und Fantasie erzeugen möchten, neigen dazu, Lila in ihre Bildsprache zu integrieren, während Marken, die ein Gefühl von Ausgeglichenheit und Ruhe erzeugen möchten, zu Schwarz und Weiß tendieren.
Dies hängt direkt mit der „Persönlichkeit“ zusammen, die Ihre Marke haben soll.
In einer Studie zur Markenpersönlichkeit kam die Psychologin und Stanford-Professorin Jennifer Aaker zu dem Schluss, dass fünf Kerndimensionen bei der Persönlichkeit einer Marke eine Rolle spielen:
Marken können manchmal Merkmale mischen, aber meist konzentriert sich ihre „Persönlichkeit“ hauptsächlich auf ein Merkmal. Ein Unternehmen, das Campingausrüstung verkauft, würde sich beispielsweise mit „Robustheit“ identifizieren, während eine Modemarke auf „Eleganz“ abzielt.
Und wie Sie in der Logo-Tabelle oben sehen können, kann Farbe eine wichtige Rolle dabei spielen, den Verbrauchern die Persönlichkeit Ihrer Marke zu vermitteln.
Obwohl den meisten vielleicht nicht bewusst ist, dass das rote Logo eines Unternehmens dazu dient, ein Gefühl der Aufregung zu erzeugen, kann es dennoch genau das bewirken.
Und obwohl jede Farbe dazu dienen kann, ein bestimmtes Gefühl oder eine bestimmte Reaktion hervorzurufen, sind für die meisten Marken und Websites bestimmte Farben die bessere Wahl als andere.
Beispielsweise wird Blau oft als die sicherste Wahl angesehen. Dies liegt zum Teil daran, dass es bei der Mehrheit der Bevölkerung die am weitesten verbreitete „Lieblingsfarbe“ ist.
Tatsächlich sagen 57 % der Männer und 35 % der Frauen, dass es ihre Lieblingsfarbe ist.
Wenn Sie also ein breites Publikum ansprechen möchten, könnte dies eine gute Wahl für Ihre Website sein. Tatsächlich könnte dies der Grund sein, warum einige der heute am häufigsten besuchten Websites, wie Facebook und Twitter, es für ihre Logos und ihr Branding verwenden.
Es ist auch erwähnenswert, dass Blau häufig mit Gefühlen wie Vertrauen, Autorität und Zuverlässigkeit assoziiert wird.
Das heißt aber nicht, dass es für jede Site die beste Wahl ist. Es hängt alles davon ab, welches Gefühl Sie Ihren Besuchern vermitteln möchten.
Wenn sich Ihre Marke beispielsweise auf Gesundheit und Wellness konzentriert, könnte Grün eine bessere Option sein, um diese Assoziation zu erzeugen. Und wenn Sie Ihre Besucher begeistern und sie dazu bringen möchten, schnell etwas zu unternehmen, Rot könnte effektiver sein für die Hilfe beim Erreichen dieses Ziels.
Berücksichtigen Sie bei der Auswahl der Farben für Ihre Site die emotionalen Reaktionen, die diese bei Ihren Besuchern hervorrufen könnten.
Wenn Sie beispielsweise für die Website Ihres Yoga-Studios eine ruhige Atmosphäre schaffen möchten, ist Rot möglicherweise nicht die beste Wahl. Das sollten Sie wissen, bevor Sie viel Geld in Ihr Design investieren.
3. Entwickeln Sie einen Sinn für Ordnung
Abgesehen von den emotionalen Reaktionen, die die einzelnen von Ihnen ausgewählten Farben hervorrufen können, müssen Sie auch die Art und Weise berücksichtigen, wie die Farben auf Ihrer Site miteinander interagieren.
Der beste Weg, dies zu tun, besteht darin, sich einige Grundprinzipien anzuschauen, Farbtheorie.
Wenn Sie schon einmal einen Kunstkurs besucht oder sich designbezogene Ressourcen angesehen haben, ist Ihnen wahrscheinlich etwas Ähnliches wie der Farbkreis in der Grafik oben aufgefallen.
Das am häufigsten in diesem Rad dargestellte Konzept ist die Beziehung zwischen den Primärfarben (Rot, Gelb und Blau) und den Sekundär- und Tertiärfarben, die durch Mischen dieser Farben entstehen.
Aber darüber hinaus kann Ihnen dieses Rad dabei helfen, Farbharmonien oder eine optisch ansprechende Farbanordnung zu schaffen. Eine harmonische Webdesign-Palette kann Ihnen dabei helfen, ein Gefühl von Ausgewogenheit und Ordnung zu schaffen.
Es gibt drei allgemein akzeptierte Arten von Farbschemata, die Sie verwenden können, um diese Art von Harmonie zu erzielen: analog, monochromatisch und komplementär.
Ein analoges Farbschema besteht aus Farben, die im Farbkreis nebeneinander liegen. Dies ist eine der schwierigsten Paletten, da die Farben sich gegenseitig leicht übertönen können.
Allerdings gehören analoge Farbschemata auch zu den lebendigsten.
Wenn Sie also eine farbenfrohe, visuell interessante Website erstellen möchten, könnten Sie mit einer Palette ähnlich der folgenden gut zurechtkommen: anhand von drei Beispielen:
Ein monochromatisches Farbschema liegt am entgegengesetzten Ende des Spektrums zum vorherigen Typ. Wie der Name schon sagt, besteht es aus einer Hauptfarbe, aber die Intensität und Helligkeit der Farbtöne variieren.
Diese Paletten zählen zu den am einfachsten zu erstellenden und „sichersten“ umzusetzenden Paletten, da unterschiedliche Schattierungen derselben Farbe selten miteinander kollidieren oder zu unruhig wirken.
Wenn Sie also ein relativ einfaches Erscheinungsbild für Ihre Website wünschen, ist ein monochromatisches Farbschema wie diese drei könnte für Ihre Marke gut funktionieren:
Schließlich liegt eine ergänzende Palette hinsichtlich der Vielfalt irgendwo zwischen analogen und monochromen Schemata.
Es besteht aus Farben, die im Farbkreis direkt gegenüberliegen. Obwohl es mehr Farben enthält, ergänzen sich diese Farben auf natürliche Weise und überfordern die Besucher nicht.
Wenn Sie etwas Abwechslung in Ihr Farbschema bringen möchten, ohne dass Ihre Website zu überladen wirkt, ist ein Komplementärfarbschema wie einer von diesen könnte die perfekte Wahl sein:
Natürlich sind diese drei nicht die einzigen Farbschemata, die Sie erstellen können. Tatsächlich variieren die besten Palettentypen je nachdem, wen Sie fragen.
A triadisches Farbschema ist eine der Hauptoptionen.
Bei diesem Farbschema werden drei Farben verwendet, die im Farbkreis um 120 Grad voneinander entfernt liegen. In der Grafik oben sind das Orange, Grün und Lila.
Denken Sie bei der Farbauswahl daran, dass die oben aufgeführten Typen keine endgültigen Regeln darstellen. Sie können Ihnen zwar eine allgemeine Vorstellung davon vermitteln, wie Ihre Website insgesamt wirken soll, sind aber bei weitem nicht die einzigen Möglichkeiten, eine Palette zu erstellen, die zu Ihrer Marke passt.
Unabhängig davon, für welche Art von Palette Sie sich entscheiden, können Sie damit auf jeder Ihrer Seiten eine Hierarchie der wichtigsten Inhalte erstellen.
4. Heben Sie bestimmte Elemente hervor
Wie ich im vorherigen Abschnitt erwähnt habe, kann eine definierte Farbpalette einer Website hilfreich sein, um die Wichtigkeit bestimmter Elemente hervorzuheben.
Sie können diese Wirkung maximieren, indem Sie die Isolationseffekt Berücksichtigen Sie dies, wenn Sie entscheiden, wie Sie das Farbschema auf Ihren Seiten verwenden möchten.
Die Grundidee hinter diesem psychologischen Prinzip besteht darin, dass ein Gegenstand umso eher bemerkt und in Erinnerung behalten wird, je mehr er auffällt.
Stellen Sie sicher, dass die von Ihnen gewählten Farben es Ihnen ermöglichen, bestimmte Handlungsaufforderungen auf Ihren Seiten hervorzuheben, ohne mit dem Rest Ihres Designs zu kollidieren.
Dieser Ansatz entspricht auch den Präferenzen der meisten Verbraucher.
In zwei Studien Ästhetische Reaktion auf Farbkombinationen Und Verbraucherpräferenzen für Farbkombinationenfanden die Forscher heraus, dass Verbraucher zwar Farbkombinationen mit ähnlichen Farbtönen bevorzugen, aber auch Paletten mit stark kontrastierenden Akzentfarben bevorzugen.
Die erste Studie zeigte, dass „Paarpräferenz und Harmonie zunehmen, wenn die Farbtonähnlichkeit zunimmt.“ Aber „obwohl Paare mit stark kontrastierenden Farbtönen im Allgemeinen weder als bevorzugt noch als harmonisch beurteilt werden, steigen die Farbpräferenzwerte für Figuren, wenn der Farbtonkontrast zum Hintergrund zunimmt.“
In der zweiten Studie stellten die Forscher fest, dass „Menschen im Allgemeinen gerne Farben kombinieren, die relativ ähnlich sind oder genau übereinstimmen, mit der Ausnahme, dass manche Menschen eine charakteristische Produktkomponente durch die Verwendung einer Kontrastfarbe hervorheben.“
Obwohl Ihre Akzentfarbe einen starken Kontrast aufweisen sollte, ist es in Ordnung – und sogar vorzuziehen –, wenn der Rest Ihrer Palette aus relativ ähnlichen Farbtönen besteht.
Dies bedeutet, dass das Erstellen von Webdesign-Paletten mit einer starken, aufmerksamkeitsstarken Akzentfarbe nicht nur bestimmte Elemente effektiv isoliert, sondern auch eine großartige Möglichkeit ist, eine Kombination zu erstellen, die vielen Ihrer Besucher gefällt.
5. Vereinfachen Sie Designentscheidungen
Wenn es um den Betrieb einer Website oder eines Unternehmens (oder beides!) geht, ist es immer eine gute Idee, nach Möglichkeiten zur Vereinfachung grundlegender Prozesse zu suchen.
Denn je weniger Zeit Sie mit grundlegenden Aufgaben verbringen, desto mehr Zeit bleibt Ihnen für Prozesse und Entscheidungen, die einen größeren Einfluss auf Ihren Erfolg haben.
Und die Festlegung von Webdesign-Paletten ist eine großartige Möglichkeit, die Zeit zum Erstellen neuer Seiten zu verkürzen. Wenn Sie ein festgelegtes Farbschema haben, erleichtern Sie grundlegende Designentscheidungen sowohl für sich selbst als auch für Ihre Designer und Entwickler erheblich.
Dies gilt insbesondere, wenn Sie sich die Zeit nehmen, Ihre Palette auf benutzerfreundliche Weise zu dokumentieren wie dieses Unternehmen:
Wenn Sie ein benutzerfreundliches Dokument Ihrer Palette erstellen, verfügen Sie über eine übersichtliche Ressource mit allen möglichen Optionen für jedes Element.
Wenn Sie (oder Ihre Designer) also nicht wissen, welche Farbe Sie für eine CTA-Schaltfläche verwenden sollen, können Sie einfach im Dokument nachschlagen, wo Sie eine vollständige Liste Ihrer Optionen finden.
Anstatt sich also den Kopf über all die verschiedenen Möglichkeiten zu zerbrechen, können Sie aus einer voreingestellten Liste von Farben wählen. Und sobald Sie einige zur Verwendung oder zum Testen ausgewählt haben, liegen alle HEX- und RGB-Codes bereits direkt vor Ihnen.
Wie viele Farben sollten Sie verwenden?
Es hängt alles von der Komplexität Ihres Designs und den Arten der Farbkombinationen ab. Wenn Sie beispielsweise eine monochromatische Webdesignpalette verwenden, benötigen Sie möglicherweise sieben oder sogar mehr Schattierungen dieser Farbe, um genügend Abwechslung auf dem Bildschirm zu erzeugen.
Sie möchten Farben für bestimmte Teile Ihrer Site angeben, beispielsweise für Text, Hintergründe, Links, Link-Hover-Farben, CTA-Schaltflächen und Überschriften.
So wählen Sie ein Farbschema für Ihre Website aus
Wenn Sie nicht sicher sind, wie Sie die besten Farbpaletten für Ihr Webdesign auswählen, sehen Sie sich dieses von mir erstellte Video an. Darin erhalten Sie praktische Tipps zur Auswahl eines Farbschemas für Ihre Website.
Im Idealfall spiegeln die Farbpaletten einer Website die Werte, Überzeugungen und Ziele eines Unternehmens wider. Kräftige Farben können eine weniger formelle Atmosphäre und mehr Aufregung vermitteln, während gedämpfte Farben dem Unternehmen eine anspruchsvollere oder formellere Note verleihen.
Das lässt sich jedoch nicht immer leicht umsetzen, wenn Sie Tausende von möglichen Farbkombinationen vor sich haben. Sehen wir uns 23 tolle Farbpaletten für Websites an, mit denen Sie das Engagement steigern können.
16 tolle Farbpaletten für Websites zur Steigerung des Engagements (2020)
Die folgenden Websites verwenden verschiedene Website-Farbpaletten mit großer Wirkung. Sie wurden sorgfältig aufgrund der Emotionen ausgewählt, die sie hervorrufen und der Gefühle, die sie vermitteln.
1. Eine Tasse Tee
Der Tasse Mea Die Website verwendet eine ansprechende Farbpalette, die für maximale Lebendigkeit einige Juwelentöne (Rubin und Smaragd) enthält, ansonsten aber auf einer neutralen, monochromen Palette aus Braun- und Grautönen basiert.
Die Palette des Webdesigns vermittelt das Gefühl eines Cafés und spiegelt sich im Heldenbild der Site wider, was für Zusammenhalt sorgt.
2. Das große Zelt
BigTop ist eine Community, die sich auf die Vernetzung von Startups spezialisiert hat. Die Site verwendet eine ungewöhnliche, aber äußerst auffällige Kombination von Juwelentönen, die von Lila und Blau bis hin zu leuchtendem Orange und Gelb reichen.
Die Primärfarben sind alle kühle Farben, wodurch die wärmeren Farben hervorstechen. Sie werden im Screenshot der Homepage bemerken, dass der orange-gelbe CTA Ihre Aufmerksamkeit vor allem anderen erregt.
3. Toris Auge
Unser drittes Beispiel stammt vom Twitter-Visualisierungstool Toris Eye. Dies ist ein großartiges Beispiel für ein überwiegend monochromatisches Farbschema. Hier sehen wir die Auswirkungen einer einfachen, aber wirkungsvollen Farbpalette, die sich um Grüntöne dreht.
Dieses Farbschema lässt sich oft leicht umsetzen, da ein Farbton einer Farbe fast immer mit einem anderen Farbton der gleichen Farbe funktioniert.
4. BarkBox
Die dominierende rosa Farbe auf dem BarkBox Homepage wird auf der gesamten Site in verschiedenen Farbtönen wiederholt. Es bildet einen schönen Kontrast zur blauen Farbe, die in den Logos und CTAs auf der gesamten Site verwendet wird.
Durch die Verwendung von Komplementärfarben, um die Aufmerksamkeit der Besucher auf die gewünschte Stelle zu lenken, können Sie die Farbpalette jeder Website verbessern.
5. Käse-Überlebenskit
Rot ist eine äußerst beliebte Farbe für die Farbpalette einer Website. Sie kann eine reiche Mischung von Emotionen vermitteln, was sie sehr vielseitig macht. Sie ist besonders wirkungsvoll, wenn sie in kleinen Dosen verwendet wird, wie Sie auf der Käse-Überlebenskit Webseite.
Das Rot wird durch neutralere Farben gemildert und das Blau verleiht CTAs und anderen Bereichen, in denen das Unternehmen die Aufmerksamkeit des Besuchers auf sich ziehen möchte, eine wirkungsvolle Wirkung.
6. Nordischer Rubin
Nordischer Rubineine Konferenz in Stockholm, hat eine wunderschöne Website in satten Juwelentönen. Die für die Farbpalette dieser Website gewählten Farben verleihen ihr Eleganz und heben sie von weniger eindrucksvollen Designs ab.
7. Der Nona-See
Der Nona-See ist eine Website für einen bestimmten Ort – und zwar einen in der Nähe des Wassers. Daher ist es nicht überraschend, dass hier die Farbe Blau vertreten ist. Die anderen neutralen Farben lassen das Blau schön hervorstechen.
8. Zitronenstand
Auch hier ist es keine Überraschung, dass ein Unternehmen namens Zitronenstand hätte Gelb in der Farbpalette seiner Website. Die Blau- und Grautöne passen gut zum Gelb und mildern seine Helligkeit.
9. Minze
Minze ist eine Website, die sich mit Finanzen beschäftigt, daher sind Grün- und Blautöne eine gute Wahl. Sie vermitteln Ruhe, Friedfertigkeit und Vertrauen. Neutrale Farbtöne der Braunfamilie ergeben eine erdige Farbpalette, die die Sinne beruhigt.
10. Odopode
Odopode setzt auf eine monotone Farbpalette, vermeidet aber mit einem Farbverlauf auf der Homepage Langeweile. Die große Typografie bietet einen hervorragenden Kontrast und es ist offensichtlich, wo Sie klicken sollen.
11. Fiverr
Sie werden vielleicht bemerken, dass viele Unternehmen eine bestimmte Farbe reservieren – im Fall von FiverrGrün – ausschließlich für CTAs. Es erscheint nirgendwo sonst auf der Site. Tatsächlich wurde es nicht einmal von ColorFav aufgegriffen, da es von den neutraleren Farben dominiert wird.
12. Schule für Digitalfotografie
Von einem Unternehmen, das sich auf grafische Künste konzentriert, erwartet man eine eindrucksvolle Farbpalette für die Website, und Digital Photography School enttäuscht nicht. Die leuchtenden Farben ziehen den Betrachter an. Und genau wie bei Fiverr taucht das im CTA verwendete Orange nicht einmal auf der Palette der Website auf, da es sparsam eingesetzt wird, um eine Wirkung zu erzielen.
13. Ahrefs
Ahrefs ist ein Beispiel für eine Website, die ihre Farbpalette großzügig einsetzt. Ein dunkleres Blau dient als dominierende Farbe, aber Variationen davon sind auf der gesamten Website zu finden. Dasselbe gilt für die Farben Orange, Pink und Blaugrün.
14. Millo.co
Millo.co verwendet eine sehr einfache Website-Farbpalette und das ist auch gut so. Wir wissen genau, wo wir hinschauen müssen, wenn wir eine Site wie diese besuchen.
15. Brian Gardner
Einige Unternehmen und Einzelpersonen treiben die monochrome Farbpalette auf die Spitze. Brian GardnerWebdesigner, verwendet ein Schwarz-Weiß-Farbschema, das perfekt funktioniert. Es basiert auf seiner Art des Minimalismus und spiegelt daher seine Werte und Überzeugungen wider.
16. Webstuhl
Wenn Sie den Besucher beruhigen möchten, können sanfte Farben gut funktionieren. Webstuhl verwendet großzügig Lachs- und Babyblautöne. Das funktioniert gut, insbesondere in Kombination mit dem dunkleren Blau, das für CTAs und andere wichtige Elemente auf der Seite zur Verfügung steht.
Eine praktische Liste mit Ressourcen zur Auswahl der perfekten Farbpalette für Ihre Website
Hier sind 18 Farbpalettenressourcen, um die perfekte Palette für Ihre Website zusammenzustellen.
Zunächst: Brauchen Sie Inspiration?
1: Markenfarben
BrandColors zeigt Ihnen, wie führende Marken Farben nutzen, um ihr Unternehmen von der Masse abzuheben, ihre Markengeschichte zu erzählen und ihren Kunden mitzuteilen, wofür sie stehen. Sie können alphabetisch durch eine Liste von Unternehmen, gemeinnützigen Organisationen und Startups scrollen oder nach Markennamen suchen.
Suchen Sie nach einer fertigen Palette?
2: Farbliebhaber
ColourLovers ist eine Forum-Site für Palettendesign, auf der von den Benutzern fast 2 Millionen Paletten eingereicht wurden. Sie können nach „Paletten suchen, die diese Farbe enthalten“, stöbern oder Designern folgen. Oft finden Sie Varianten derselben Palette, die Ihnen vorgefertigte Farbton- und Sättigungsoptionen bieten.
(Komplett mit skurrilen Namen.)
3: Farbdrehung
ColoRotate verfügt über eine Bibliothek mit Farbschemata, die Sie durchsuchen, auswählen und ändern können. Wenn Sie Ihr eigenes Schema von Grund auf erstellen möchten, können Sie dies mit einem 3D-Farbwerkzeug tun. Und Sie können das von Ihnen erstellte Schema direkt in PhotoShop oder Fireworks verwenden, mit dem ColorRotate-Plugin Und iPad App.
Passen Sie Ihr Branding an
Was aber, wenn Sie bereits Bilder, Logos oder Markenzeichen haben, mit denen die Farben Ihrer Website übereinstimmen müssen?
4: Farbjäger
Color Hunter ist kein Tool mit einem riesigen Funktionsumfang wie einige der All-in-One-Kraftpakete auf dieser Liste. Stattdessen ist es eine solide Lösung für eine Sache: das Aufspüren einer bestimmten Farbe. Gehen Sie auf die Site, ziehen Sie ein Bild hinein und das Tool erstellt aus dem Bild eine Palette für Sie. Dies ist eine solide Möglichkeit, Farbpaletten um Bilder herum zu erstellen, mit denen Ihre Site harmonieren soll, und Sie können damit auch die Paletten von Sites, deren Aussehen Ihnen gefällt, zurückentwickeln.
5: Pictaculous
Pictaculous generiert Farbpaletten aus Fotos – laden Sie ein Foto hoch, und Pictaculous schlägt Ihnen passende Farben vor. Pictaculous bietet Ihnen nicht nur eine Palette basierend auf dem hochgeladenen Foto, sondern auch vorgefertigte Farbschemata, die dazu passen.
Diese Tools generieren ganze Farbpaletten.
6: Adobe Color CC-Farbrad
Dieses Tool war früher als Adobe Kuler bekannt und begann als einfache Farbvergleichsseite. Heute ist es ein vollwertiges System zum Erstellen von Farbpaletten. Sie können damit Farbkombinationen auf der Grundlage einer Farbkugel ausprobieren, vergleichen und speichern. Sie können Palettentypen auswählen und Fünffarbpaletten mit verschiedenen Eingabeebenen aus dem Tool erstellen, darunter vollständig benutzerdefinierte und nahezu automatische.
7: Palettton
Mit Paletton können Sie schnell eine Farbpalette erstellen. Wählen Sie das gewünschte Schema aus: mono, komplementär, triadisch, tetradisch, analog oder akzentuiert analog. Wenn Sie dann eine Farbe im Schema ändern, werden die anderen entsprechend geändert.
8: Farbturm
Color Spire erstellt Ihnen eine Farbpalette aus einer einzigen Farbe. Sie wählen eine Startfarbe aus und Color Spire schlägt Ihnen eine Farbpalette vor, die Sie in Kombination damit verwenden können. Außerdem bietet es eine Vorschau, in der Sie sehen können, wie die empfohlenen Farben auf einer Beispielwebsite aussehen würden.
9: MudCube Farbkugel
(Quelle: http://htmlcolorcodes.com/resources/best-color-palette-generators/)
Color Sphere von MudCube ist ein Chrome-Plugin, mit dem Sie Farben harmonisieren, Farbenblindheit kontrollieren und Hex-Codes identifizieren können. Sie können Farbschemata auch direkt in Illustrator, PhotoShop und CoIRD.com exportieren.
10: Einheitliche Farben
Cohesive Colors nimmt Ihre aktuelle Palette und ermöglicht Ihnen, diese zu bearbeiten, indem Sie einen Overlay-Farbton in der Farbe Ihrer Wahl hinzufügen und schnell und einfach aus einer vorhandenen eine neue Palette erstellen.
11: Hex-Farbschema-Generator
Mit diesem Tool können Sie Farben erzeugen, die in Kombination mit einer bereits vorhandenen Farbe funktionieren. Es ist etwas einfacher als einige der Farbkugel-Tools in dieser Liste. Sie fügen eine Hex-Zahl in das Tool ein oder klicken auf das Farbrad, und es wird mit einem Satz von 3 zusätzlichen passenden Farben zurückgegeben, komplett mit Hex-Codes.
Erstellen Sie Ihre Farben
Bei einigen dieser Tools müssen Sie zunächst eine Farbe im Kopf haben. Wenn Sie kein Branding haben, das Sie anpassen müssen, und BrandColors Ihnen nichts gezeigt hat, das Ihre Aufmerksamkeit erregt, können Sie von vorne beginnen.
12: Die Farb-App
Mit diesem iOS-Tool können Sie zwischen ähnlichen Farben genau unterscheiden, indem Sie sie klar und deutlich mit etwas Abstand zwischen ihnen anordnen und nicht in Farbverläufen wie bei Farbrädern und Kugeln. Große Farbraster ermöglichen Ihnen die Nutzung Ihres gesamten Bildschirms (iPad Pro-Benutzer können sich freuen!) und Sie können Farben abtasten, RGB-, Hex- und HSLA-Werte finden und Farbpaletten von Grund auf neu erstellen.
13: Farbe
Mit Color von HailPixel können Sie die gewünschte Farbe ganz genau festlegen und erhalten anschließend den Hex-Code dafür.
Bewegen Sie den Mauszeiger über den Bildschirm, und die Farbe ändert sich beim Bewegen ganz leicht – es ist wie eine Farbkugel, die ständig Hex-Codes zurückgibt. Bewegen Sie den Mauszeiger über den Bildschirm, um die Farbe anzuzeigen, und nach oben und unten, um die Sättigung anzuzeigen.
Holen Sie sich die Codes für eine Farbe
Wenn Sie irgendwo eine Farbe gesehen haben und nicht genau wissen, wie Sie sie benennen sollen, sind diese Tools genau das Richtige für Sie.
14: SpyColor
SpyColor gibt Ihnen Informationen zu jeder Farbe, einschließlich Hex-, RGB-, CMYK- und anderen Codes. Das Tool zeigt Ihnen auf jeder Farbseite eine Reihe von Schematypen wie Komplementär, Split-Komplementär, Triadisch, Konflikt und Analog.
15: HTML-Farbcodes
HTML Color Codes findet Hex-Codes für Bildfarben in Ihrem Browser. Sie wählen ein Bild auf Ihrem Desktop aus, klicken auf „Bild anzeigen“ und bewegen dann die Maus darüber, um Hex-Codes für die verschiedenen Teile des Bildes zu erhalten.
Testen Sie Ihre Palette
Wenn Sie eine Farbpalette haben, müssen Sie wissen, ob sie für verschiedene Besucher geeignet ist.
16: Überprüfen Sie meine Farben
Mit Check my Colours können Sie die Vordergrund- und Hintergrundfarben Ihrer Farbpalette überprüfen und sicherstellen, dass sie für Personen mit Farbsehschwächen ausreichend Kontrast bieten. Wenn Sie Ihre Website gegen Farbenblindheit absichern oder einfach nur die effektivsten und intuitivsten Farbkombinationen aus UX-Sicht erhalten möchten, ist dieses Tool von unschätzbarem Wert. Geben Sie eine URL ein und es gibt einen Bericht aus:
…das grundsätzlich den gesamten Code Ihrer Site durchgeht und alle visuellen Elemente darin hinsichtlich der Sichtbarkeit bewertet.
Passende Bilder
Jetzt steht Ihre Farbpalette und Sie wissen, dass sie gut sichtbar ist. Sie benötigen einige passende Bilder.
17: TinEye
TinEye ist eher als Alternative zur Google-Bildersuche bekannt. Aber es funktioniert auch, um Farbkombinationen zu erkunden, und zwar mithilfe einer Datenbank mit über 10 Millionen Fotos unter Creative Commons-Lizenz, die von Flickr stammen. Wenn Sie nach Bildern in der perfekten Farbkombination suchen, ist dies eine großartige und benutzerfreundliche Möglichkeit, sie zu finden.
18: Designinspiration
Designspiration lässt Sie bis zu fünf Farbtöne aus einer ganzseitigen Palette auswählen, sodass Sie die Farben deutlich sehen können. Anschließend zeigt die Site alle Bilder in ihrer Datenbank mit dieser Farbkombination an. Hex-Zahlen werden Ihnen deutlich angezeigt und Sie können auf einzelne Hex-Zahlen klicken. Sie können Bilder auf der Site in Sammlungen speichern und herunterladen.
So verwenden Sie ein Website-Verhaltenstool zur Analyse der besten Farbpaletten
Sie denken vielleicht, Sie müssten nur eine Farbpalette für Ihre Website auswählen und könnten dann mit Volldampf weitermachen. Das ist jedoch nicht die beste Vorgehensweise.
Denken Sie darüber nach. Sie testen Ihre CTAs, Überschriften und andere Website-Elemente. Warum sollte es bei der Farbe anders sein?
Ein Tool zur Website-Verhaltensanalyse wie Crazy Egg bietet die perfekte Möglichkeit, herauszufinden, wie Ihr Publikum auf Ihre aktuelle Farbpalette reagiert.
Berichte zum Benutzerverhalten wie Heatmaps zeigen Ihnen, ob Ihre Farben die Aufmerksamkeit der wichtigsten Personen auf sich ziehen – Ihrer aktuellen und potenziellen Kunden.
Wenn Sie über Rohdaten verfügen, können Sie fundierte Entscheidungen über die Farbpalette Ihrer Website treffen.
Stellen Sie sich vor, Sie haben eine Website für sportbegeisterte Menschen erstellt und sich für die Farben Blau und Rosa sowie einige neutrale Grautöne entschieden. Ihre Zielgruppe findet das nicht gut.
Vielleicht vermittelt es Ihr Image nicht gut genug. Sportfans mögen vielleicht kräftigere, dunklere Farben und Erdtöne.
Sie werden es nicht wissen, bis Sie es testen.
Beginnen Sie mit der Nutzung von Crazy Egg
Erstellen Sie ein kostenloses Crazy Egg-Konto, um Ihre kostenlose Testversion zu starten, oder melden Sie sich an, um Ihre Berichte zum Benutzerverhalten einzurichten.
Sie können mehrere Tests gleichzeitig ausführen, sodass Sie keine Stunden, Tage oder Wochen verschwenden. Stattdessen können Sie Daten in Echtzeit erfassen und sich wieder auf die Suche nach der bestmöglichen Farbpalette konzentrieren.
Abschluss
Die Farbpalette Ihrer Website sollte nicht nur Ihre Marke widerspiegeln, sondern auch Ihre Zielgruppe ansprechen. Andernfalls könnten die Leute von Ihrer Website abgeschreckt werden, ohne es überhaupt zu merken.
Beginnen Sie mit dem, was Ihnen gefällt. Überlegen Sie, eine Palette zu wählen, die sich von anderen in Ihrer Nische unterscheidet, damit Sie sich abheben. Beginnen Sie dann mit dem Testen.
Es ist ganz einfach, die Farben auf Ihrer Website zu ändern. Wenn Sie HTML kennen, können Sie die HEX-Codes in Ihren Designdateien manuell ändern. Viele WordPress-Designs verfügen auch über Customizer, mit denen Sie Farben ändern können, ohne Code zu kennen.
Geben Sie sich die Möglichkeit, Ihre Site optisch so ansprechend und einprägsam wie möglich zu gestalten.
