Managing Brand Colors – Central Color Palette Plugin

Managing Brand Colors – Central Color Palette Plugin

When I’m putting a new site together, I start with a set of colors, the “brand colors.”  Sometimes this is a color swatch and other times it is a list of color hex codes in notepad.  Then, as I move through the sections of the theme Customizer, I copy and paste the color codes from the list into the color input boxes.  This tends to be very clunky.  Later, when I’m making the standard pages with Beaver Builder I have to find that color swatch or copy and paste color codes from the Customizer, interrupting work flow.

Recently I found a handy plugin, Central Color Palette, that lets you enter the color codes once and makes them available in both the theme Customizer and the page builder.  I’ve been quite pleased with it and want to do a quick walk-through.

 

The Central Color Palette Plugin

Hat tip to Kyle Van Deusen of the Admin Bar Facebook group.  Kyle included the Central Color Palette plugin in a list he made of plugins he uses on every site.  It is a free plugin that is available in the WordPress.org plugin directory.

central color palette - wordpress directory

Looking at the plugin page, it is regularly updated, has 26 five star reviews, and works with Beaver Builder and Elementor, as well as the 4 most popular page builder friendly themes: Astra, Generate Press, OceanWP, and Page Builder Framework. For the walk-through, I setup a demo site with these themes and page builders installed.

Setting the Brand Colors

When you install the Central Color Palette plugin a menu item is added on the Admin / Settings menu and there is a settings page.

central color palette settings

In the top section, you check the areas where you would like the color palette to be used.  I check all boxes.  In the middle section you make choices about the style of the color picker. I’ve left the defaults in place, but noted that they do not always override the theme or page builder defaults.  In the bottom section you can export or import settings, in case you’d like to use the same palette on more than one site.

For the same of this demo, I went to the Material Design Palette website.  These are colors inline with Google’s “material design” philosophy.  I picked blue as the primary color and amber as the accent color.  The remaining colors are auto-generated and you get a palette as shown in the lower right corner:

material design palette

Back to the Central Color Palette settings page.  The next step is to add the colors so they are available everywhere else.  You click the “+” sign to add colors.  When you are done, remember to click “Save” at the bottom of the settings page.  Here is the color palette after copying the values:

central color palette colors entered

Checking the Settings in the Theme Customizer and in the Page Builders

If we go into the Customizer for the Astra theme and click on one of the color options, we can see the color palette we entered on the settings page.  It is easy now to choose from the centrally defined brand colors.

central color palette - astra theme customizer

Likewise, when using Beaver Builder, we have our color palette available:

central color palette beaver builder

I switched to the OceanWP theme and the Elementor Page Builder and revisited the settings page to enable the central palette for those.  Here is a screenshot from the OceanWP Customizer settings:

central color palette oceanwp theme

And here is a screenshot with the Elementor page builder:

central color palette elementor page builder

Conclusion

The Central Color Palette plugin is a real time-saver and makes it easier to consistently apply brand colors.  It is good that it works with the two most popular page builders and the four most popular themes that are page builder friendly.  The plugin also helps if you are turning the site over to someone else, or if there are multiple authors, as it is easy to show them where the brand colors are defined.  I encourage you to give the plugin a try and see if it can help you in your workflow.

Close Menu
>

Newsletter Sign Up

Receive occasional emails from WebTNG with reviews, how-tos, editorials and news about themes and plugins with a lifetime license. 


Your email address will not be shared.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.

Pin It on Pinterest

Share This