Title: Hero Color Picker
Author: Marc Tönsing
Published: <strong>മാർച്ച്‌ 9, 2026</strong>
Last modified: ഏപ്രിൽ 3, 2026

---

Search plugins

![](https://ps.w.org/hero-color-picker/assets/banner-772x250.png?rev=3486743)

![](https://ps.w.org/hero-color-picker/assets/icon.svg?rev=3485022)

# Hero Color Picker

 By [Marc Tönsing](https://profiles.wordpress.org/marcdk/)

[Download](https://downloads.wordpress.org/plugin/hero-color-picker.1.0.18.zip)

 * [Details](https://ml.wordpress.org/plugins/hero-color-picker/#description)
 * [Reviews](https://ml.wordpress.org/plugins/hero-color-picker/#reviews)
 *  [Installation](https://ml.wordpress.org/plugins/hero-color-picker/#installation)
 * [Development](https://ml.wordpress.org/plugins/hero-color-picker/#developers)

 [Support](https://wordpress.org/support/plugin/hero-color-picker/)

## Description

**Hero Color Picker** adds per-post background and font color controls to the editor
sidebar for hero styling via CSS on elements with the `hero-colored` class.

Features:
 – Two color controls: `Background Color` and `Font Color` – 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 `WCAG AAA Normal Text`
with `PASS` / `FAILED` status – Panel is shown only while editing posts (`post`),
not in template editing contexts – Adds a core-like posts list view `Hero Background`
to show only posts with a custom hero background color – Works on elements that 
have the CSS class `hero-colored`

Stored as post meta:
 – `hero_color_picker_hero_color` – `hero_color_picker_font_color`

Frontend output (only when values are set):

    ```
    .hero-colored {
        background-color: $background;
        color: $font;
    }
    ```

Important template setup:
 – Open your block theme template (for example `Single`)
in the Site Editor. – Select the `Group` block that should receive the hero styles.–
In block settings, add `hero-colored` to `Additional CSS class(es)`.

## Screenshots

 * [[
 * Hero Color Picker sidebar panel with background color, font color, live preview,
   and WCAG status.

## Installation

 1. Place the plugin in `wp-content/plugins/hero-color-picker`.
 2. Activate the plugin in WordPress.
 3. Open `Appearance > Editor` and edit your post template (for example `Single`).
 4. Select the target `Group` block and add the class `hero-colored` in `Additional
    CSS class(es)`.
 5. Optional: open `Posts > All Posts` and click `Hero Background` to list posts with
    a custom hero background.

## FAQ

### How do I add the `hero-colored` CSS class in templates?

 1. Go to `Appearance > Editor` and open the template you use for posts (for example`
    Single`).
 2. Create a `Group` block that wraps the elements you want to style, for example the
    title and featured image.
 3. Open the `Group` block settings, expand `Advanced`, and enter `hero-colored` in`
    Additional CSS class(es)`.
 4. Save the template.

## Reviews

ഈ പ്ലഗിന് റിവ്യൂകൾ ഒന്നുമില്ല.

## Contributors & Developers

“Hero Color Picker” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ Marc Tönsing ](https://profiles.wordpress.org/marcdk/)

“Hero Color Picker” has been translated into 1 locale. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/hero-color-picker/contributors)
for their contributions.

[Translate “Hero Color Picker” into your language.](https://translate.wordpress.org/projects/wp-plugins/hero-color-picker)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/hero-color-picker/),
check out the [SVN repository](https://plugins.svn.wordpress.org/hero-color-picker/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/hero-color-picker/)
by [RSS](https://plugins.trac.wordpress.org/log/hero-color-picker/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.0.18

 * Remove the manual textdomain loading and rely on the modern WordPress default
   translation flow.

#### 1.0.17

 * Updated the WordPress.org icon assets.
 * Added refreshed WordPress.org banner assets in `1544x500` and `772x250`.

#### 1.0.16

 * Fixed loading of WordPress.org language packs for editor JavaScript strings.
 * Marked the editor panel title as translatable.

#### 1.0.15

 * Corrected and refined wording in the readme and editor preview text.

#### 1.0.14

 * Refined the plugin description across plugin metadata and the WordPress.org readme.

#### 1.0.13

 * Updated the editor FAQ link to point directly to the relevant WordPress.org FAQ
   entry.

#### 1.0.12

 * Added an editor FAQ link for frontend setup troubleshooting.
 * Expanded the WordPress.org FAQ with template setup instructions.

#### 1.0.11

 * Bumped plugin version to `1.0.11`.
 * Removed unused WordPress.org banner assets.

#### 1.0.10

 * Bumped plugin version to `1.0.10`.

#### 1.0.9

 * Bumped plugin version to `1.0.9`.

#### 1.0.8

 * Bumped plugin version to `1.0.8`.
 * Added release note entry for `1.0.8`.

#### 1.0.7

 * Added `Hero Background` view on `Posts > All Posts` to list posts with a custom
   hero background color.
 * Editor preview now removes the featured image outline while a custom background
   color is active.
 * Expanded documentation with newly added backend/editor features.

#### 1.0.6

 * Improved and expanded `Description` and `Installation` documentation.
 * Added explicit setup steps for applying the `hero-colored` CSS class in block
   theme templates.

#### 1.0.5

 * Added a second sidebar color control for `Font Color`.
 * Frontend output now applies both `background-color` and `color` to `.hero-colored`.
 * Sidebar color picker is now shown on demand via dropdown popover.
 * Added `WCAG AAA Normal Text` status with `PASS` / `FAILED`.
 * Improved spacing in the color value button.

## Meta

 *  Version **1.0.18**
 *  Last updated **4 ആഴ്ചകൾ ago**
 *  Active installations **Fewer than 10**
 *  വേർഡ്പ്രസ്സ് പതിപ്പ് ** 5.9 അല്ലെങ്കില്‍ അതിലും ഉയര്‍ന്നത് **
 *  Tested up to **6.9.4**
 *  PHP പതിപ്പ് ** 7.3 അല്ലെങ്കില്‍ അതിലും ഉയര്‍ന്നത് **
 *  Languages
 * [English (US)](https://wordpress.org/plugins/hero-color-picker/) ഒപ്പം [German](https://de.wordpress.org/plugins/hero-color-picker/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/hero-color-picker)
 * Tags
 * [accessibility](https://ml.wordpress.org/plugins/tags/accessibility/)[block-editor](https://ml.wordpress.org/plugins/tags/block-editor/)
   [color picker](https://ml.wordpress.org/plugins/tags/color-picker/)[gutenberg](https://ml.wordpress.org/plugins/tags/gutenberg/)
   [wcag](https://ml.wordpress.org/plugins/tags/wcag/)
 *  [Advanced View](https://ml.wordpress.org/plugins/hero-color-picker/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/hero-color-picker/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/hero-color-picker/reviews/)

## Contributors

 *   [ Marc Tönsing ](https://profiles.wordpress.org/marcdk/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/hero-color-picker/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://marc.tv/out/donate)