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.7 stars   •   12 ratings
25.4K 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   •   70 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:
Input Forms   •   Visual Elements   •   Productivity

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (3.7)

Definitely a 'Better Color Picker'
October 4th, 2026
Thanks for creating this. It definitely is a better colour picker. Am changing all my current ones to these now
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)
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales