How to Create a Custom Color Palette for your Gutenberg Theme

Create a beautiful, customized color palette for your WordPress theme, using Gutenberg.

Gutenberg custom color palette example
Example of a custom color palette in Gutenberg.

Gutenberg provides a default color palette to work with, but any theme can override this and provide their own.

  • There are no limits on the amount of colors you can add to your palette
  • Colors will be displayed in the order they are declared in your code
  • 3-digit shorthand is allowed
add_theme_support( 'editor-color-palette',
	'#a156b4',
	'#d0a5db',
	'#eee',
	'#444'
);

Add this code to the functions.php file of your theme.

NOTE: Regardless of the colors you choose, you'll probably want to make sure you include both black (#000) and white (#fff).

Default color palette
Gutenberg's default color palette, for comparison

Disable Custom Color Wheel

You'll notice in the image above, there is no custom color wheel. That's because I have disabled that as well.

We've published another article on how to disable custom colors here.


Brian Gardner has also written a nice article on this topic, and extended it to work with Genesis theme colors in the Customizer.

1 comment on How to Create a Custom Color Palette for your Gutenberg Theme
  1. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would
    have some experience with something like this. Please let me know if you
    run into anything. I truly enjoy reading your blog and I look forward to your new updates.

Leave a Comment