Customizing The Kadence Theme Color Palette? Don’t Make This Mistake!

Share this post or save it for later!

If you’ve put your brand colors in other tools before, it probably didn’t matter which order your colors were added in. The Kadence Color Palette does NOT work that way! Every color in the global palette has a specific purpose on the website. If you mess this up and put colors into the customizer randomly, it can have a negative impact on your website design and I don’t want that to happen to you!

The truth is, you may not be able to fit all of your brand colors into these nine color swatches, and that’s ok. Any brand colors that cannot fit into the Kadence Global Color Palette can be added to the Kadence Blocks settings. I’ll show you how to do that towards the end of this tutorial.

So without further adieu, let me show you how to use the Kadence Theme Color Palette the right way!

How To Access Your Kadence Theme Color Palette Settings

First, you need access to your theme settings. Go to your WordPress dashboard and navigate to Appearance > Customize > Colors & Fonts > Colors. This will pull your theme settings panel while previewing your home page. From this view, you can make changes to the colors and also see how the change will affect your website in real-time.

What Is The Global Kadence Color Palette?

There are three (3) global color palettes in Kadence; each palette gives you nine (9) color swatches. These are global colors that work across your entire website and can be controlled in one spot: from your theme customizer settings. When you update them, the new colors will update all over your website wherever the old colors exist.

Here’s an example of the set of colors I use on this website:

This global color palette is a huge time saver! Can you imagine having to click into every block setting on multiple pages and modify the colors over-and-over again? That would be a monotonous, time-consuming task, not to mention can create inconsistencies in your design, leading to a poor user experience and making you look unprofessional.

How To Change A Color Swatch

3 Color Palettes – Kadence provides you with three (3) color palettes that you can customize; just keep in mind only one can be used at a time. Say you put colors in palette 1 and palette 2 that you want to use; if palette 1 is activated, you won’t be able to access colors in palette 2.

Select one of the palettes to customize.

Click on one of the color swatches within that palette to change the color. A color picker screen will appear, and you can either:

• Use the color picker tool at the top of the screen to select a shade of a specific color.
• Enter a specific color’s hex code number to match a color exactly
• Enter the RGB code to match a color exactly.
• Click on the folder icon and select a palette from 8 pre-defined color palettes created by the Kadence team.
• Click on the folder icon and Import colors. (I’ll share how to do this later in the tutorial.)

The Purpose Of Each Color Swatch

Since every color scheme in the global palette has a specific purpose on the website, let’s discuss how to use each option.

Accent Colors – Swatches 1 & 2

Kadence’s support doc says, “Your accent color will likely be used the least on your site. This is the attention-grabber that highlights the important things. Your calls to action and your powerful one-liners. This is the color you should really put the most time into, as it truly will set the rhythm for your brand. Once you have it dialed in, then select an alt accent color; this could be another color that compliments your main accent or just a darker or lighter shade of your accent color.”

1. Accent – This color is used for buttons & links.
2. Accent Alt – This is the color used when you hover over buttons & links.

All accent colors should only be used for calls to action on your site, like clicking and link or a button! Do not use this color for accent colors or in any other part of your site design. Using the accent color as a background color on a section with no links or buttons can confuse the user and make them think the element is clickable or reduce the impact of your other links and hurt conversions.

Contrast Colors – Swatches 3 – 6

Kadence’s support doc says, “Contrast or Text colors are great ways to create a design hierarchy with your text, borders, etc. Usually, these are the darker “gray” colors that determine the text color for your heading and main site text. While these can be a full gray usually you get a richer-looking site if they are an “off gray” like a cool or warm gray. How cool and how warm depends on your accent colors.”

3. Strongest text – This is used for headings and typically a dark shade, close to black.
4. Strong text – This color is used for the body text color.
5. Medium text color – This is also used for text and is typically a few shades lighter than #4
6. Subtle text – Kadence recommends using this color for borders. If you have the Woocommerce plugin, this color will be used for coupon codes and the text in form fields.
   • If you don’t have the WooCommerce plugin, you can be a tad more creative with this color.
   • I don’t use WooCommerce’s checkout system on this site, so that’s why I chose to use the baby blue color in the palette.

Base/ Background Colors – Swatches 7 – 9

7. Subtle background color – This is a light shade for backgrounds.
8. Lighter background color – This is a very subtle/ pastel color, just a few shades away from white.
9. Lightest color (white or off-white) – This is your brightest color, typically white or off-white.

Kadence’s support doc says, “Your base or background colors are usually at the lightest end white with two off-white variations that have just enough contrast to show a visual difference without having so much contrast that the text is lost in the color. Your base color is the color that people will notice the least, but if selected well makes all the rest of your colors come together.”

How to configure a dark mode color palette

If you want to create a dark mode experience with a more moody website vibe, you should reverse the order of color swatches 3 through 9.

Follow this guide instead, starting at swatch #3:

3. Lightest text – headings color
4. Lighter text – body text color
5. Subtle background color
6. Subtle text – borders + Woo*
7. Medium background color
8. Stronger background color
9. Strongest color

Import Colors From Other Themes

Did you know that you can also import colors as well?

If you are a DIY Dream Site theme shop customer, we have all of the hex codes we use in each theme listed in the Theme-Specific Tutorials section of the Customization Basics course that comes with your Kadence child theme purchase. That way, if you mess up your color scheme you can import the original colors that came with the theme; or for a design shortcut, you can browse through all of the color palettes in any of our themes to import the palette of your choice!

Here’s how to import colors:

• All you have to do is copy the HTML code in the gray box under the color palette you want to import
• Go to your color settings in the Customizer
• Click on the folder icon
• Click on the export/ import tab
• Paste the HTML code in the import
• Click the import button! Easy-peasy.

Once you get your colors all set up, you may have other brand colors that didn’t fit into the 9-swatch palette. In that case, let me show you how you can…

How To Add More Colors To Use Site-Wide

Let’s add additional colors to the Kadence Blocks Controls settings (so you don’t have to enter the hex code every time you want to use it in the future!). To add more colors, you’ll need to have the free Kadence Blocks plugin installed.

Go to any post or page on your website, and click on the Kadence logo icon; this will pull up the Kadence Blocks Control settings, which will modify your block editor defaults.

• Note: The first nine swatches in the Color Palette section are your global colors and cannot be changed from this screen.
• Click the Add Color button to add a new swatch, and a gray swatch will appear. (The order of your swatches on this screen does not matter like it did on your Kadence Theme global colors.)
• Click the gray swatch, update the color and give it a name.
• You can click the red eraser icon to remove the last swatch.
• The settings will automatically save, but you’ll need to reload your page to use the swatch on your page or post.

Refresh the page in your browser and these colors will be available to use in both Kadence Blocks and Gutenberg Blocks. If you change that color swatch, it will update in the other places previously used as well!

Well, friend, that pretty much wraps up this tutorial on how to use the Kadence Theme Color Palette the right way.

Share this post or save it for later!