Change the color palette of the Gutenberg Blocks editor in WordPress

Here is a simple guide on how to update the color palette of the Block editor to fit your theme!

There are two methods:

  1. Using a plugin
  2. Adding code to functions.php and your stylesheet.

Updating the color palette of the block editor is a must if you are looking to be consistent with your colors (which you should!). The easiest way is to use a plugin, but if you are comfortable writing code this might be your best option.

The default WordPress color palette

1. Using a plugin

This is a convinient method that enables you to update the default color palette within the WordPress admin. We have found that a light weight plugin that does the job well is ‘Block Editor Colors’. Simply download it from within the plugin page and you will be able to update the colors under ‘Settings -> Editor Colors‘.

Option page of the 'Block Editor Colors' plugin.
Option page of the ‘Block Editor Colors’ plugin.

2. Add with code

Updating the color palette using code in your theme (or plugin) is a two step process.

  1. Add your custom color classes to functions.php.
  2. Add your colors to these classes in your stylesheet.

1. Add your colors in functions.php

 * Add custom color palette in Block editor.
function wpblockz_gutenberg_color_palette() {
		'editor-color-palette', array(
				'name'  => esc_html__( 'Green', '@@textdomain' ),
				'slug' => 'green',
				'color' => '#b1ead4',
				'name'  => esc_html__( 'Yellow', '@@textdomain' ),
				'slug' => 'yellow',
				'color' => '#fee95c',
add_action( 'after_setup_theme', 'wpblockz_gutenberg_color_palette' );

2. Add colors to classes in your themes stylesheet

In your stylesheet (css/scss) you need to add matching classes to your custom colors. If you pick a background-color to a block, it will add a class called ‘has-{your-custom-color}-background-color’. You will have to add this class to your stylesheet and and the color to it, like below:

.has-green-background-color {
     background-color: #b1ead4;
.has-green-color {
     color: #b1ead4;
.has-yellow-background-color {
     background-color: #fee95c;
.has-yellow-color {
     color: #fee95c;

Once this is setup you will not have to think about picking the correct color again! Adding it with code will minimize your plugin count & keep these settings in your code instead of in your database. If your are a web developer, this is the way to go.

Stay updated with the latest from WpBlockz

* indicates required