Forum Documentation Showcase Pricing Learn more

🎨 [Free Plugin] Color picker


#1

Just released a new FREE colorpicker called Air Color Picker.
Now that we have dynamic colors this should come in handy.
Several options to customize your color picker. Will just leave it to you to explore the options.
Just want to highlight one cool feature though.
If you check “Show selection palette”, the picker will save the users most recent colors in the browser (client-side), up to “Max selection size”. When the browser is refreshed or even closed the colors will persist.
This is cool because your users will be able to choose from their recently used colours without you storing it in your database and thereby saving some workflow runs and loading time.
Of course you have the option to dynamically set your palette too using “Palette colors
NB: The colors doesn’t look as pixilated as it shows in the screencast below. This is as a result of compressing the gif to make it small for this forum post.

Here are the numerous options you can set.

Happy bubbling :grinning:


Option is power
seanhoots


Making the color wheel an option for users
#2

Action
ColorPicker’s value return’s a hex color text. e.g. #17d9fd

Event
ColorPicker’s color changed. Called as the original input changes. Only happens when the input is closed or the ‘Choose’ button is clicked.

I intentionally didn’t expose a trigger event while dragging on clicking on the picker area. This is because users may want to be trying different colors and attaching an action to such an event will be crazily expensive.
Even with the current implementation you may want to rethink about when you actually want to perform a database workflow action. You may consider having a dedicated button to initiate a workflow to save the color in the database instead of using the color changed event because again users like playing around with colours and you dont want to be writing to the database anytime the choose a new color.


#3

@seanhoots Respect!

This plugin is amazing and easy to use. Love the options it provides. I’m still testing it but from what I see I’m impressed.


#4

Thank you so much @seanhoots ! Just what I needed for my new app!

As the Canva Button https://www.canva.com/getthebutton is no longer available, I need to find other solutions to do graphic editing. So trying to build some kind of graphic editor in Bubble, a challenge… :slight_smile:


#5

@seanhoots I’m loving the plugin so much. I noticed that the plugin support transparency, but when I try to save a transparent color to the database it doesn’t save it. Even though the the Bubble dynamic color support RGBA as well.

Any ideas?


#6

Awesome tool. Only issue I see thus far is that the disabled function does not appear to be working. Other then that it is working perfectly as advertised.


#7

Soooo good!

Colours/ user customization is now ace.


#8

New Update (version 1.1.0)

  1. Added support for value to return different color strings (hex,hex3,rgb,rgba,hsl,name) based on the format selected in the property editor.
    When rgb is chosen and a transparency is applied it will return an rgba value (the last part of the value is the percentage of the transparency/alpha)
    When name is chosen and the color selected doesn’t have a name it will default to any of the appropriate types.
    Idea: If you want your users to select only colors with names you can define your own palette with named colors and restrict them to choosing only those colors.
    NB: Even if you have chosen a particular format your users can still enter any color string format in the input and it will be accepted and displayed in the chosen format :smile:

@vascolucci : this update is in response to your comment. hope it meets your needs
@Bradluffy : the disabled function works at my end. let me know if it still doesn’t work.


#10

Awesome, the new update did it. :grin::thumbsup:

Thanks @seanhoots


#11

I love the color picker and have been using it in my app but it seems to have stopped working. I have made sure there no conflicts in my app and even tried in a new (clean app) and it is still not working. Can you please give an update @seanhoots


#12

Hi Warren, I will take a look at it


#13

Hi @warren.hobden, I just tested the plugin and it seems to be working.
I’ve also not received any complains from anyone about the plugin not working.
Let me know if you’re still having issues and if possible send me a link to your app so i take a look at what’s going on.


#14

Hi, I tested the picker this morning - and it worked then but have now stopped working. Only showing the frame and no color.


#15

Hi @carstenkring,
Can you share your page preview link with me either here or privately.
Or send me the error message in the console.


#16

@seanhoots
Any chance some type of Bubble update broke this plugin? I’m seeing an error on all of my apps in place of the color picker:

57%20PM


#17

We pushed a fix.


#18

thanks, works now. scary stuff


#19

This has just started happening to me. Anyone know a fix?


#20

Does it work if you create a blank page and just put the color picker on it? I just tested and this works for me.

I discussed this issue with @seanhoots some weeks ago and I dont know if he ever found the cause and fixed it.

However, I made it work for my app as the element works if placed in a group which is hidden on pageload and later called by workflow - which is how I use it.

image


#21

Thanks that fixed it. Just set it to display when page load complete. Appreciate your help!