@explified/strapi-plugin-color-picker

A color picker custom field plugin for Strapi v5.

Features

• Visual color picker powered by react-colorful
• Stores colors as HEX strings (e.g. #0055FF)
• Configurable preset color swatches
• Built-in HEX validation with customizable regex
• Default color and required field options
• Internationalization support

Installation

npm install @explified/strapi-plugin-color-picker

Configuration

Add the plugin to your config/plugins.ts (or .js):

export default () => ({
  'color-picker': {
    enabled: true,
  },
});

Rebuild and restart Strapi:

npm run build
npm run develop

Usage

1. Open the Content-Type Builder in the Strapi admin panel.
2. Add or edit a content type.
3. Click "Add another field" and select the "Custom" tab.
4. Choose "Color" from the list.
5. Configure the field options as needed:
   • Default HEX color (default: #0055FF)
   • Preset colors as comma-separated HEX values
   • RegExp validation pattern
   • Required field toggle

Compatibility

License

MIT

Author

Explified — hello@explified.com