How to Add Custom Colors to the Color Palette in Gutenberg

You may have noticed in Gutenberg (WordPress) you have the ability to choose a color from the color palette for the background or text color of the block you are working on under color settings on the right-hand side.

You will see predefined colors and an option (if your theme allows the ability) to pick a custom color from the color palette like below:

Wouldn’t it be cool if you could have your custom colors already predefined instead of using the predefined colors that come with your theme without using a plugin?

Well, you can, and it is as simple as editing the functions.php file (I suggest creating a child theme so that way if your main theme updates it will not override these edits) and adding some css to the custom css section.

Adding Custom Colors to the Color Palette

Step 1

Go to Appearance >> Theme Editor >> functions.php

Add the following:

// Adds support for editor color palette.
add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'Light gray', 'themename' ),
		'slug'  => 'light-gray',
		'color'	=> '#f5f5f5',
	),
	array(
		'name'  => __( 'Medium gray', 'themename' ),
		'slug'  => 'medium-gray',
		'color' => '#999',
	),
	array(
		'name'  => __( 'Dark gray', 'themename' ),
		'slug'  => 'dark-gray',
		'color' => '#333',
       ),
) );

You will notice code above adds a light gray, medium gray, and dark gray color. You can add more colors by repeating the following before the ) ); at the end.

array(
		'name'  => __( 'Dark gray', 'themename' ),
		'slug'  => 'dark-gray',
		'color' => '#333',
       ),

Make sure to change ‘themename’ to the name of your theme. You can usually scroll up in the functions file and find the name of the theme.

Name = This is what you will see when you scroll over the color in the editor

Slug = This needs to be a unique name

Color = Here you will put the hex color (you can find hex color values here)

Step 2 – Add the CSS

Go to Appearance >> Edit Css

Add the following:

/** CUSTOM COLOR PALETTE **/
.has-ColorNameHere-color {
    color: #f5f5f5;
}

You will need to add the following for EACH color

.has-ColorNameHere-color {
color: #f5f5f5;
}

Make sure to replace ColorNameHere with the slug of the color in your functions.php file and replace the #f5f5f5 with your color hex number that corresponds to that color slug.

Example functions.php code:

// Adds support for editor color palette.
add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'Light gray', 'mytheme' ),
		'slug'  => 'light-gray',
		'color'	=> '#f5f5f5',
	),
	array(
		'name'  => __( 'Medium gray', 'mytheme' ),
		'slug'  => 'medium-gray',
		'color' => '#999',
	),
	array(
		'name'  => __( 'Dark gray', 'mytheme' ),
		'slug'  => 'dark-gray',
		'color' => '#333',
       ),
) );

Example of the corresponding CSS for the Css file:

/** CUSTOM COLOR PALETTE **/
.has-light-gray-color {
    color: #f5f5f5;
}
.has-medium-gray-color {
    color: #999;
}
.has-dark-gray-color {
    color: #333;
}

Disclaimer: This post is for informational / educational purposes only. Opinions expressed in this post are not intended to provide specific financial, legal, or medical advice / recommendation. Bridget is not a lawyer, financial advsior, medical professional, therapist, astronomer or palm reader. You use this information in this post and elsewhere on the site at your own risk. This information on this site should not be taken as any type of professional advice. You should always consult a professional for any kind of legal, medical, or financial advice.