Strapi plugin logo for RGBA Color Picker

RGBA Color Picker

A custom field plugin for Strapi v5 that allows color selection using RGBA, RGB, HEX, HSL, and HSLA formats, with live preview and transparency control.

thumbnail for RGBA Color Picker

RGBA Color Picker Plugin for Strapi

RGBA Color Picker Demo

A custom field plugin for Strapi v5 that allows color selection using RGBA, RGB, HEX, HSL, and HSLA formats, with live preview and transparency control.


📦 Installation

yarn add rgba-color-picker

Then enable it in your /strapi/config/plugins.ts:

1export default {
2  plugins: {
3    'rgba-color-picker': {
4      enabled: true,
5    },
6  },
7};

If you're installing directly in a src/plugins folder instead, copy the plugin manually and skip the npm install step.


✨ Features

  • 🎨 Pick colors using multiple formats: hex, rgb, rgba, hsl, hsla
  • 🖱️ Built-in color input with preview
  • ✍️ Manual value input with real-time validation
  • 🔠 Format selector (with persistence)
  • 🌍 Internationalization support (English and Portuguese 🇺🇸 🇧🇷)

🧩 Usage

  1. Go to the Content-type Builder in your Strapi Admin.
  2. Create or edit a collection type.
  3. Add a new Custom Field and choose RGBA Color Picker.
  4. Select your default format (optional).
  5. Save and use the color picker in your entries!

🌐 Translations (i18n)

The plugin is fully translatable. Included locales:

  • en (English)
  • pt-BR (Português Brasil)

If you'd like to contribute with other languages, feel free to open a PR!


🧪 Development & Contributing

To develop locally:

# Link the plugin to your Strapi project manually:
# Inside your Strapi app root
cd src/plugins
git clone https://github.com/thiagotnon/strapi-rgba-color-picker.git

# Or use `npm link` for local testing

To contribute:

  1. Fork the repo
  2. Make your changes
  3. Submit a PR ❤️

📄 License

MIT © RGBA Color Picker Plugin for Strapi


📚 Related

Install now

npm install rgba-color-picker

STATS

No GitHub star yet155 weekly downloads

Last updated

7 days ago

Strapi Version

5.14.0 and above

Author

github profile image for Thiago N.
Thiago N.

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.