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.

8 comments on How to Create a Custom Color Palette for your Gutenberg Theme
  1. The only reason why I think people dislike Gutenberg is because they don’t like changes. As I’ve observed, most of these people are the ones who are deeply invested into page builders like Elementor, Divi, etc.

    Gutenberg is not that bad at all. You can do a lot of things even complex layout with it. People like to dismiss it right away without even giving it a proper try. Like everything, there’s a learning curve but for me Gutenberg comes out naturally. Maybe because I feel that it’s a native part of WordPress. In fact, I’ve built a site using only Gutenberg and I can say that it does a lot. I’m surprised myself of what I came up with actually. If you want to see it, I can give you a link but I’m not posting it here.

    As all software, there will be bugs but the WordPress team is on top of it. So instead of saying it’s bad, why not give it a try and send your feedbacks to the devs so they can address it and make it better.

    • @Dino said “Gutenberg is not that bad at all. You can do a lot of things even complex layout with it.”

      Yes it can. The problem is, complex layouts usually don’t translate well responsively, especially when you adopt a mobile-first mindset. Mobile-first is the industry standard. Yet, unfortunately, GB doesn’t (yet?) have a mobile preview. That’s troubling.

      Regardless of how people feel about change, issuing a no-choice mandate (as opposed to letting the market decide) is no way to win them over. Again, such things are troubling.

      Instead of point fingers at the many long-time supporters of WP, perhaps it’s better to take a long hard look at leadership and how they failed to get their message across, sell their vision, etc. Unfortunately, “leadership” (and I’m now being generous) failed to own their shortcomings.

  2. Actually I like Gutenberg interface, it make me want to write more and more. But like others I have to learn about Gutenberg because for long time I used to old editor. Then I came here

  3. Gutenberg is extremely annoying. It’s not fluid, it’s not supple, and the fact that it wasn’t designed to work with previous plug-ins: there’s just no excuse for that. To leave a writer or an editor without the ability to scroll, to force everybody to go back to the coders, is just plain sadistic. I have deadlines. I have other things to do.

  4. Not impressed with Gutenberg. It’s creating a lot of uncertainty and near panic in the WordPress community, and comes across as a desperate act that is too little, too late. I have a feeling I’ll be sticking with the old one. I’ve never really liked any sort of drag and drop editor, they always feel so wonky to me. But I won’t wave it away completely just yet, not until I actually try it!


Leave a Comment