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.
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.
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:
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:
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.
Likewise, when using Beaver Builder, we have our color palette available:
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:
And here is a screenshot with the 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.
