Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie Sie ein perfektes Farbschema für Ihre WordPress-Website auswählen

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Fällt es Ihnen schwer, sich für ein Farbschema für Ihre Website zu entscheiden?

Die Wahl der richtigen Farbkombination kann die Attraktivität Ihrer Website steigern, das Nutzererlebnis verbessern und Ihre Umsätze und Konversionen erhöhen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein perfektes Farbschema für Ihre WordPress-Website auswählen können.

Choosing color scheme for your website

Die Psychologie der Farben verstehen

Es ist eine gut erforschte Theorie, dass Farben menschliche Reaktionen beeinflussen können. Farben haben eine emotionale Anziehungskraft auf die Entscheidungen und Wahlmöglichkeiten, die wir in unserem täglichen Leben treffen. Dies wird als Farbpsychologie bezeichnet.

Große Unternehmen geben Millionen von Dollar aus, um ein gut durchdachtes Markenimage und eine Identität für ihre Produkte zu schaffen. Sie beauftragen Experten damit, die perfekte Farbkombination für ihre Marken, Produkte und Websites zu finden.

Die Farben, die Sie für Ihren WordPress-Blog verwenden, sind ein wichtiger Teil Ihres Markenimages, da sie bei Ihren Nutzern Emotionen und Gefühle hervorrufen können.

Wenn Sie Komplementärfarben strategisch einsetzen, können Sie eine einprägsame Identität für Ihre Marke schaffen, die bei der Zielgruppe Anklang findet. Dies kann auch Vertrauen zwischen Ihnen und Ihren Kunden schaffen.

Wie finden Sie also heraus, welche Farben Sie verwenden und welche Emotionen Sie bei Ihren Nutzern wecken wollen?

Zum Glück für Sie haben Marketingexperten und Psychologen bereits zahlreiche Untersuchungen durchgeführt.

Viele Food-Blogs und Restaurants verwenden beispielsweise die Farben Rot, Orange oder Gelb, weil sie mit Hunger assoziiert werden. Rot ist eine aufmerksamkeitsstarke Farbe, während Gelb und Orange die Stimmung anregen und eine warme und einladende Atmosphäre schaffen.

In ähnlicher Weise verwenden die meisten Banken die Farbe Blau, da sie für Vertrauen, Ruhe und Zuverlässigkeit steht.

Für ein besseres Verständnis der Farben und ihrer Bedeutungen können Sie sich diese Infografik ansehen:

Psychology of Colors
  • Rot: Die Farbe der Jugend und der Freude. Sie spiegelt Kühnheit und Zuversicht wider.
  • Grün: Erzeugt eine beruhigende, besänftigende Wirkung. Es ruft eine friedliche, progressive und ruhige emotionale Reaktion hervor.
  • Blau: Es steht für Vertrauen, Stärke und Zuverlässigkeit.
  • Schwarz: Erzeugt eine anspruchsvolle, solide, sichere emotionale Reaktion.
  • Weiß: Klarheit und Einfachheit sind die beiden Haupteffekte von Weiß.
  • Gelb: Die Farbe des Optimismus, der Wärme und der Freundlichkeit.
  • Orange: Erzeugt eine lustige, freundliche, selbstbewusste und fröhliche Wirkung.
  • Rosa: Sinnlichkeit, Weiblichkeit, Romantik und Liebe sind die Emotionen, die mit Rosa verbunden werden.

Andere Dinge, die bei der Auswahl eines Farbschemas für WordPress zu beachten sind

Farben brauchen einen Kontext, um so zu wirken, wie Sie es wünschen. Ihre Marke oder Ihr Produkt kann bereits bestimmte Assoziationen hervorrufen, die mit den von Ihnen gewählten Farben zusammenpassen oder auch nicht.

Es gibt ein paar Dinge, die Sie beachten sollten, bevor Sie ein Farbschema für Ihre WordPress-Website auswählen.

Zunächst müssen Sie das bestehende Markenimage berücksichtigen. Wenn Sie bereits ein Logo und andere Marketingmaterialien haben, können Sie die vorhandenen Farben auf Ihrer Website verwenden.

Sie müssen auch überlegen, welche Farben für das Design der Website geeignet sind.

Eine leuchtend blaue Farboption kann zum Beispiel in natura großartig aussehen, ist aber möglicherweise nicht die beste Hintergrundfarbe auf Ihrem Bildschirm.

Sie müssen auch an andere Medien wie Slider, Videos, Bilder und Call-to-Action-Schaltflächen denken, die Sie Ihrer Website hinzufügen werden. Achten Sie darauf, einen Hintergrund zu wählen, der zu den Farben passt, die Sie für Ihre CTA-Schaltfläche, die Textfarbe und die Schieberegler verwenden.

Schließlich sollten Sie auch die Zugänglichkeit im Auge behalten. Ein gutes Farbschema hat genügend Kontrast, um auch für Besucher mit Sehbehinderungen gut lesbar zu sein, was bei vielen Menschen auf der Welt der Fall ist.

Weitere Anleitungen finden Sie in unserem Leitfaden für Einsteiger zur Verbesserung der Barrierefreiheit Ihrer WordPress-Website.

Video-Anleitung

Subscribe to WPBeginner

Wenn Sie eine schriftliche Anleitung bevorzugen oder mehr Details benötigen, dann lesen Sie weiter.

Erstellen eines Farbschemas für WordPress

Sobald Sie die passenden Farben für Ihre WordPress-Website ausgewählt haben, gibt es mehrere Online-Tools, mit denen Sie eine unbegrenzte Anzahl von Farbpaletten erstellen können.

Wir empfehlen Ihnen, mindestens zwei Farben zu wählen, die Ihre Marke und die gewünschte Reaktion der Nutzer repräsentieren.

Werfen wir also einen Blick auf die Online-Tools, die Sie verwenden können, um das richtige Farbschema für Ihre Website zu finden.

1. Adobe Color CC

Adobe Color CC

Adobe Color CC, früher bekannt als Kuler, ist ein hervorragendes Werkzeug zur Erstellung von Farbpaletten.

Das Tool verfügt über ein Farbrad, mit dem Sie Farben aus einem Spektrum auswählen können. Sie können sogar Farbregeln auswählen, bevor Sie das Rad drehen, um visuell ansprechende Farbschemata zu erstellen. Zu diesen Regeln gehören komplementär, triadisch, analog und monochromatisch.

Darüber hinaus können Sie jede Farbe in der Palette manuell anpassen, und der Rest der Farben wird automatisch an die Farbregel angepasst. Sie können auch Farbpaletten erstellen, indem Sie Fotos hochladen und verschiedene Farben daraus extrahieren.

Darüber hinaus bietet Adobe Color CC auch eine große Bibliothek, aus der Sie vorgefertigte Farbschemata auswählen können.

2. FOTOCOPA von COLOURLovers

PHOTOCOPA

COLOURLovers ist eine der beliebtesten Adressen für Farbinspirationen und -ideen. Dort gibt es einige großartige Tools zur Erstellung von Farbschemata. Eines davon ist PHOTOCOPA, mit dem Sie ein Farbschema aus Fotos erstellen können.

Mit dem Tool können Sie ein Foto hochladen und mit einem Farbwähler bestimmte Farben aus dem Bild auswählen, um eine Palette zu erstellen.

Sie können auch Tools wie COPASO von COLOURlovers verwenden, um fortschrittlichere Farbpaletten für Websites von Grund auf zu erstellen oder bestehende Paletten zu verwenden, die von anderen Benutzern hochgeladen wurden.

3. Materialpalette

Material Palette

Inspiriert vom Material Design-Konzept von Google ist Material Palette ein Online-Tool, mit dem Sie Farbschemata anhand von Designregeln erstellen können.

Sie enthält etwa 19 Grundfarben und ihre Schattierungen sowie ein Farbauswahlwerkzeug, mit dem der Benutzer jeden beliebigen Farbton, jede Sättigung und Helligkeit für die Palette auswählen kann.

Es bietet vorgefertigte Farbschemata und lässt Sie sogar benutzerdefinierte Farben erstellen, indem Sie die RGB- oder HEX-Codes eingeben.

Außerdem können Sie mit der Materialpalette eine Echtzeit-Vorschau von Farbpalettendesigns auf einer Website oder einer Schnittstelle für mobile Geräte anzeigen.

4. Kühlschränke

Coolord

Coolors ist ein bekannter Farbschema-Generator, der ein Farbschema auf der Grundlage der vom Benutzer getroffenen Auswahl erstellt, z. B. monochromatisch, analog, triadisch, komplementär und andere.

Mit dem Werkzeug können Sie einen Farbverlauf zwischen zwei Farben erstellen. Es verfügt sogar über eine Kontrastprüfung, die Vorschläge für eine bessere Zugänglichkeit der Palette für Benutzer mit Sehbehinderungen liefert.

Es kann auch mit gängigen Design-Tools wie Sketch, Photoshop und Illustrator integriert werden, um ein Farbschema zu erstellen.

Mit Coolor können Sie Ihre Farbpaletten auch speichern, exportieren und mit anderen Benutzern im Internet teilen.

Bonus: Ändern Sie das Admin-Farbschema in WordPress

Sie können nicht nur ein attraktives Farbschema für Ihre Website erstellen, sondern auch das Farbschema für die Verwaltung ändern, um ein individuelles WordPress-Dashboard für Sie und Ihr Team zu erstellen.

Wenn Sie beispielsweise ein Restaurant betreiben und Online-Bestellungen annehmen, sollten Sie im WordPress-Backend Farben wie Rot, Gelb oder Orange verwenden, um Ihre Website zu repräsentieren.

Change admin area color

Ähnlich verhält es sich, wenn Sie eine Mitgliederseite haben, bei der sich die Nutzer in Ihr WordPress-Dashboard einloggen können. Dann können Sie ein attraktives Farbschema verwenden, um die Nutzererfahrung zu verbessern.

Sie können das Farbschema für Ihren Verwaltungsbereich ganz einfach ändern, indem Sie die Seite Benutzer “ Profil im WordPress-Dashboard aufrufen.

Danach scrollen Sie zum Abschnitt „Admin Color Scheme“ und wählen eines der 9 vorgefertigten Schemata für Ihre Website aus.

Select new admin color scheme

Vergessen Sie danach nicht, auf die Schaltfläche „Profil aktualisieren“ zu klicken, um Ihre Einstellungen zu speichern.

Eine ausführliche Anleitung finden Sie in unserem Tutorial zum Ändern des Farbschemas für die Verwaltung in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen, das perfekte Farbschema für Ihre WordPress-Website zu finden. Sehen Sie sich auch unseren Leitfaden für Einsteiger an, wie Sie Farben auf Ihrer WordPress-Website anpassen können, und unsere Expertenauswahl der besten kostenlosen WordPress-Blog-Themes.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

16 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN says

    Color scheme is very important to match with any website design. Please how can I change the text color of my blog posts and pages? The theme I am using doesn’t have it in the „Customize“

  3. Moinuddin Waheed says

    Having a good color combination for any website gives a sense of consistency and branding.
    I have noticed wpbeginner, there is consistent color every where and it gives a sense of branding.
    I have used coolers for my websites to get a color combination.
    Thanks for giving all the lists of possible options to explore color scheme for a websites.

  4. Andy says

    Hey everyone! I really wanted to make my site by myself – taking into account my preferences. But I also wanted the design of my site to appeal to visitors. I have tried many patterns and combinations. Thanks for your advice guys! With this article, I found a solution that I really like!

  5. Rudy SMT says

    Thanks for the article, I took the psychology of colors to heart.

    I just complete the recoloring of my website, I didn’t use professional software like Adobe or PhotoShop but instead an online palette generator and some other trick.

    I wrote down step by step how I picked the color and implemented on my website in less than 20 minutes without any professional design software.

    i love to keep things simple; I hope it will help others.

  6. Donnamarie says

    Thank you for the color theory and tools! I’m about to create my first website and really want to use a black background with pastel colored, not white, fonts. I prefer this schemata because it’s way easier on my eyes with the reduced glare. I’ve been using the net for almost 20 years and see very few sites with dark backgrounds. Some white font on black is fine, but pages of it is too much contrast for me too. I’ve noticed a trend of light grey font on white backgrounds and when I see a site with that scheme, I bounce because it’s too straining to read. I’d love comments on the following 2 questions:
    Does using a dark background really turn off the majority of potential subscribers?
    I’ve heard that most webpages are white because at first they were emulating books…why is the majority of pages white?

  7. Bryce Munger says

    One thing to consider with sites is how they will look to everyone. I am red/green colorblind and what looks sharp and crisp to you may drive my eyes bonkers. The same applies in reverse, a combo I like may not look good to others. I would recommend finding some friends or associates that are colorblind (or vice verse) and have them review your work.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.