So wenden Sie Farbpaletten auf Ihre Divi-Website an (20 Beispiele!)
Veröffentlicht: 2017-08-10Im heutigen Divi-Tutorial werden wir einige erstaunliche Farbpaletten vorstellen, die Sie auf den nächsten Websites verwenden können, die Sie mit Divi erstellen. Die Verwendung der richtigen Farben für Ihre Website ist eines der wichtigsten Dinge, die bestimmen, wie Ihre Website insgesamt aussieht und sich anfühlt.
Wir zeigen Ihnen nicht nur einige erstaunliche Farbpaletten mit Ihnen, sondern zeigen Ihnen auch eine solide Möglichkeit, diese Farbpaletten zu Ihrer Website hinzuzufügen. Im Zweifelsfall können Sie immer diese grundlegenden Schritte befolgen, die Ihnen helfen, schöne Ergebnisse zu erzielen.
Allgemeine Hinweise
1. Entscheiden Sie sich für eine dunkle oder helle Website
In der Farbpalette, die Sie verwenden werden, werden Sie zweifellos helle und dunkle Farben haben. Kontrast ist in einer Farbpalette obligatorisch, damit der geschriebene Inhalt nicht verloren geht.
Das führt uns sofort zu der ersten Frage, die Sie sich stellen müssen, wenn Sie eine Farbpalette auf Ihrer Website anwenden möchten. Möchten Sie eine dunkle oder helle Website erstellen? Nur weil Sie sich für eine entscheiden, heißt das nicht, dass Sie sie nicht kombinieren können, aber eine Auswahl hilft Ihnen, Ihre Farbpalette leichter auszuwählen.
2. Farbauswahl
Theoretisch können Sie selbst bestimmen, wie viele Farben Ihre Farbpalette haben soll. Es gibt keine Standardmethode zum Anwenden oder Bestimmen von Farbpaletten. Um jedoch mit Divi eine schöne Farbbalance zu erzielen, empfehlen wir die Verwendung von fünf Farben.
Um Ihnen zu helfen, die Farbpaletten mit fünf Farben auf Ihre Website anzuwenden, haben wir uns für eine Methode entschieden, die wir bei der Präsentation der verschiedenen Farbpaletten konsequent auf dasselbe Layout anwenden. Aber bevor wir uns damit befassen, werfen wir einen Blick auf die verschiedenen Arten von Farben, die Sie in Ihrer Farbpalette haben müssen, wenn Sie unserer Methode folgen möchten.
2 Hintergrundfarben
Stellen Sie sicher, dass die von Ihnen gewählten Hintergrundfarben zueinander passen. Sie verwenden diese Hintergrundfarben nahe beieinander und erzielen schöne Ergebnisse. sie müssen eine gewisse Harmonie haben.
1 Schriftfarbe
Als nächstes müssen Sie die Schriftfarbe auswählen. Die Schriftfarbe hängt logischerweise von den gewählten Hintergrundfarben ab. Wenn Sie helle Hintergrundfarben gewählt haben, stellen Sie sicher, dass Ihre Schriftfarbe dunkel ist und umgekehrt.
1 Hyperlink- und CTA-Farbe
Die von Ihnen gewählte Hyperlink-Farbe ist eine der Farben, die Ihre Website zum Leben erwecken. Stellen Sie sicher, dass sich diese Farbe von den anderen Farben in Ihrer Palette abhebt, da Sie sie für die Calls-to-Action auf Ihrer Website verwenden.
1 Farbe für den letzten Schliff
Zu guter Letzt können Sie eine andere Standardfarbe auswählen, die Ihrer Website Farbe verleiht. Obwohl diese Farbe nicht so wichtig ist wie die Hyperlink-Farbe, hilft sie Ihnen, die Farbbalance auf Ihrer Website zu vervollständigen.
3. Stellen Sie sicher, dass genügend Kontrast vorhanden ist
Wie bereits erwähnt; Es ist wichtig, einen Kontrast zwischen einigen Farben in Ihrer Farbpalette zu schaffen. Wenn Sie eine Farbpalette für eine Website verwenden, hilft Ihnen dieser Kontrast in erster Linie dabei, den geschriebenen Inhalt, den Sie teilen, lesbar zu machen. Weil; wenn Ihr Inhalt nicht leicht zu lesen ist; was ist denn der Zweck davon?
4. Finden Sie die richtige Farbbalance
Es gibt verschiedene Möglichkeiten, um festzulegen, wie oft Sie eine bestimmte Farbe in Ihrer Farbpalette verwenden möchten. Eine gute Farbbalance ist notwendig, wenn Sie nicht möchten, dass sie sich von den Farben, die Sie auf Ihrer Website verwenden, überfordert fühlen.
Stellen Sie sicher, dass Sie die meiste Zeit die neutraleren Farben in Ihrer Farbpalette verwenden, und verwenden Sie die anderen Farben, um den von Ihnen bereitgestellten Inhalt hervorzuheben.
Exemplarische Vorgehensweise: Hinzufügen der Farbpalette zu Ihrer Website
Im nächsten Teil dieses Beitrags werden wir Sie durch das Anwenden von Farbpaletten auf Ihre Website führen. Wir behandeln die verschiedenen Schritte, die wir beim Hinzufügen der Farben zu einem Website-Layout ausführen. Nach dieser exemplarischen Vorgehensweise gelangen Sie zu dem Teil, in dem wir die Farbpaletten teilen. Wir haben nicht nur die Farben geteilt, sondern auch in einem Divi-Layout verwendet, um die exemplarische Vorgehensweise in die Praxis umzusetzen.
Lassen Sie uns ohne weitere Fälligkeit einen Blick auf die verschiedenen Schritte des Prozesses werfen.
1. Entscheiden Sie, wie Sie die Farben hinzufügen
Sie können die Farbpalette auf zwei Arten hinzufügen:
- Abschnitt für Abschnitt alle Farben hinzufügen
- Vervollständigen Sie Ihre Website Farbe für Farbe
Obwohl Sie diese beiden Methoden wahrscheinlich miteinander mischen werden, empfehlen wir Ihnen, Ihre Website zunächst Farbe für Farbe zu vervollständigen. Auf diese Weise müssen Sie die verschiedenen Farbcodes nicht ständig kopieren und einfügen. Sie kopieren jede Farbe einmal und gehen dann zur anderen über.
2. Fügen Sie die Hintergrundfarben hinzu
Sobald Sie sich entschieden haben, wie Sie die Farben einfügen möchten, können Sie mit den Hintergrundfarben beginnen. Einer der Gründe, warum es eine gute Idee ist, mit den Hintergrundfarben zu beginnen, ist, dass Sie sofort Ergebnisse sehen werden. Sie legen die Grundlage für die Farben fest, die Sie auf Ihrer Website verwenden.
Wenn Sie eine helle Website erstellen möchten; Beginnen Sie mit dem Hinzufügen der hellsten Farbe zum Hintergrund des zweiten Abschnitts und folgen Sie der zweithellsten Farbe in Ihrem dritten Abschnitt.
3. Fügen Sie die Textfarbe hinzu
Nachdem Sie die Hintergrundfarben für Ihre Website hinzugefügt haben, können Sie mit dem Hinzufügen der Textfarbe zu Ihrer Website beginnen. Alle schriftlichen Inhalte Ihrer Website müssen diese Farbe haben (außer den Hyperlinks und Handlungsaufforderungen).
4. Fügen Sie Ihrer Website die Hyperlink- und CTA-Farbe hinzu
Als nächstes können Sie die Hyperlinks und Handlungsaufforderungen auf Ihrer Website hervorheben. Sie ziehen die Aufmerksamkeit der Menschen auf sich und machen sie neugierig, worum es bei einem Link oder Call-to-Action geht.
Stellen Sie sicher, dass alle anklickbaren Elemente auf Ihrer Website diese Farbe enthalten. Wenn Sie diese Konsistenz beibehalten, erkennen Ihre Besucher leicht, wo sie klicken können, um ihren Aufenthalt auf Ihrer Website fortzusetzen.
5. Fügen Sie die letzte Touch-Farbe hinzu
Das letzte, was Sie tun müssen, ist, der Website den letzten Schliff hinzuzufügen. In den Beispielen und Farbpaletten, die wir erstellt haben, verwenden wir diese letzte Schlifffarbe an drei Stellen: der Klappenkreisfarbe, dem Kopfzeilentext des Personenmoduls und der primären Menüleiste.
Obwohl die Farbe für den letzten Schliff nicht die Hauptfarbe ist, die Sie auf Ihrer Website verwenden werden, können Sie damit das zusätzliche bisschen Farbe bringen, das Ihre Website benötigt. Sie möchten nicht, dass Ihre Website eintönig oder nervig seriös aussieht.
Farbpaletten
Nachdem wir nun die erforderlichen Schritte zum Anwenden der Farbpalette auf Ihre Website analysiert haben, ist es an der Zeit, einige erstaunliche Farbpaletten zu erkunden. Wir zeigen Ihnen nicht nur das Ergebnis des von uns erstellten Beispiel-Layouts, sondern auch die Farbcodes, die wir verwendet haben, um dieses Ergebnis zu erzielen.
1. Fliesen für Tage
Die erste Farbpalette, die wir ausgewählt haben, enthält hauptsächlich weichere (und leicht pastellfarbene) Farben. Da wir uns für eine helle Website entschieden haben, nehmen die helleren Farben in der Farbpalette den größten Teil der Website ein. Die dunkleren Farben in unserer Farbpalette sorgen jedoch dafür, dass die Website die benötigte Farbbalance enthält.
Die in diesem Beispiel verwendeten Farben sind die folgenden (von links nach rechts):
- #EBE8E2
- #768A95
- #B98077
- #007193
- #E2D7D7
2. Wüste
Die nächste Farbpalette in der Liste heißt Wüste. Die Farbbalance dieser Farbpalette lehnt sich leicht an eine dunklere Website an. Die dominierende Farbe in diesem Beispiel ist die Farbe Blau. Aber es gibt auch eine sehr helle Textfarbe, die dafür sorgt, dass der erforderliche Kontrast vorhanden ist.
Die in dieser Palette verwendeten Farben sind die folgenden (von links nach rechts):
- #507782
- #7C8E93
- #D89C79
- #443F3C
- #FFE8D8
3. Fest
Die nächste Farbpalette ist keine, die Sie oft sehen werden. Die Farben erscheinen nicht oft in derselben Farbpalette, aber sie sind ziemlich faszinierend. Wenn Sie möchten, dass Ihre Website einzigartig aussieht, ist diese Palette der richtige Weg.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #E6EBD1
- #A59E4C
- #544C4D
- #AF3D4B
- #CED3BC
4. Pinky-Versprechen
Die nächste Farbpalette in der Reihe ist eine ausgezeichnete Option, wenn Sie eine dunkle Website erstellen möchten. Schwarz- und Rosatöne sind bekanntlich eine gute Kombination. Sie verleihen der Website eine verspielte Note, ohne dabei allzu feminin zu wirken. Die schwarzen Schattierungen sorgen dafür, dass das Erscheinungsbild Ihrer Website dennoch die erforderliche Tiefe enthält.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #33383A
- #ECC9C8
- #E2566D
- #4F575A
- #D3D8DA
5. Santorin
In dieser nächsten Palette können Sie deutlich erkennen, dass Blau die anderen Farben dominiert. Mit dieser Farbpalette bekommen Sie sofort ein leichtes und positives Gefühl. Blau ist bekanntermaßen eine der Farben, die Menschen beim Erstellen einer Website bevorzugen. Es ist eine Standardfarbe, die Professionalität widerspiegelt. Allerdings zeigen die Blautöne, die in dieser Farbpalette verwendet werden, auch eine verspielte Seite.
Die Farbpalette, die wir in diesem Beispiel verwendet haben, ist (von links nach rechts):
- #1198EA
- #0A5785
- #A85A4D
- #F1F5FA
- #C5DFF8
6. Lila Vergnügen
Die dominierende Farbe in dieser Farbpalette ist offensichtlich Lila. Obwohl sie oft als deprimierend empfunden wird, unterscheiden sich diese Farbpalette und ihre Verwendung auf einer Website. In Kombination mit helleren Farben kann die violette Farbe atemberaubende Ergebnisse liefern.
Die in dieser Farbpalette verwendeten Farben sind die folgenden:
- #D7D7ED
- #52517B
- #737172
- #FCFCFC
- #F0F1A
7. Subtil
Die nächste Farbpalette, die wir teilen möchten, ist ziemlich neutral und im gleichen Stil wie die Festival-Farbpalette. So oft sieht man es auch nicht so oft, aber es sieht sehr sauber aus.
Die in diesem Beispiel verwendeten Farben sind (von links nach rechts):
- #DAE2D5
- #4B7263
- #A8A461
- #494949
- #CCCCCC
8. Unternehmen
Die nächste Farbpalette, die wir teilen möchten, ist ideal für alle Arten von Business-Websites. Die verwendeten Farben spiegeln eine gewisse Positivität und Jugendlichkeit wider. Durch die hellen Hintergrundfarben können die Farben Gelb und Türkis einen Mehrwert auf die Website bringen.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #181242
- #4ABDAC
- #DBDBDB
- #F7B733
- #FCFCFC
9. Rose
Wer liebt die rosa Farbe nicht? Diese nächste Farbpalette bringt einen femininen Faktor auf Ihre Website. Die hellen Farben dominieren die Website, aber sie sorgen dafür, dass auch die dunkleren Farben zur Geltung kommen.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #152038
- #DDA199
- #FF614C
- #F5F5F5
- #E2E2E2
10. Schokolade
Die nächste Farbpalette, die wir ins Rampenlicht stellen wollen, ist Chocolate. Das Schöne an dieser Farbpalette ist, dass sich die Hintergrundfarben und die Textfarbe in derselben Farbkategorie befinden. Das gibt den anderen beiden Farben Raum, sich von diesen abzuheben und Aufmerksamkeit zu erregen.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #FFF4E8
- #FFE2C4
- #822317
- #935B3B
- #346E70
11. Anspruchsvoll
Diese nächste Farbkombination ist etwas, das Sie auf den ersten Blick nicht erwarten würden. Violett und Gelbgrün werden nicht oft zusammen verwendet, aber wie Sie im Ergebnis sehen können; sie passen ganz gut zusammen. Um den Fokus auf diese beiden Farben zu halten, sind die Hintergrundfarben und die Textfarbe eher neutral.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #88D317
- #4F2649
- #FCFCFC
- #EFEFEF
- #080816
12. Olivia
Olivia ist eine Farbpalette, die nicht viel erklärt werden muss. Die Farbtypen Oliv und Gelb lassen sich sehr gut kombinieren. Wenn die helleren Farben neutraler gehalten werden, können diese Farben die Show stehlen.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #778E3B
- #FFD902
- #132819
- #EFEFEF
- #FCFCFC
13. Goldenes Tor
Die sanften Beige-Farben lassen Ihre Website eine Art Exklusivität widerspiegeln. Während die Farbpalette ziemlich nüchtern aussieht, schafft es die violette Türkisfarbe in dieser Farbpalette, die Wärme zu bringen, die die Website braucht.
Die in dieser Farbpalette verwendeten Farben sind (von links nach rechts):
- #373737
- #F3F4E8
- #ADA075
- #EDE4C9
- #A685BC
14. Kapitän
Diese Palette ist wahrscheinlich die professionellste Palette in der Liste. Die beiden dunkelblauen Farben in dieser Palette sind der Hauptgrund dafür. Die rote Farbe leistet jedoch hervorragende Arbeit, um das Eis zu brechen und der Website etwas Abwechslung zu verleihen.
Die in diesem Beitrag verwendeten Farben sind (von links nach rechts):
- #3B578E
- #DB2323
- #D7DEED
- #F7F9FF
- #201C44
15. Umwelt
Die nächste Farbpalette, die wir teilen möchten, ist Umwelt. Der Name verrät, dass Grün diese Farbpalette dominiert. Diese sanften grünen Farben passen perfekt zu der sanften Türkisfarbe, die in dieser Palette enthalten ist.
Die Farben in dieser Palette sind (von links nach rechts):
- #C2D3DO
- #56776A
- #42B7A7
- #EDEFF4
- #26423E
16. Sanft reich
In dieser nächsten Palette können wir deutlich sehen, was für eine gute Kombination Beige und Rot sind. Sie verleihen jeder Art von Website ein Gefühl der Reife. Durch das Hinzufügen einer weiteren auffälligen grünen Farbe erhält das Erscheinungsbild Ihrer Website auch eine gewisse Jugendlichkeit.
Die Farben in dieser Palette sind (von links nach rechts):
- #984B43
- #233237
- #B7A97C
- #F9F0D4
- #527C40
17. Faszinierend
Die nächste Palette in der Reihe ist eine weitere dunkle Website. Die dominierenden Farben sind dunkles Lila und Grau. Die helleren Farben schaffen es jedoch, der Website etwas Wärme zu verleihen.
Die Farben in dieser Palette sind (von links nach rechts):
- #D0B6D6
- #3CC203D
- #898989
- #F2F2F2
- #F9AEBD
18. Minze
Die Mint-Farbpalette verleiht Ihrer Website ein Gefühl von Frische. Obwohl sie auf den ersten Blick sehr nüchtern sind, schaffen es die orange und lila Farbe, der Website ein frisches und wiedergeborenes Gefühl zu verleihen.
Die in dieser Palette verwendeten Farben sind (von links nach rechts):
- #31190A
- #B4BCA7
- #F99A53
- #54468E
- #E3EDE5
19. Weiches Gelb
Diese einzigartige Farbpalette enthält hauptsächlich warme Farben. Obwohl wir sowohl eine dunkle als auch eine helle Farbe als Hintergrundfarbe haben, tendiert das Gesamtgefühl eher zu einer hellen Website.
Die Farben in dieser Palette sind (von links nach rechts):
- #DDCF30
- #437468
- #F1FFD1
- #4A4C49
- #FCFAD9
20. Geheimnis
Die letzte Farbpalette in der Reihe ist eine weitere dunkle Palette, die Sie für Ihre Website verwenden können. Die in dieser Palette verwendeten Hintergrundfarben sind nüchtern und lassen die anderen helleren Farben in der Palette hervortreten.
Die Farben in dieser Palette sind:
- #131517
- #13828A
- #35363A
- #EEF5F7
- #AF8300
Abschließende Gedanken
In diesem Beitrag haben wir einige Tipps zum Anwenden der von Ihnen ausgewählten Farbpalette auf Ihre Website gegeben. Darüber hinaus haben wir Ihnen 20 wunderschöne Farbpaletten gezeigt, die Ihnen helfen können, Ihrer Website Eleganz zu verleihen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.
Und während Sie dort sind, lassen Sie es uns wissen; Welche dieser Farbpaletten magst du am liebsten?
Ausgewähltes Bild von EDGOR_21 / shutterstock.com