If you’re just starting a blog or a website, one of the first things you should do is develop a color palette to define your brand.

A well-designed color palette can elicit emotion, positively impact conversions, and tell your brand’s story all in one fell swoop.

Luckily, if you’re using the Kadence theme for your WordPress website, you are already equipped with the Kadence global color palette that you can define yourself which then sets the tone for your whole site.

If your site or blog is not already running the Kadence theme, well, then you should probably read about how the Kadence theme won my award for the best free WordPress theme for 2021.

Okay, so Kadence offers this global color palette, but you might be wondering, how do I use the Kadence global color palette? Which colors should I choose? What colors complement other colors?

First things first, you need to understand what each of the nine colors is used for through your website built with the Kadence theme.

According to the Kadence documentation on how to use the Kadence theme color palette, the nine colors in your Kadence global color palette are used throughout your website as shown below:

1. Accent color
2. Accent – alt (the color that shows when you hover over the accent color)
3. Strongest text
4. Strong text
5. Medium text
6. Subtle text – also used for borders
7. Subtle background (light enough that strong text is readable)
8. Lighter background (light enough that medium text is readable)
9. Lightest background (white or very close to white)

In this Kadence color palette tutorial, I’m going to teach you exactly how you can define each of your brand’s colors using free tools and get all nine of your Kadence global colors set so you can supercharge your brand and have a killer website.

Let’s get started.

Use the steps below to learn how to use the Kadence global color palette to supercharge your brand:

TABLE OF CONTENTS

• 1. Choose Your Main Brand Color (Accent Color)
• 2. Choose Your Second Accent Color (Hover Color)
• 3. Choose Your Contrast Colors (Text Colors)
• 4. Choose Your Base Colors (Background Colors)
• 5. Add Additional Colors to Kadence Color Palette
• 6. Create a Dark Theme Using Kadence Color Palette

Start Blogging 101 is reader-supported. If you purchase through a link on my site, I may earn a commission. Learn more

1. Choose Your Main Brand Color (Accent Color)

The very first thing you’re going to want to do is to choose your brand color (accent color). This color is used the least throughout your site, but it is the color that draws attention to different areas of your site.

Think of a living room with white trim and light gray walls. Your couch is dark gray, but then you have some throw pillows on your couch and a single chair that are a bold blue color. Your eyes immediately go to the blue pillows and the blue chair when you walk into the room. This color gives your living room a pop of color and makes it not so bland.

Your website links, your CTA (Call To Action) buttons, your logo… these are like the pillows and the chair. They need to draw attention from your visitors.

Make sure to put some time into thinking about this color because rebranding your site is never fun (I did it twice in one year… oops).

In order to get some inspiration, head on over to coolors.co which is a fun color palette generation site I recently stumbled upon.

You can generate your own palette by using the generate link, otherwise, you can explore some predefined color palettes that they came up with.

Here are a few sample color palettes taken from the coolors.co explore color palettes page.

Example Color Palette 1:

#264653

#2A9D8F

#E9C46A

#F4A261

#E76F51

Example Color Palette 2:

#50514F

#F25F5C

#FFE066

#247BA0

#70C1B3

Example Color Palette 3:

#E63946

#F1FAEE

#A8DADC

#457B9D

#1D3557

**Note: You will NOT be adding all of these colors to your Kadence global color palette.

P.S. Do you enjoy these color palette blocks? I built them using the free Kadence Blocks plugin!

So, as an example, I’m going to choose Example Color Palette 2. Whatever color palette you choose, only choose ONE color to be your main brand color (accent color).

I’m going to go with the red color second from the left that has a Hex code of #F25F5C.

Now, what happens with the other four colors within Example Color Palette 2? It’s important to note that these colors will NOT be added as the main nine colors in your global color palette. But, you do have a few options:

1. You can install the free Kadence Blocks plugin and add several additional colors to your color palette that can then be easily accessed for different colored buttons, text colors, backgrounds of sidebar elements, and much more. I go over this in detail in Step 5 – Add Additional Colors to Kadence Color Palette.
2. You can make note of the other colors and import them into a program from the Adobe Creative Cloud such as Photoshop or Illustrator and use those colors to help create your blog images, SVGs, logos, or whatever graphics you have on your site. This is what I do for Start Blogging 101. My brothers are graphic designers and they have an entire swatch of colors for my color palette imported into Photoshop and Illustrator to create blog images, logos, and other graphics for the site.
3. You could hire someone off of Fiverr and have them create graphics for your site using your color palette.
4. You could completely ignore the other colors if you don’t care for them since you already have your main brand color chosen.

Once you have your main brand color chosen and have the Hex code for it, plug it in as the first color in your Kadence global color palette.

As you can see, I put the Hex code of #F25F5C into the Hex box which then set my first color as my main brand (accent color).

Now it’s time to move on to Step 2.

2. Choose Your Second Accent Color (Hover Color)

Woot woot! Your main brand color is chosen which will act as an accent color for your entire site.

For me, I chose the color #F25F5C from Example Color Palette 2:

Now, the second color you need to specify in your Kadence global color palette is your second accent color which is the color that will show when you hover over the accent color. Basically, this will be the color that shows when you hover over links on your website.

For me, personally, I simply like a darker shade of the accent color so that when you hover over links, it’s noticeably darker than the original accent color.

This is where a lot of people get confused. How do I determine what color this should be? Should I simply use the Kadence color picker and choose a random color that looks like a darker shade of my color?

Well, you could do that and I don’t think anyone is going to complain, but there’s a reason why successful companies take time to define their brand’s color palette.

Have you ever gone to a website and felt like all the colors they used “just looked good” together? There’s a reason for that. Certain colors are harmonious with other colors and certain colors complement other colors nicely.

What if you could really easily find a darker shade for your second accent color that is in harmony with your main accent color? What if you could find a color that perfectly complements your main brand color?

I’ve got good news. There’s a free tool to do just that provided by Adobe which is the same type of tool included for paid users of Photoshop and Illustrator.

Go to Adobe’s Color Wheel website and let’s begin.

The first thing you’ll want to do is take the Hex code for your main brand color and input it into the very center of the five columns which will become your base color.

So, I’ll take #F25F5C and plug it into the center column value as seen in the image below.

Now, on the left side of your page, you’ll see several options to create colors around your base color:

• Analogous
• Monochromatic
• Triad
• Complementary
• Split Complementary
• Double Split Complementary
• Square
• Compound
• Shades
• Custom

If you are looking for a darker shade of your main brand color to be your second color in your Kadence global color palette, then you’ll want to click on Shades on the left side.

With my main brand color in the center as my base color and Shades chosen on the left side, I get the following swatch of colors:

#B34644

#732D2C

#F25F5C

#FF6461

#D95552

These are all shades of your base color that go perfectly with it.

So, if you want a darker shade of your main brand color, you could choose the 1st, 2nd, or 5th option in this palette.

Personally, I always like choosing the 1st of the Shades options for my second accent color (hover color). In this case, the 1st shade option is #B34644. It’s bolder and darker, but not too drastically different. However, you can choose whichever shade you’d like.

Since I have my second accent (hover) color chosen, I input my Hex code of #B34644 into my second color on my Kadence color palette.

This is how I approach setting colors on my websites. I choose the route of picking a darker shade of my main color as my second color.

If you also choose the option of using a darker shade for your second accent color, using your first and second accent colors can make some really nice gradients for transparent headers or buttons.

Check out the Kadence button below using my two accent colors as a gradient:

Get Kadence Theme Pro

See how smooth the gradient looks? The two colors blend into each other beautifully and it’s a very clean look which is why I prefer the option of choosing a darker shade of my main brand color for my hover color.

That being said, there are obviously other options as well. For your second accent color, you could choose a color that complements your main brand color.

Let me show you how that’s done.

With your main color set in the center column of the Adobe Color Wheel (in my case, #F25F5C), now choose Complementary on the left side in your array of options.

When you choose Complementary, you are given another swatch of colors as seen below:

#A6302E

#FF7D7A

#F25F5C

#1EA649

#5CF28B

As you can see from the colors above, the main brand color is in the middle (#F25F5C). The color that complements the main color perfectly in this example is the 5th color (#5CF28B). Looking at the color wheel will help show you what color complements your color for your situation.

Therefore, depending on your main brand color and what color complements it, you could set your second accent color to be the complementary color of your main accent color.

This would allow you to create different CTA (Call To Action) button backgrounds that look really good when paired together.

Check out the example of two buttons below. The first button is my main brand color from this Kadence color palette tutorial and the second is the complementary color of my main brand color (the buttons don’t do anything):

Main Brand Color

Complementary Color

Whatever you decide to do, use the Adobe Color Wheel to play around with various options to determine what you want your second accent color to be.

Wrap up: I have two suggested options when choosing your second accent color. The first suggested option for your second accent color would be to use a darker shade of your main brand color using the Shades option on the left in the Adobe Color Wheel.

The second suggested option would be to choose the Complementary option on the left and set your second color to be a color that complements your main brand color. However, keep in mind that this color will look vastly different when hovering over your main links. That being said, it will look very good when paired with your main brand color.

You’re now ready for Step 3.

3. Choose Your Contrast Colors (Text Colors)

With your main accent color and second accent color (hover color) chosen, you’re well on your way to learning how to use the Kadence color palette to supercharge your brand.

Even though you only have your first two colors set in your Kadence global color palette and there are seven colors remaining, these remaining seven will go much quicker.

The next four colors on your global color palette are your contrast colors which are used for text throughout your Kadence website.

The official documentation on the Kadence WP site teaching you how to use the Kadence theme color palette offers some fantastic examples of three different sets of contrast colors you can choose from which I’ll go over below.

The three examples provided by the Kadence team give an option for cool grays, warm grays, or regular grays. What you decide to use depends on your main accent color and what look you’re going for on your website.

Does your site use more cool colors (greens, blues, purples)? Use the Cool Gray Example. Does your site use more warm colors (reds, oranges, yellows)? Use the Warm Gray Example. Is your site design neutral or do you simply want to use basic grays? Use the Gray Example.

Cool Gray Example:

#1A202C

#2D3748

#4A5568

#718096

Warm Gray Example:

#27241D

#423D33

#504A40

#625D52

Gray Example:

#222222

#3B3B3B

#515151

#626262

It’s as simple as that. Unless you’re extremely set on using a different palette of grays, I would use one of the 3 shown above and be done with it.

For this example, I really like the Cool Gray Example to be matched with my main brand color, so I’m going to use that for my Kadence contrast colors.

If your Kadence website doesn’t already have the four contrast colors (text colors) that you chose, go through colors 3 through 6 and add the Hex codes for each of your contrast colors.

In the image above, I’m specifically showing color number 6 (which is used for subtle text) being set.

Once you are finished setting all your contrast colors in your Kadence color palette, you can move onto Step 4 – you’re on the home stretch!

4. Choose Your Base Colors (Background Colors)

You’ve made it to the final step before one optional step and one bonus step! So far, you have chosen your main brand color (accent color), your second accent color, and your four contrast colors (text colors).

All that’s left is choosing your three remaining base colors which are used for backgrounds on your site.

Your base colors are usually a pure white (or close to it) and two more off-white variations.

If choosing your contrast colors went quickly, this step should be even quicker. The Kadence documentation also gives two different sets of base colors – a Cool Base Example and a Warm Base Example. I also decided to add an additional set of base colors that I created called the Gray Base Example.

Remember the Cool Gray Example, the Warm Gray Example, and the Gray Example from your contrast colors above? Your base colors have the same example sets that you can match up.

If you used the Cool Gray Example for your contrast colors, I would suggest using the Cool Base Example for base colors. Likewise, if you used the Warm Gray Example for your contrast colors, use the Warm Base Example for base colors. Finally, if you used the Gray Example for your contrast colors, use the Gray Base Example for your base colors.

Cool Base Example:

#EDF2F7

#F7FAFC

#FFFFFF

Warm Base Example:

#E8E6E1

#FAF9F7

#FFFFFF

Gray Base Example:

#EDEDED

#F6F6F6

#FFFFFF

Since I used the Cool Gray Example for my contrast colors, I chose the Cool Base Example for my base colors.

I plug in the remaining three colors in my Kadence global color palette:

*insert party horn sounds* Congratulations! You have finished mastering your Kadence global color palette and have set all nine colors to be used throughout your site.

Once you are done inputting all the colors in your Kadence color palette, publish your changes and take a peek around your site!

You’ll notice that your site uses all nine of these colors throughout various areas from your headers all the way down to your WordPress comments. Pretty neat, huh?

Also, while you’re customizing your site, you will see several color controls have a Globe icon on top of them. This indicates that the color is globally linked to your Kadence global color palette.

Feel free to globally link any areas on your website to your global color palette. Then, if you ever change any of the colors in your global color palette, all areas that are globally linked will automatically get changed for you. No need to manually change colors in dozens of areas!

The Kadence theme is the first WordPress theme that has taken the concept of a global color palette and nailed it. It’s so well implemented and opens up a whole new level of customization and allows you to change your site colors quicker than any other theme.

Other themes have you manually change colors all the way throughout your site if you need to make color changes that take a significant amount of time compared to Kadence.

If you want to learn how to add additional colors to your Kadence color palette, check out the next step – Step 5.

5. Add Additional Colors to Kadence Color Palette

Now that you officially have all nine of your Kadence color palette colors chosen, it’s time to add additional colors! This step is optional, but can really help speed up the design process of your website if you have additional colors outside of your global color palette that you frequently need to use.

Say you have all nine of your global colors set in the Kadence color palette, but you want to add additional colors to access in order to easily set colors for different buttons, text colors, backgrounds of elements or blocks throughout your site, and much more. This step has you covered.

For this step, you will need to install the free Kadence Blocks plugin which allows you to add additional colors to your color palette.

Once you have successfully installed the Kadence Blocks plugin, go to an area such as your Posts and click on a post to go in and edit the post.

In the upper right, you will see a Kadence logo for Kadence Blocks Controls. Click that and you will see all nine of the Kadence global color palette colors that you just set.

Notice that there are lock icons over all nine of your Kadence global colors because these colors are locked in and can’t be changed from the Kadence Blocks Controls.

However, click the Add Color button for as many new colors that you want to add. In this case, I’m going to add the additional four colors from Example Color Palette 2 that I never added from before.

I click the Add Color button four times and see the following result:

Now that you have open spots for four additional colors, click on the first one and plug in the Hex code of your first color that you want to add.

In my case, I’m going to add the #50514F color which is the first color in my Example Color Palette 2 from Step 1:

I input the Hex code as shown in the image above. Also, notice you can give your color a Name which makes it a little easier to reference if the color is used for something specific. Give it whatever name you want or leave it as is.

Next, go through and add whatever remaining colors you want. For me, I’m going to add the three remaining colors from Example Color Palette 2:

As you can see in the image above, I went through and added all four additional colors to the Kadence color palette.

One important thing to note – notice these additional colors do not have a lock icon on them. This is because you’re free to change these colors in the Kadence Blocks Controls as you please.

These additional colors are not technically part of your Kadence global color palette. They are simply additional colors that will now show up on various Kadence Blocks and Gutenberg block controls that you can quickly choose so you don’t have to manually copy and paste Hex codes for each area throughout your site – a huge time saver!

Lastly, now that you have those colors defined, they will now show up when you’re adding buttons or any other Kadence/Gutenberg block on your site.

For example, if I add a new button to one of my pages or posts and I open up the color control, I now see the following:

Notice that you see all nine of your Kadence global color palette colors on the first row. Moreover, you now see the additional four colors below them and you can choose any of those colors as well.

No more needing to remember Hex codes and copy and pasting them throughout your whole site – how nice is that?!

With more colors to choose from, I can super easily create an array of new buttons on my site for various purposes:

Color 1

Color 2

Color 3

Color 4

Color 5

Time for a bonus step – Step 6!

6. Create a Dark Theme Using Kadence Color Palette

Here is a final bonus step for anyone wondering how to create a dark theme with the Kadence theme color palette.

With a dark theme website, all of the colors are essentially the opposite of a light theme website. Fortunately, with the epic Kadence theme color palette, you can very easily give your website a dark theme look.

In this Kadence color palette tutorial, Color 3 through Color 9 went from darkest to lightest. Color 3 through Color 6 were our darker contrast colors and Color 7 through Color 9 were our light base colors.

For a dark theme, you’re going to flip those colors. Your first two accent colors will stay the exact same. However, Color 3 through Color 9 will be lightest to darkest rather than darkest to lightest.

So, simply reverse the colors in your Kadence color palette while keeping your two accent colors. The end result will look something like this:

Notice how Color 3 through Color 9 have completely flipped. The lightest color is on the left and they increasingly get darker all the way until the end.

Assuming the corresponding areas of your website are globally linked to the Kadence color palette, this will now make backgrounds on your website dark and make the text light which creates a beautiful dark theme for your website.

Easy peasy!

---

I hope you enjoyed learning how to use the Kadence global color palette to supercharge your brand! I wanted to expand on the Kadence documentation and give a detailed Kadence color palette tutorial to help you better learn how to master the design of your website.

The Kadence global color palette is honestly such a simple concept, and yet the Kadence theme is the first WordPress theme that I’ve seen master it. It is extremely intuitive and helps drastically cut down the design time of building out your website.

This color palette feature is just one of many features that helped the Kadence theme win my award for the best WordPress theme in 2021.

What do you think of the Kadence color palette? Has it helped you master the design of your dream website or blog? Let me know in the comments below!

转自startblogging101.com