I have put this guide together after seeing @Bradluffy’s question about a color wheel. Ideally this would be a plugin, but for now I have combined @mishav’s Toolbox plugin and JSColor (http://jscolor.com) to do the task. Expect to spend about 10-20 minutes getting your own implementation up and running. I chose to use a simple input format (hex-only, click to activate) in order to make this easy for end users as well as Bubble creators.
You can preview the above example here: Bubble Application
If you want to jump right in, check out the editor here: sandboxthings | Bubble Editor
Let’s start:
We’ll be piecing together 9 core components, each having its own purpose and should be built out on the same page.
1) HTML element containing JSColor script. Note: you do not have to include ‘JSColor Embed Code’ at the beginning, it is there to help you see the element on the page. This element should be small and out of the way, it’s simply here to embed the code on your page. Alternatively, you could embed this in the SEO & Metadata Script input in your Settings tab so that it loads on every page.
The forums have a 35,000 character limit, so I can’t embed the JS. Go and download the latest JSColor library (http://jscolor.com/release/latest.zip), unzip, and open the jscolor.js file in a text/code editor. Copy->paste this code into the HTML block on your page or into the SEO & Metadata Advanced Settings panel.
2) Toolbox JavascripttoBubble element which connects your actions in the JSColor popup to the hex input field in [3]. You will need to install Toolbox from plugins tab in your app, this is just the plugin descriptor page: Toolbox Plugin | Bubble
This is added to the page by selecting the element in the editor Visual Elements sidebar
You’ll notice the suffix is set to ‘jscolor’, this can be anything but it must match up with the JavaScript in [5]
3) Input field which is a background element that allows you to save the generated hex code from [2] to your database. Since JSColor generates a 6 character hex code you will need to prepend the generated value with #
4) Text element used for resetting hex value of your database thing on click, see workflow [5]. This can be any element that is clickable, such as a button, instead of text.
5) HTML element containing JSColor front-end HTML/JS code which renders the color selector upon click. The width, height and other parameters of this element are set in the style=“” attribute, you can customize this as much as you want with CSS. You will notice the suffix from [2] is used in the JS function bubble_fn_jscolor. I have added additional JS to color the input background prior to the user saving the hex code, this way it acts as a sort of preview prior to making a decision to save.
[details=Show Code]
<p id="rect" style="border:none; width:0; height:0;">
<script>
function update(jscolor) {
// 'jscolor' instance can be used as a string
bubble_fn_jscolor(jscolor.toString());
document.getElementById('rect').style.backgroundColor = '#' + jscolor;
}
</script>
[/details]
6) Button element which, upon clicking, sends the JSColor hex code to the input field [3]. Bubble can not read the hex code from this custom HTML input, so we have to send the hex to a Bubble element in order to reference its value in a workflow [7]. You’ll notice in the preview I am setting some conditions to update this button’s text description, text color and clickability. You’re obviously welcome (and encouraged!) to expand on this UX 
By setting the default text color as the generated hex code from input [3] prior to saving, the user can again see a preview of the color they’ve selected prior to saving.
7) Workflow that updates the appropriate database thing after clicking Set Color button [6], in my case I have chosen to modify a text field on the current user. For whatever color you are trying to customize in your app/database, you will need to modify the database text thing in a workflow referencing the input value generated [3]
8) Workflow that resets the data thing’s hex color after clicking Clear [4]. This isn’t entirely necessary but I found it nice to have a single-click reset.
9) Background that contains our saved hex color as a dynamic value. This can be anything you wish, now that Bubble allows dynamic colors (Thanks @vascolucci! [New Feature] Dynamic colors) the color you just generated can be used on most of Bubble’s core elements (in this case, a page background).
I hope this has been helpful, let me know if I might’ve missed an opportunity to make this even better or if you’re confused at any specific step in the process and I’ll jump back in to make adjustments. Happy Bubbling!
