WP Snippet #002 Changing the Gutenberg color palette.
Tags: wordpress, webdev, tutorial
Published: 2020-01-09 19:33:09

---
title: WP Snippet #002 Changing the Gutenberg color palette.
published: true
description: How to set custom colors on the WordPress Gutenberg color palette and remove the option to select custom colors through the color picker.
canonical_url: https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/
cover_image: https://since1979.dev/wp-content/uploads/2019/12/snippet-002-changing-the-gutenberg-color-palette.jpg
tags: wordpress, webdev, tutorial
---
[Originally posted on my website on January 9th 2020](https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/)

### How to set custom colors on the Gutenberg color palette?

The Gutenberg editor offers a great color palette with a custom color picker. But especially in client websites you may want to limit the choices to a predefined set of colors so that clients don't make a true circus of their carefully designed website.

![](https://since1979.dev/wp-content/uploads/2020/01/gutenberg-custom-color-palette.jpg)

To achieve this we can use the code snippet below.

{% gist https://gist.github.com/vanaf1979/fc6a6e6e31b3c1f0c5bd7c6eb6008a65 %}

With the code above we add an action to the *[after_setup_theme](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* hook and register a callback function called *change_gutenberg_color_palette*.

Inside the *change_gutenberg_color_palette* function we use the *[add_theme_support](https://developer.wordpress.org/reference/functions/add_theme_support/)* function to enable the *editor-color-palette* theme support. As the second argument we pass an array containing arrays defining our custom colors.

Each sub-array contains three key/value pairs. namely:

-   **$name**: The name we want to display inside the editor. Note that we use the *__()* function to make these names translatable.
-   **$slug**: A unique slug that we can use in our Css to change the actual colors.
-   **$color**: The hex color value.

#### Use the colors in our Css

To actually make the colors work inside of our theme we have to add a bit of Css for each color like shown below:

{% gist https://gist.github.com/vanaf1979/a8a5d3468ba0549223390178cc207536 %}

### Disable the custom color selector

The code above still leave our users the ability to use the custom color picker to make their own colors. So to be save we can also disable this feature with the code below:

{% gist https://gist.github.com/vanaf1979/d904d848937778594dafc315d87ea765 %}

With the code above we add another action to the *[after_setup_theme](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* hook and register a callback function called *disable_custom_color_picker*.

Inside the *disable_custom_color_picker* function we use the *add_theme_support* function once again but this time we add support for *disable-custom-colors*. (A bit counter intuitive, but it is what it is.)

This removes the "Custom color" link from the palatte like shown in the image below.

![](https://since1979.dev/wp-content/uploads/2020/01/gutenberg-color-palette-no-custom-colors.jpg)

#### Follow
Found this post helpful? Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading**