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.

nickforddesign

An add-on for Advanced Custom Fields to allow users to select from a list of color choices. Setting up the field works exactly like setting up a radio button list, the main difference being that the key will also be used to style the element.
This is useful for allowing users to pick from a limited selection of colors, rather than enter an arbitrary hex value or choose from a color picker.
Supports all of the following color formats:
<ul>
<li>hex: #FF0000</li>
<li>rgb: rgb(255,0,0)</li>
<li>rgba: rgba(255,0,0, 1)</li>
<li>hsl: hsl(0,100%,50%)</li>
<li>hsla: hsla(0,100%,50%, 1)</li>
<li>name: red</li>
</ul>
Note: you may also use <code>none</code> to show a transparent swatch with a checkerboard background.
<h3>Compatibility</h3>
This ACF field type is compatible with:
<ul>
<li>ACF 4</li>
<li>ACF 5 (PRO version)</li>
</ul>

ACF Color Swatches

An add-on for Advanced Custom Fields to allow users to select from a list of color choices. Setting up the field works exactly like setting up a radio …

Hero Color Picker vs ACF Color Swatches