Customize colors in Gutenberg with the Custom Color Palette

With Custom Color Palette , I published my latest plugin on WordPress.org last week, which I would now like to introduce in a short article. With the plugin you can easily create your own color palette for Gutenberg in the customizer.

The new Gutenberg editor keeps me busy. In addition to developing custom blocks, I'm currently very busy adapting all of my WordPress themes for Gutenberg.

Among other things, of course, with registration of a suitable color palette in the theme. The idea arose to enable WordPress users to create an individual color palette in the form of a simple plug-in without the need for programming knowledge.

Custom color palette

The plugin is still available for download in its virgin state without many active installations and reviews in the plugin directory. The German translation is currently still missing, but I will provide it in the next few days.

A small and simple plugin to adjust the default color palette of the new WordPress Gutenberg Editor.

By: OneTheme

( 2 )
Last updated: 9 months ago
3,000+ active installations
Compatible up to: 5.4.4

As a prerequisite, of course, WordPress 5.0 or the Gutenberg plugin must be installed.

Define the color palette in the customizer

After activating the plugin, the colors can be adjusted under Design → Customizer → Custom Color Palette . The standard palette consists of eleven colors, but fewer or more colors can be activated or deactivated in the customizer.

Adjust the color palette in the customizer

There are three different color categories available:

  • Main colors of the website
    Here you can set the primary, secondary and accent colors to match the theme.
  • Grayscale
    White and black alone are always good text colors for light and dark backgrounds in a color palette, but a few shades of gray in between are also very practical.
  • Primary colors
    If the main colors are not enough for you, you can add some basic colors to the color palette with blue, red, green etc.

The color values ​​can be adjusted as required in the customizer. After reloading the editor, the new colors are available for use in the Gutenberg color palette:

Custom color palette

For technical implementation

How exactly colors can be registered and implemented has already been explained in detail in my tutorial Registering the Gutenberg color palette in the theme . In addition to the color value, a name and a slug for the CSS class must be defined for each color.

In the first concept of the plugin, I wanted to offer options for the complete array of the color palette, including name, slug and color. For reasons of usability I decided to simplify the plugin by simply giving the name and slug. But the colors can be activated individually, which means that the configuration remains relatively flexible and different color palettes are possible.

Changing the standard colors is based on CSS variables in the background and therefore only works in modern browsers, i.e. not in Internet Explorer. This should be taken into account when using the plugin.

The new colors are not added to the existing palette, but completely replace the previous color palette of the theme or WordPress Core.

Conclusion

Custom Color Palette is a small and simple plugin with which you can register your own color palette for Gutenberg without code and adjust the color values ​​yourself with just a few clicks in the customizer. It is suitable if the theme does not provide a suitable color palette or if the existing colors are to be changed.

If you have feedback, feature requests or questions about the plugin, just leave a comment here 🙂