I had the recent requirement to provide an end-user the ability to select a color for a theme.  Using javascript, I was able to convert the regular TextBox component into a color picker.

In order to best achieve this, measures are taken to initially hide the element.  In this case, I’ve chosen a Theme Style that I’ve named “HiddenDiv” that has the CSS property “visibility” set to “hidden”.  The body onload javascript is then used to set the input type to color, and afterwards to apply the normal class to the element.  Initially hiding the element serves to prevent the unstyled flash.

And the javascript:

var colorbox = document.getElementById('TestColor1');
colorbox.setAttribute('type', 'color');
colorbox.className = "cTextbox";

For browser availability, it may serve to make the TextBox a bit larger.  When it renders in IE, at least the end user will be able to input a color hex value.

On the output path, the data from the color picker resolves as a hex value regardless of the type rendered.  For example, selecting the color “Red” from the color picker will result in the value of that TextBox being a string value “#ff0000”.

More information on input types and browser compatibility can be found here.