Kadence - Change theme colors

Your color palette shapes the overall feel of your site. With the Kadence Global Palette, you can adjust your colors in one place and see those changes reflected throughout your theme.

Choosing Your Colors

Before updating your palette, it's helpful to have a general color direction in mind. Your color palette sets the tone for your site, so a little planning goes a long way!

If you're starting from scratch, aim for:

  • 1 to 2 accent colors (used for buttons, links, highlights)
  • A range of neutral/contrast colors (for text and backgrounds)
  • A few lighter background tones for sections and spacing

In Kadence, each color in the palette has a purpose (accent, contrast, or background), so keeping a balanced mix will help your design feel cohesive and easy to read.

For inspiration, you can browse our Color Palettes board on Pinterest!

Once you find a palette you love, you can plug those colors directly into your Global Palette below.

Understanding Hex Codes

Colors in Kadence are added using hex codes, a six-digit combination of letters and numbers (like #E1CFC8) that represents a specific color.

If you already have a color palette, you can copy and paste the hex codes directly into the color picker. If not, you can use an eyedropper tool to grab colors from images using tools like Image Color Picker, Canva, or Photoshop.

Global Color Palette

To update your colors, go to Appearance > Customize > Colors & Fonts > Colors.

Under Global Palette, you can swap in your new colors. You can replace the entire palette or just update a few — either approach works, and it's completely fine for colors to repeat.

One important note: the position and order of colors in the palette matter. Click here to learn more about how to properly use the Kadence Global Palette.

Below is an example of the Global Palette in our Savannah theme:

Alternate Color Palettes

Kadence supports two alternate predefined color palettes, which can be found at Appearance > Customize > Colors & Fonts > Colors. Below is an example of an alternate palette in our Savannah theme:

You can click "Palette 2" or "Palette 3" to access the alternate color palettes. Feel free to edit these palettes!

Global Default Colors

Once your color palette is set up with your own colors, your site will update automatically with those colors!

But let's say that your theme currently uses Global Color 3 for your Heading color, and you'd like to use Global Color 4 for your Headings instead. Here's where to change some of the global default colors in your theme:

Body Font Color: Appearance > Customize > Colors & Fonts > Typography > Base Font

Link Color: Appearance > Customize > Colors & Fonts > Colors > Content Links

Heading Color: Appearance > Customize > Colors & Fonts > Typography > Headings (each heading has its own color setting)

Button Color: Appearance > Customize > Colors & Fonts > Buttons (can change the initial button color and hover color here)

Header and Footer Colors

The Customizer is where you'll edit your Header/Navigation and Footer. You can hover over any Header or Footer element in the Live Preview and click the Edit icon to customize that area.

Let's say you want to change the background color of the top navigation bar in your theme. Hover over it, click the blue pencil (Edit) icon, and then you'll see these settings appear on the left:

Simply click on the color swatch under Top Row Background, and then select a color from your palette (or a custom color!).

Now that you've updated the background color, maybe you'd like to change the link color for the Secondary Navigation Menu that is inside the Top Row. Make sure that you are in the Header area of the Customizer, and then look to the Header Builder at the bottom of your screen:

Click on the Settings icon next to Secondary Navigation. That will bring up these settings:

Under Navigation Colors, you can change the color of the link, hover, and active states. You can also update the navigation menu font here!

These same principles apply to ALL elements in the Header and Footer of your theme. You can use the Kadence Header Builder and Kadence Footer Builder to navigate the settings and make updates as needed.

Block Editor Colors

You also have full control of your colors within the Block Editor. Click on any section and go to the Style tab to change its background color:

The same applies to headings and text. Click on the text you'd like to edit, and go to the Style tab:

In this screenshot, you'll notice that there is no color selected for this Heading. This heading is inheriting the Heading color set in the Customizer (see "Global Default Colors" above), but you're welcome to select a different color from your palette!