Kadence – Changing Your Theme Colors (Complete Guide)
Kadence uses a Global Color Palette system that makes it easy to manage your brand colors across your entire site. Once you understand how the palette works, changing colors becomes much faster and more consistent, without having to hunt down individual settings later.
In this article:
- Understanding the Global Color Palette
- Global Color Palette groups
- Alternative color palettes
- Where to change global default theme colors
- Updating colors in other Customizer areas
- Updating colors of individual blocks inside pages
Understanding The Global Color Palette
To change the Global Color Palette in your theme, from your dashboard, go to:
Appearance > Customize > Colors & Fonts > Colors
Here you will see the Kadence Global Color Palette. Click on any color to enter a hex code or use the color picker to select your own colors. (I don't recommend changing the opacity of your global color palette colors)
The most important thing to understand is that the position and order of the colors matter.
Each palette slot is used intentionally throughout the theme. Instead of assigning random custom colors everywhere, Kadence connects buttons, text, backgrounds, and other elements to specific palette positions.
For example:
- A light base color should stay light
- A dark contrast color should stay dark
If you ever want to refresh your brand colors in the future, you can simply update the palette once and those changes will apply everywhere that palette color is used.
For example:
If your theme uses Accent Color 1 as the background color for your base button, and you later decide you want a different color for it, you can either:
- Change Accent Color 1 in the palette to a new color, or
- Change the button setting to use Accent Color 2 instead
Both approaches keep everything connected to the palette!
Global Color Palette groups
The Kadence Global Color Palette is organized into four main groups:
Accent colors
These are your primary brand colors. They are commonly used for buttons, links, highlights, icons, and decorative elements.
Contrast colors
These are usually darker colors used for headings, body text, buttons, and high-contrast elements.
Base (background) colors
These are lighter colors used for page backgrounds and content areas.
Notices (feedback) colors
These are used for alerts, success messages, warnings, and informational notices. Not used often, but they are helpful for forms and system messages.
Alternative color palettes
Kadence also includes two additional predefined palettes – Palette 2 and Palette 3. You can switch between these palettes using the tabs at the top of the Colors panel.
These are helpful if you want alternate color schemes for seasonal designs or future rebrands and don't want to lose your main color palette.
Where to change global default colors
Kadence lets you control your default colors for your theme directly in the Customizer. These settings usually reference the global palette, but you can use custom colors if you want! Here are some common locations:
Body font color
Appearance > Customize > Colors & Fonts > Typography > Base Font
Heading colors
Appearance > Customize > Colors & Fonts > Typography > Headings
Each heading level has its own color setting.
Link colors
Appearance > Customize > Colors & Fonts > Colors > Content Links
This option is located near the bottom of the Colors panel.
Base button colors
Appearance > Customize > Colors & Fonts > Base Button Styles
Secondary button colors
Appearance > Customize > Colors & Fonts > Secondary Button
Outline button colors
Appearance > Customize > Colors & Fonts > Outline Button
Updating colors in other Customizer areas
While exploring the Customizer, you will notice that many panels include a Design tab. These tabs almost always contain color settings specific to that section.
These settings usually reference the global palette, but you can use custom colors that are not linked to your palette.
For example, in:
Appearance > Customize > Post/Pages Layout > Single Post Layout > Click the "Design" Tab
Here, you will find color options for elements like the Post title, Category links, Breadcrumbs, etc.
Updating colors of individual blocks (backgrounds, buttons, headings, + more)
You have full control over colors inside the Block Editor.
While inside a page or post, click on any Kadence block or row/section, then open the Style tab in the block settings on the right. Kadence blocks include options for background colors, text colors, borders, accents, and more (depending on the type of block).
Whenever possible, choose a color from your color palette instead of a custom color. This ensures your block styling stays consistent with the rest of your site and updates automatically if your palette changes later.
The same applies to headings, text, and button blocks! By default, these will use the global colors and styles you have set in the customizer, but you can update them individually. Click on the text or button you'd like to edit, and go to the Style tab: