I was planning to use an HTML color input for setting up colors in my extension.
dlg.set_html '<input type="color">'
In Chrome it works just fine.
But in SketchUp UI::HTMLDialog
clicking the color picker doesn’t open the selection popup. (Tested in 2018, and 2020)

Does anyone know of a solution?
That really stinks. (And I did do some google searching before positing this question)
So the only option is to use a third party control? Any recommendations?
At one time I had the code for Chameleon which was implemented in JavaScript.
Looks like …
Wheel Mode |
|
Triangle Mode |
 |
|
 |
Oh I guess it is still available …
Chameleon Color Picker
Chameleon is completely free, and licensed under the openest of open source licenses, the BSD license. This means you can even include it in a closed-source commercial product, so you don’t have to pay someone a lot of money to build a color picker for you, which would probably suck anyway.
Chameleon JS code
Thanks
I’ve also been looking at Vanilla-Picker.
That might have an advantage with an alpha control? I think I remember trying to tweak Chameleon to add an alpha slider.
A pile of work for something that I was expecting to work ‘out of the box’.
In my case I didn’t need the alpha control, but its a simple boolean property to turn it on or off.
IS that what Vanilla Picker looks like ?
The gif makes the color gradient look blotchy.
Here is what it looks like by default.
And here is what it looks like with a few style changes. The default was a bit to big and blocky for my taste.
1 Like
Looks good. Is that in a HtmlDialog of it’s own, or a child popup of a HtmlDialog ?
I guess it must be a popup as it has no border or window caption bar.
1 Like
It’s actually just a div at the very end of the body
, with a high z-index. The rest is all done in JavaScript. I learned a lot about HTML and JavaScript yesterday! 
<div id="color_picker" style="position: absolute; top: 0px; z-index: 10000;"></div>
1 Like