Чтобы добавить свои образцы цветов (color palette) в редактор Гутенберг (Gutenberg) в WordPress, нужно использовать фильтр add_theme_support('editor-color-palette', [...]) в файле вашей темы functions.php.

Использовать предопределенную палитру цветов удобно для достижения единого визуального стиля сайта — не нужно каждый раз искать цвет и вставлять его в нужный блок. С помощью предопределенной палитры мы просто выбираем нужный цвет.

ШАГ 1. Добавляем код в functions.php:

function mypalette_colors() {
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => __('Primary', 'your-textdomain'),
            'slug'  => 'primary',
            'color' => '#1a73e8',
        ),
        array(
            'name'  => __('Secondary', 'your-textdomain'),
            'slug'  => 'secondary',
            'color' => '#e91e63',
        ),
        array(
            'name'  => __('Dark Gray', 'your-textdomain'),
            'slug'  => 'dark-gray',
            'color' => '#333333',
        ),
        array(
            'name'  => __('Light Gray', 'your-textdomain'),
            'slug'  => 'light-gray',
            'color' => '#f2f2f2',
        ),
    ));
}
add_action('after_setup_theme', 'mypalette_colors');

Здесь определяем основные цвета сайта, которые будут отображаться в палитре.

ШАГ 2. Запрещаем редактору использовать произвольные цвета, чтобы отображались только те цвета, которые мы определили. Для этого добавьте:

add_theme_support('disable-custom-colors');

Пример с отключением произвольных цветов:

function mytheme_custom_colors() {
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => __('Primary', 'your-textdomain'),
            'slug'  => 'primary',
            'color' => '#1a73e8',
        ),
        array(
            'name'  => __('Accent', 'your-textdomain'),
            'slug'  => 'accent',
            'color' => '#ff5722',
        ),
    ));
    add_theme_support('disable-custom-colors');
}
add_action('after_setup_theme', 'mytheme_custom_colors');

И заключительный момент. Теперь образцы цветов появились в вашем редакторе, но при применении цвета на текст или блок, они не отображаются на сайте.
Чтобы это поправить нужно прописать стили для ваших цветов. Для этого добавьте в ваш файл style.css классы для новой палитры:

.has-primary-color { 
	color: #1a73e8;
}
.has-accent-color {
	color: #ff5722;
}

.has-primary-background-color { 
	background: #1a73e8;
}

.has-accent-background-color { 
	background: #ff5722;
}