Marc Tönsing

Hero Color Picker adds per-post background and font color controls to the editor sidebar for hero styling via CSS on elements with the <code>hero-colored</code> class.
Features: 
– Two color controls: <code>Background Color</code> and <code>Font Color</code> 
– On-demand color pickers in compact dropdown popovers 
– Live preview of both colors together directly in the sidebar 
– Applies selected colors to the editor post summary area for a closer backend preview 
– Removes the featured image preview outline while a custom background color is active 
– Accessibility check for <code>WCAG AAA Normal Text</code> with <code>PASS</code> / <code>FAILED</code> status 
– Panel is shown only while editing posts (<code>post</code>), not in template editing contexts 
– Adds a core-like posts list view <code>Hero Background</code> to show only posts with a custom hero background color 
– Works on elements that have the CSS class <code>hero-colored</code>
Stored as post meta: 
– <code>hero_color_picker_hero_color</code> 
– <code>hero_color_picker_font_color</code>
Frontend output (only when values are set):
<pre><code>.hero-colored {
 background-color: $background;
 color: $font;
}
</code></pre>
Important template setup: 
– Open your block theme template (for example <code>Single</code>) in the Site Editor. 
– Select the <code>Group</code> block that should receive the hero styles. 
– In block settings, add <code>hero-colored</code> to <code>Additional CSS class(es)</code>.

Hero Color Picker

Hero Color Picker adds per-post color selection in the editor sidebar for hero styling via CSS.

Jonathan Daggerhart

Toucan – Gutenberg Color Palette is a simple plugin that gives administrators the ability to choose which colors are available in the Gutenberg editor. A predefined list of colors will make it easier for all the site’s content creators to adhere to the same styles and guidelines.
This plugin also allows administrators to disable the “custom color” option in the Gutenberg color picker.
Photo by <a href="https://unsplash.com/@zmachacek?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="nofollow ugc">Zdeněk Macháček</a> on <a href="https://unsplash.com/s/photos/toucan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="nofollow ugc">Unsplash</a>

Toucan – Gutenberg Color Palette

Toucan - Gutenberg Color Palette is a simple plugin that gives administrators the ability to choose which colors are available in the Gutenberg editor …

Hero Color Picker vs Toucan – Gutenberg Color Palette