How to Create Custom Color Palette in Gutenberg

Some themes have the ability to change the color palette swatches in Gutenberg, however, if your theme doesn’t have that ability, then you can add a custom color yourself with our tutorial here. We used the Twenty Twenty One theme for our example which doesn’t have many color options in the color palette.

As you noticed in the above image, we still can pick a custom color for the color option by clicking on this area, however, allowing this kind of freedom sometimes can result in the website content going haywire from any color scheme you’ve defined in your theme, for example, users may pick colors that make reading difficult, and that may have a negative impact for your website. But, don’t worry we will give you a way to disable the custom color picker in Gutenberg later in this tutorial.

How to Create Custom Color Pallete in Gutenberg

First, you need to be logged in as a user with an administrator role for the capability to edit the theme of your WordPress site, specifically, we will add some snippet into the theme functions.php file.

From your WordPress dashboard, go to Appearance → Theme File Editor, it will take you to the Edit Themes page, go to the Theme Files section and open the functions.php file to edit it.

The function for adding the color palette looks like this:

add_theme_support( 'editor-color-palette', array );

'editor_color_palette' here is a built-in variable to add the custom color palette and the array is the array of colors. And in the Twenty Twenty-One theme, each color itself has defined with an array of name:value pairs. Try searching for “palette” in the functions.php by pressing Ctrl+F in the editor, it will bring you to the color palette codes.

Here’s what the existing code in the Twenty Twenty-One looks like:

 add_theme_support(
			'editor-color-palette',
			array(
				array(
					'name'  => esc_html__( 'Black', 'twentytwentyone' ),
					'slug'  => 'black',
					'color' => $black,
				),
				array(
					'name'  => esc_html__( 'Dark gray', 'twentytwentyone' ),
					'slug'  => 'dark-gray',
					'color' => $dark_gray,
				),
				array(
					'name'  => esc_html__( 'Gray', 'twentytwentyone' ),
					'slug'  => 'gray',
					'color' => $gray,
				),
    
                                 More colors...

For each color you want to have in your palette you need to add an array to the structure. Each array has:

• name : color label
• slug : how it’s referred to in CSS code
• color : variable for the color

Then for the new color to be added, it will be inserted in the list of the color variables on Twenty Owenty-One:

		// Editor color palette.
		$black     = '#000000';
		$dark_gray = '#28303D';
		$gray      = '#39414D';
		$green     = '#D1E4DD';
		$blue      = '#D1DFE4';
                More colors....

Adding a New Color to the Palette

To add the new color to the theme, continue by adding a new variable and its hex code. let’s add the color of ‘wood’ for example:

$wood      = '#966F33',

Add the colors to the Editor color palette list, then the final list will be like this:

                // Editor color palette.
		$black     = '#000000';
		$dark_gray = '#28303D';
		$gray      = '#39414D';
		$green     = '#D1E4DD';
		$blue      = '#D1DFE4';
		$purple    = '#D1D1E4';
		$red       = '#E4D1D1';
		$orange    = '#E4DAD1';
		$yellow    = '#EEEADD';
		$white     = '#FFFFFF';
		$wood      = '#966F33';

Then continue by adding a new array for the wood color in the color palette function.

                          array(
					'name'  => esc_html__( 'Wood', 'twentytwentyone' ),
					'slug'  => 'Wood',
					'color' => $wood,
				),

And the final code will be like this:

That’s it for adding a new color to the color palette in Twenty Twenty-One WordPress theme, the color palette will look like the following in Gutenberg editor.

Removing The Custom Color Picker

Now time to remove the custom color picker area to keep our color scheme for the theme safe.

Go back to the functions.php then add the following snippet just above the editor color palette list.

add_theme_support( 'disable-custom-colors' );

Now try to refresh the Gutenberg editor and take a look at the color palette. The custom color picker is gone and our color scheme will be safe.

The Bottom Line

Some themes have the ability to change the color palette swatches in Gutenberg, however, if your theme doesn’t have that ability, then you can add a custom color yourself, however adding a custom color palette to Gutenberg is a bit of a challenge since each theme has a different location for the palette code.