# Add Brand Colors to the Editor Palette

> Adds your brand colors to the color palette in the block editor, next to the theme's colors, so the exact shades are one click away.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: colors, palette, branding
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/add-brand-colors-to-palette/

## Code

```php
// Colors to add: slug, name and hex value.
$wpide_brand_colors = array(
    array( 'slug' => 'brand', 'name' => 'Brand', 'color' => '#2271b1' ),
    array( 'slug' => 'brand-dark', 'name' => 'Brand dark', 'color' => '#135e96' ),
    array( 'slug' => 'accent', 'name' => 'Accent', 'color' => '#d63638' ),
);

add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_brand_colors ) {
    $data    = $theme_json->get_data();
    $palette = isset( $data['settings']['color']['palette'] ) && is_array( $data['settings']['color']['palette'] ) ? $data['settings']['color']['palette'] : array();
    $palette = isset( $palette['theme'] ) && is_array( $palette['theme'] ) ? $palette['theme'] : $palette;
    $by_slug = array();

    foreach ( array_merge( $palette, $wpide_brand_colors ) as $color ) {
        if ( isset( $color['slug'], $color['color'] ) ) {
            $by_slug[ $color['slug'] ] = $color;
        }
    }

    return $theme_json->update_with( array(
        'version'  => 3,
        'settings' => array(
            'color' => array(
                'palette' => array_values( $by_slug ),
            ),
        ),
    ) );
} );
```

## Notes

Colors with a slug the theme already uses replace the theme color. Each color also becomes a CSS variable such as --wp--preset--color--brand.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add Brand Colors to the Editor Palette" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/