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.

Bhumi Shah

A simple plugin to select color in the same way you select color in Adobe Photoshop using jQuery. Here I have provided both textfield and icon options for the picker.Its auto generate shortcode for picker.
<h3>Arbitrary section 1</h3>

jQuery Color Picker

A simple plugin to select color in the same way you select color in Adobe Photoshop using jQuery

Hero Color Picker vs jQuery Color Picker