MARKETPLACE
PLUGINS
BETTER COLOR PICKER
Better Color Picker logo

Better Color Picker

Published August 2021
   •    Updated today

Plugin details

Add a native or modern color picker to Bubble apps and use the selected hex color in workflows, database fields, and dynamic expressions.
- Use the browser-native picker or a styled modern picker.
- Set the initial color from static values or Bubble dynamic data.
- Publish the selected color as a hex value.
- Add optional swatches from a Bubble list of text values.
- Trigger workflows when the user changes the color.

Documentation:
https://notquiteunicorns.xyz/plugins/better-color-picker-cwppv

Demo:
https://bubble-essential-plugins.bubbleapps.io/version-test/color-picker

This plugin is free, and maintained by Not Quite Unicorns, a Gold Bubble Partner agency.

We help complex apps scale further on Bubble than they knew was possible. To join us, visit https://notquiteunicorns.xyz

Free

For everyone

3.6 stars   •   11 ratings
25.1K installs
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Not Quite Unicorns logo
Not Quite Unicorns
Joined 2022   •   68 Plugins
View contributor profile

Instructions

Add the Color picker element to the page where the user should choose a color. Set Initial color, Height (px), Width (px), and Corner radius (%) in the property editor.
Choose Picker mode. Native browser picker uses the user's browser and operating system color picker. Modern picker uses the styled picker with theme, opacity, format, and swatch options.

Use Swatches as an optional list of text values in Modern picker mode. Leave it empty to hide swatch circles.

Use the Selected color state anywhere you need the chosen color. Add a workflow for the Color changed event when you want to save the color, preview it elsewhere on the page, or update another element.

Documentation:
https://notquiteunicorns.xyz/plugins/better-color-picker-cwppv

Demo:
https://bubble-essential-plugins.bubbleapps.io/version-test/color-picker

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event

Categories

This plugin can be found under the following categories:

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (3.6)

Adorei o plugin
June 12th, 2026
Plugin muito bom estou achando ótimo Renato, vc é de +. Parabéns.
The option to get the color when the picker is closed is not working
August 24th, 2025
The plugin is cool. Issue is the option to get the color when the picker is closed is not working. Even when checked, when a user drags the color selection in the color spectrum, the system detects that the are dozens of colors being picked, leading to the page breaking and forcing the page to refresh. Will change the review if the author is able to update the plugin with fix.
Perfect, do the job
July 27th, 2024
No issue, it works perfectly well. But I don't know why I have this into my debugger each time I open my app : The plugin Color Picker - Simple & Beautiful / element Color Picker threw the following error: TypeError: Cannot read properties of null (reading 'match') at eval (PLUGIN_1630165567096x291526050839265300/Color-Picker---Simple---Beautiful-initializeState_Color-Color-Picker--.js:3:21) at https://app.mykonform.com/package/run_debug_js/3f644f759ab5930558627ba550e5f179432b7066dc6065817ce00d47cc462043/xfalse/x29/run_debug.js:587:651 (please report this to the plugin author)
Error was occured
June 28th, 2024
Bug in custom code TypeError: Cannot read properties of null (reading 'match') at HTMLDocument.eval (PLUGIN_1630165567096x291526050839265300/Color-Picker---Simple---Beautiful-update--Color-Picker--.js:3:552) at e (https://workie-talkie.me/package/pre_run_jquery_js/dee903a9e36db713e4c86d0cdd96d921e37be0c1293ed8dee29e2e4d7713b9ff/pre_run_jquery.js:2:30158) at t (https://workie-talkie.me/package/pre_run_jquery_js/dee903a9e36db713e4c86d0cdd96d921e37be0c1293ed8dee29e2e4d7713b9ff/pre_run_jquery.js:2:30460) at root (https://workie-talkie.me/package/pre_run_jquery_js/dee903a9e36db713e4c86d0cdd96d921e37be0c1293ed8dee29e2e4d7713b9ff/pre_run_jquery.js:2:31823)
Excelente plugin!
April 11th, 2024
Muito bom e eficiente! Se puder acrescentar a opção para definir a cor da borda do picker, vai ajudar bastante nos casos onde a cor selecionada é a mesma do container (o picker fica "invisível").
Bubble