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',

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.

Share This Article

Scroll to Top