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;
}

.hero-colored a {
 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.

Darryl Erentzen

This Plugin is an experiment, I needed to let users pick colors for entries intended to be displayed in a Calendar View. I discovered a workaround on the <a href="https://formidablepro.com/adding-a-color-picker-field/" rel="nofollow ugc">Formidable Web Site</a> that was a few years old, so I decided to grab the current version of <a href="http://jscolor.com/" rel="nofollow ugc">jscolor</a> and put it in a plugin for easier deployment.
Along the way I discovered a few other color picker libraries for jQuery, so when I get around to it I’ll add them to the plugin to give users some different display options.
Please Note: This plugin requires the Formidable Pro Plugin (https://formidablepro.com/) by <a href="http://strategy11.com/" rel="nofollow ugc">Strategy11 </a>to be installed and activated before installation. Formidable Pro is an awesome plugin.

Formidable Pro Color Picker

Adds a Color Picker Field type to the Advanced Fields in Formidable Pro

Hero Color Picker vs Formidable Pro Color Picker