---
tags:
  - wordpress
  - fse
  - theme.json
  - color
  - palette
  - blocks
title: Defining Block-Specific Color Palettes
---

# Defining Block-Specific Color Palettes

While a global color palette is essential for consistency, sometimes you need to enforce stricter design rules on a specific block. For example, you might want to ensure that a "Call to Action" button can *only* use high-contrast brand colors, not the full range of grays and secondary colors available elsewhere.

You can achieve this by defining a unique color palette for a single block within the `settings` section of `theme.json`.

## 1. The "Why": Design Governance

By providing a block-specific palette, you can:
*   **Prevent bad choices:** Stop editors from picking a low-contrast color combination that fails accessibility standards.
*   **Simplify the UI:** Present a smaller, more relevant set of color options for a specific component.
*   **Enforce brand identity:** Ensure that critical components like a "Subscribe" button always use the primary brand colors.

## 2. The "How": Overriding Settings per Block

The logic lives inside `settings.blocks`. You can override almost any global setting (like `color`, `typography`, etc.) on a per-block basis.

### Example: A Limited Palette for the Button Block

In this example, we'll configure the `core/button` block so it only shows two color options in the editor: "Brand Primary" and "Brand Accent".

**File:** `theme.json`

```json
{
    "version": 3,
    "settings": {
        "color": {
            "palette": [
                { "slug": "global-white", "color": "#FFFFFF", "name": "White" },
                { "slug": "global-black", "color": "#000000", "name": "Black" },
                { "slug": "global-gray", "color": "#CCCCCC", "name": "Gray" }
            ]
        },
        "blocks": {
            "core/button": {
                "color": {
                    "defaultPalette": false,
                    "palette": [
                        { "slug": "brand-primary", "color": "#ff007f", "name": "Brand Primary" },
                        { "slug": "brand-accent", "color": "#00c853", "name": "Brand Accent" }
                    ]
                }
            }
        }
    }
}
```

## 3. The Result in the Editor

*   **For any other block (e.g., Paragraph):** The color picker will show "White", "Black", and "Gray".
*   **For the Button block:** The color picker will **only** show "Brand Primary" and "Brand Accent". The global and default WordPress palettes will be hidden.

### Key Takeaways

*   **`settings.blocks` is for UI Control:** This configuration changes the options available in the editor's sidebar.
*   **It Replaces, Not Merges:** The block-specific palette *replaces* the global one for that block's UI. It does not add to it.
*   **`defaultPalette: false`:** This is crucial for removing the standard WordPress colors (Blue, Red, Green, etc.) from the block's color picker, giving you complete control.