Die globale Farbpalette von Kadence ist ein wertvolles Instrument für einheitliches Webdesign. Diese Schritt für Schritt Anleitung zeigt wie du sie richtig einrichtest.
Die richtigen Farben und Kontraste einer Website, können Emotionen hervorrufen und Handlungsaufforderungen gezielt steuern. Eine durchdachte Farbauswahl führt dazu, dass Nutzer häufiger klicken, kaufen oder sich registrieren.
Zusätzlich wirkt eine gut gestaltete Farbpalette professionell und unterstreicht die Identität deiner Marke.
So funktioniert die Farbpalette vom Kadence Theme
Das Kadence Theme für WordPress macht es uns mit der Farbpalette wirklich leicht, alle Farben und Kontraste auf unserer Seite global zu kontrollieren. Das sorgt für ein einheitliches Design und ermöglicht schnelle Anpassungen.
Hat man die neun Farben dieser Palette erstmal bestimmt, übernimmt das Kadence Theme den Rest und gibt sie überall auf der Website an die entsprechenden Elemente und Flächen aus.
Um zu den Farbeinstellungen des Kadence Themes zu navigieren, gehst du im WordPress Admin Menü auf Design -> Customizer -> Farben & Schriften -> Farben

Im Webdesign sind Akzentfarben, Kontrastfarben und die Basisfarben entscheidend für eine ansprechende und funktionale Farbpalette.
- Akzentfarbe
- Akzentfarbe 2 – (alt) (dient z.B. als Hover-Farbe für die Akzentfarbe)
- Stärkster Text
- Starker Text
- Mittlerer Text
- Schlichter Text – Ränder
- Dezenter Hintergrund (so hell, dass starker Text lesbar ist)
- Hellerer Hintergrund (so hell, dass mittlerer Text lesbar ist)
- Weiß oder sehr nah an weiß
Sobald man eine Farbauswahl getroffen und vorgegeben hat, werden alle entsprechenden Bereiche auf der Website automatisch von Kadence angepasst.
So findest du die perfekte Farbpalette für deine Marke und Website
Alles beginnt mit der Akzentfarbe. Sie hebt wichtige Elemente hervor, steuert die Aufmerksamkeit deiner Nutzer und sorgt für eine konsistente Markenwahrnehmung. Das macht die Akzentfarbe zu einer der wichtigsten Farben im Webdesign.
Alle weiteren Farben werden dann auf Basis der Akzentfarbe definiert. Das Ergebnis ist eine harmonische Farbpalette, die nicht nur für eine gute Benutzererfahrung sorgt, sondern auch entscheidend für den Erfolg einer Website ist.
Akzentfarben:
Diese Farben sind kräftig und auffällig, das Kadence-Theme nutzt sie z.B., um Aufmerksamkeit auf wichtige Elemente Elemente wie Call-to-Action-Buttons, Navigationen oder Links zu lenken. Diese Farben dienen dazu, Nutzer auf wichtige Informationen hinzuweisen und Interaktionen zu fördern.
Zusätzlich können Akzentfarben genutzt werden, um die Identität der eigenen Marke auf die Website zu übertragen. Daher macht es in den meisten Fällen Sinn, die Markenfarbe als Akzentfarbe auf der Website zu verwenden.
Die passende Markenfarbe (Akzentfarbe) finden
Sofern du noch keine geeignete Farbe für deinen Markenauftritt gefunden hast, solltest du bei der Auswahl gewisse Standards w.z.B. Zielgruppen- und Branchenrelevanz berücksichtigen.
1.
Kontrast & Lesbarkeit beachten
Achte darauf, dass die Akzentfarbe einen hohen Kontrast zum Hintergrund hat (besonders für Buttons und Links).
Nutze Tools wie WebAIM Contrast Checker, um Barrierefreiheit sicherzustellen.
2.
Branchen- und Zielgruppenorientierung
Je nach Branche und Zielgruppe können bestimmte Farben besser ankommen als andere.
Beispiel: Tech- und Dienstleistungs-Unternehmen nutzen oft Blau, da es Vertrauen signalisiert, während Rot oder Orange gern in der Sportbranche eingesetzt werden, da sie Aufmerksamkeit erregen und positive Emotionen wie Aktivität, Dynamik, Vitalität und Energie hervorrufen.
Sieh dir dazu mal die Tabelle zur Webdesign-Farbpsychologie an.
3.
Farbharmonie mit der restlichen Farbpalette
Die Akzentfarbe sollte sich natürlich auch gut in die allgemeine Farbpalette einfügen. Kombiniere sie mit neutralen Farben (z. B. Weiß-, Grau- oder Schwarztöne), um das Design nicht zu überladen.
Tabelle der Webdesign-Farbpsychologie
Farbe 9172_d77516-32> | Bedeutung & Wirkung 9172_dd071d-ab> | Branchenbeispiele 9172_5225c7-79> |
---|---|---|
Rot 9172_74b4e8-b4> | Energie, Leidenschaft, Dringlichkeit, Aufmerksamkeit 9172_4cb09f-a5> | Gern genutzt in der Sport– u. Fitnessbranche oder Lebensmittelindustrie 9172_d49f3d-73> |
Blau 9172_f67605-a7> | Vertrauen, Sicherheit, Seriosität, Ruhe 9172_5f3fb1-ab> | Gut für Banken, Versicherungen, Dienstleiser & Tech-Unternehmen (z. B. PayPal, Facebook, KadenceWP) 9172_e09bbf-a9> |
Grün 9172_a7daae-4d> | Natur, Wachstum, Nachhaltigkeit, Entspannung 9172_e2d6b1-cb> | Häufig genutzt für Umwelt-, Gesundheits- oder Finanzseiten 9172_3d321a-2e> |
Gelb 9172_0111a7-58> | Motivation, Optimismus, Freundlichkeit, Glück 9172_b26fb8-64> | Wirkt aufmerksamkeitsstark, daher gut für Activity-Sites geeignet (z.B. Reisen, Wandern, Entdecken) 9172_1d1c9e-ea> |
Orange 9172_cfdd5a-73> | Kreativität, Begeisterung, Dynamik 9172_ce08df-f4> | Gut für Startups, kreative Branchen & Sport Websites 9172_1e657d-f2> |
Lila 9172_cfa4d2-b3> | Luxus, Kreativität, Mystik 9172_240e76-2d> | Oft genutzt von Kosmetik-, Mode- und Luxusmarken 9172_bba942-9a> |
Schwarz 9172_8a972e-fd> | Eleganz, Modernität, Kraft 9172_08d50a-94> | Häufig in Luxusmarken und Mode-Websites (Apple, Chanel) 9172_ed06e7-f6> |
Weiß / Grau 9172_6af1f5-93> | Minimalismus, Sauberkeit, Klarheit, Neutralität, Professionalität 9172_db94be-6d> | Brachenübergreifende Basisfarben für moderne, klare Designs u. dezente Hintergründe 9172_ad116d-dc> |
Akzentfarbe bei Kadence bestimmen
Klickt man die Akzentfarbe an, bekommt man direkt die Möglichkeit, den Hex-Code einzugeben, oder die Akzentfarbe im Farbspektrum auszuwählen.
Ich habe für diese Website den Hex-Code #F25F5C in das Hex-Feld eingegeben, um die Akzentfarbe für diese Seite zu bestimmen.

Akzentfarbe 2 (alt) bestimmen
Für die 2. Akzentfarbe kann z.B. ein etwas dunklerer Farbton der Akzentfarbe gewählt werden, wie es bei der Standard-Farbpalette der fall ist.
Alternativ kann aber auch eine Komplementärfarbe bestimmt werden, so wie ich es für diese Website gemacht habe.
1. Akzentfarbe
2. Akzentfarbe
1. Akzentfarbe
2. Akzentfarbe
Nun könnte man es sich leicht machen und einfach den Kadence Color-Picker nutzen, um im Farbschema einen etwas dunkleren Farbton, oder Komplementärfarbton rauszusuchen.
Es gibt jedoch eine etwas professionellere Lösung, um eine wirklich passende zweite Akzentfarbe zu generieren.
Externe Tools zum Erstellen der UI-Farbpalette
Um sicherzustellen, dass alle Farben auf meinen Websites perfekt miteinander harmonieren, lasse ich alle Farben in dem Farbgenerator von ColorSpace generieren. Hier kann man einfach den Hex-Code der 1. Akzentfarbe eingegeben, z.B. #3182CE und anschließend auf Generate klicken.
Nun stellt das Tool verschiedene Farbvarianten zusammen, die alle mit der Akzentfarbe harmonieren. Wenn du dir z.B. einen etwas dunkleren Farbton als 2. Akzent wünschst, dann kannst du nach unten scrollen, zu den Farbpaletten Shades und Random Shades.
Ausgehend von der Grundfarbe (#3182CE ganz links) wurden diverse Farbtöne generiert, zwischen denen du einen wählen kannst der dich anspricht.

Du wolltest eigentlich eine Komplementärfarbe nutzen? Ok, scroll einfach nochmal nach oben zur Twisted Spot Palette.
Hier hat das Tool eine schicke Kontrastfarbe für dich generiert, direkt neben der Akzentfarbe.
Um die entsprechende Farbe für die Kadence Farbpalette zu nutzen, musst du nur den Hex-Code (#DCA11D) kopieren und dann bei Kadence einfügen.

Kadence – Alternative Farbpaletten
Das Kadence Theme bietet uns neben der Standard-Farbpalette noch sämtliche Alternativen zur Auswahl.
Sobald sich die geeignete Akzentfarbe für die Website gefunden hat, müssen natürlich noch passende Basis- und Kontrastfarben bestimmt werden. Dazu solltest du zunächst die Farbpaletten durchstöbern, die Kadence bereits an Board hat.
Alle Farbpaletten anzeigen
Klickt man auf das kleine Ordner-Icon unter den Akzentfarben, zeigen sich 8 weitere Farb-Kombinationen, die wir mit einem Mausklick auf unserer Website anwenden können.
Sollte eine dieser Paletten zur eigenen Akzentfarbe passen, hat man leichtes Spiel und es müssen nur Akzentfarbe 1 und 2 geändert werden.
Alternativ werden auch die restlichen Farben individuell bestimmt.

Kontrastfarben (Textfarben)
Nachdem die beiden Hauptfarben festgelegt wurden, geht die Auswahl der restlichen Farben deutlich schneller! Nun gilt es die nächsten vier Farben, nämlich die Kontrastfarben zu bestimmen.
Kontrast- oder Textfarben eignen sich hervorragend, um eine Designhierarchie verschiedener Textarten zu schaffen. Üblich sind dunklere Grautöne, um die Textfarbe für die Überschriften und den Haupttext (Body Text) deiner Website bestimmen.
Sie werden Kontrastfarben genannt, da sie ausreichend Kontrast zum Hintergrund der Website haben müssen, damit alle Texte auch gut lesbar sind.
Nun könnte man hier natürlich verschiedene Grautöne nutzen, allerdings wirkt die Website deutlich lebendiger, wenn für die Textfarben ein kühles oder warmes Grau verwendet wird. Abhängig von den Akzentfarben, kann hier etwas passendes ausgewählt werden.
Für eine perfekte Farbharmonie, lasse ich mir die passenden Textfarben von ColorSpace generieren.
In der Grey Friends Palette befindet sich u.a. ein dunkles Grau, Hex-Code #3F4756. Diesen kopiere ich, gebe ihn oben im Tool ein und klicke auf Generate.

Auf dem dunklen Grau basierend wurden nun verschiedene Grautöne generiert. Nicht vergessen, alle Farbvarianten basieren auf meiner blauen Akzentfarbe.
Die Farbpaletten Shades und Random Shades zeigen mir alle Grauschattierungen an.


Für einen guten Kontrast zum Hintergrund sind mir diese Grautöne jedoch etwas zu hell, daher schnappe ich mir den Hex-Code vom dunkelsten Grau #222A38 und lasse mir dazu die Farbvarianten generieren.
Nun muss ich nur noch nach ganz unten scrollen, wo schon die Random Shades Palette auf mich wartet…
Hier finde ich alle vier Grautöne, die ich für meine Textfarben bnötige.

Und das ist meine Zusammenstellung, eine kleine Ausnahme macht das hellste Grau ganz rechts, dessen Farbton der Shades-Palette entstammt:
#0f1825
#222a38
#474f5f
#6f7888
Beispiele für Textfarben von Kadence
Auf der Website von Kadence findet man folgende Beispiele für Kontrastfarben in verschiedenen Grautönen, auch für wärmere und kühlere Grau-Varianten:
Kühles Grau:
Vergleicht man die Beispielpallete von Kadence, mit den Grautönen die ich generiert hatte, stellt man sofort fest, dass alle vier Farben sehr nah beieinander sind.
#1a202c
#2d3748
#4a5568
#718096
Warmes Grau:
#27241d
#423d33
#504a40
#625d52
Normal Grau:
#222222
#3b3b3b
#515151
#626262
Basisfarben (Hintergrund):
Zu guter letzt müssen nur noch die drei Basisfarben für den Hintergrund bestimmt werden.
Diese Farben bilden die Grundlage für die gesamte visuelle Erfahrung der Nutzer. Sie werden oft auf den größten Flächen der Website verwendet und setzten daher den allgemeinen Ton für die Website. Die Basisfarben sollten eine gute Lesbarkeit gewährleisten und eine angenehme Wahrnehmung für die Nutzer schaffen.
Beispiele für Basisfarben von Kadence
Auch für die Hintergrundfarben hat Kadence auf deren Website ein paar Beispiele vorbereitet:
Kühl:
#edf2f7
#f7fafc
#ffffff
Warm:
#e8e6e1
#faf9f7
#ffffff
Basisfarben für Kadence generieren
Da es bislang so gut funktioniert hat, bediene ich mich mal wieder dem Farbgenerator von ColorSpace, um geeignete Hintergrundfarben für meine Website zu finden.
Hier gebe ich zunächst wieder meine Akzentfarbe #3182CE ein und klicke auf Generate.
Die Natural Palette beinhaltet eine Farbe, die zu meiner fiktiven Website passen würde.
Es ist das Pasell-Mint ganz rechts, also den Hex-Code kopieren und in den Generator damit!

Nachdem das Tool verschiedene Farben generiert hat, nehme ich den etwas helleren Mint-Ton von der Discreet Palette für die 2. Hintergrundfarbe:
#e6f4f1
#ecfdf9
#f9fffc
Der Color-Picker
Da es sich bei der dritten Hintergrundfarbe um ein beinah weiß handelt, habe ich diesmal einfach den #ecfdf9 Farbton eingegeben und den Color-Picker des Kadence Themes in Richtung weiß bewegt.
Somit war #f9fffc der 9. und letzte Farbton für meine Kadence Farbpalette. Natürlich kann hier auch einfach weiß (#ffffff) ausgewählt werden.

Gratuliere! Wenn du allen Schritten bis hierher gefolgt bist, hast du deine Kadence Farbpalette erfolgreich eingerichtet.
Du wirst feststellen, dass Kadence diese neun Farben für verschiedene Bereiche deiner Website verwendet. Alle Elemente wie; Überschriften, Textpassagen, Icons, Buttons und Links verwenden die von dir festgelegten Farben.
Solltest du Veränderungen an der globalen Farbpalette vornehmen, werden alle Bereiche, die global verknüpft sind, automatisch angepasst. Die Farben müssen also nicht mehr manuell in Dutzenden von Bereichen geändert werden!
Du möchtest mitentscheiden, wie und wo deine globalen Farben auf der Website angewendet werden? Kein Problem, das Kadence Theme bietet dir die Option, selbst zu bestimmen, wie z.B. die Hintergrundfarben auf der Website angewendet werden sollen.
Hintergründe
Direkt unter der Farbpalette können die Hintergrundfarben für verschiedene Bereiche der Website definiert werden.
Auch hierbei handelt es sich um globale Einstellungen. Wenn du z.B. den Hintergrund des Titels änderst, wirkt sich das auf jeden Hinertrgrund von Seiten- und Beitragstiteln aus.
Auch die Darstellung der Links auf der Website kann hier global bestimmt werden.

Die Kadence Blocks Farbpalette
Das Kadence Blocks Plugin ist eine leistungsstarke Erweiterung für den Gutenberg-Editor und der Kompagnon des Kadence Themes. Es bereichert das Kadence Theme mit zahlreichen Blöcken, Page Building Funktionalität und hebt damit die Gestaltungsmöglichkeiten im Kadence Theme auf ein ganz neues Level!
Farben zur Farbpalette hinzufügen
Klick einfach oben im Menü des Editors auf das Kadence Symbol und schon präsentiert sich die Farbpalette von Kadence Blocks.
Hier können die bereits im Theme gespeicherten Farben um zusätzliche Farben bereichert werden.
Ich habe z.B. wieder die Akzentfarbe #3182CE bei ColorSpace eingegeben und dann zwei Farben aus der Classy Palette– und zwei weitere Farben von der Matching Palette hinzugefügt.



Diese zusätzlichen Farben sind jetzt kein Teil der globalen Farbpalette von Kadence. Es sind einfach weitere Farben, die von nun an zur Verfügung stehen und auf verschiedene Kadence-Blöcke oder andere Elemente angewendet werden können.
Kadence Farbpalette von Light- zu Dark Mode umschalten

Sicherlich hast du über der Farbpalette des Kadence Themes die Option bemerkt, eine 2. und 3. Farbpalette hinzufügen zu können…
Eine zweite Farbpalette könnte z.B. für den Dark Mode erstellt werden. Allerdings ist die Funktion, die das Umschalten zwischen Light- und Dark Mode ermöglicht, Teil der Pro-Version des Kadence Themes. Daher werde ich dazu ein gesonderte Anleitung machen.
CSS Variablen der Kadence Farbpalette
Sofern du mal Anpassungen mit Custom-CSS im Kadence Theme vornehmen möchtest, macht es Sinn die Variablen als Referenz zu verwenden, anstatt den Hex-Code einzufügen. Das gewährleistet, dass dein Code immer die im Theme bestimmte Farbe ausgibt.
Ok… Mehr fällt mir zu dem Thema grad nicht ein. Aber genau wie alle anderen Beiträge auf dieser Seite, werde ich auch diesen Post regelmäßig updaten!