WordPressのカラーパレットを制限（カスタム）する

見本

こんな感じになる。

実装

functions.php

// デフォルトのカラーピッカーを使用不可にする
add_theme_support('disable-custom-colors');
add_theme_support('editor-gradient-presets', []);
add_theme_support('disable-custom-gradients', true);

// 自前のカラーパレットを追加する
function mytheme_setup_theme_supported_features()
{
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => esc_attr__('body black', 'themeLangDomain'),
            'slug'  => 'body',
            'color' => '#272727',
        ),
        array(
            'name'  => esc_attr__('primary green', 'themeLangDomain'),
            'slug'  => 'primary',
            'color' => '#128580',
        ),
        array(
            'name'  => esc_attr__('white', 'themeLangDomain'),
            'slug'  => 'white',
            'color' => '#fff',
        ),
        array(
            'name'  => esc_attr__('gray', 'themeLangDomain'),
            'slug'  => 'gray',
            'color' => '#f7f7f7',
        ),
    ));
}

add_action('after_setup_theme', 'mytheme_setup_theme_supported_features');

style.css

/* color-pallet */
.has-body-background-color {
  background-color: #272727;
}

.has-body-color {
  color: #272727;
}

.has-primary-background-color {
  background-color: #128580;
}

.has-primary-color {
  color: #128580;
}

.has-white-background-color {
  background-color: #fff;
}

.has-white-color {
  color: #fff;
}

.has-gray-background-color {
  background-color: #f7f7f7;
}

.has-gray-color {
  color: #f7f7f7;
}

補足

その他の設定方法についてはこの記事が詳しい。
https://wp-manual.com/block-editor/block_color/