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.
RGBA Color Picker Plugin for Strapi
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
- Go to the Content-type Builder in your Strapi Admin.
- Create or edit a collection type.
- Add a new Custom Field and choose RGBA Color Picker.
- Select your default format (optional).
- 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:
- Fork the repo
- Make your changes
- Submit a PR ❤️
📄 License
MIT © RGBA Color Picker Plugin for Strapi
📚 Related
Install now
npm install rgba-color-picker
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.