Javascript color picker with 8 digit hex

Question

I'm looking for a javascript color picker, with which I can set color and opacity. The returned string has to be an 8 digit long hex value (excluding the #).

Already had a look at

• Farbtastic http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
• jPicker http://www.digitalmagicpro.com/jPicker/
• jQuery Minicolors http://labs.abeautifulsite.net/jquery-miniColors/

and many others. But none of them gives me what I want, I don't want to mess with trimming strings etc. because the color picker has to be implemented about a 100 times on one page to realise a skinning editor.

EDIT

http://jscolor.com/

This is how it looks like using JSColor:

http://img707.imageshack.us/img707/3962/unbenannt3op.png

And this is the code, with which I get and set the hexcode in my bean:

<h:inputText styleClass="color {hash:true}"
             value="#{skinningBean.currentSkin.titleBar.backgroundColorStart}">
<a4j:ajax event="change" render="preview" />

This would be working perfectly fine, except for the missing alpha values (last 2 digits).

Answer 1

I have written a public domain color picker in JavaScript. As you requested, I've now added a feature that shows a color in the format RRGGBBAA, with hexadecimal components.

• Demo: http://peteroupc.github.com/colorpicker/ (Look at the example "Alpha Color Picker (RRGGBBAA format)".)
• Source code: https://github.com/peteroupc/colorpicker

To enable this feature, give the text boxes an ID starting with "rgbahex_", as in this example:

<input type="text" value="ff0000ff" name="c2" id="rgbahex_c2">

By doing so, the text box will be converted into a color picker. It will only work, though, if the input box appears in the HTML before the page is fully loaded. If you're creating color pickers at runtime, use the following JavaScript to set it up:

textbox.value="ff0000ff";
PDColorPicker.setColorPicker(textbox,{rgbahex:true});

setColorPicker will also convert the text box to a color picker.

---

I've updated the color picker to add the colorformat AARRGGBB. Use argbhex instead of rgbahex in the examples above.

You can also start a text box's class name with "rgbahex_", "argbhex_", and so on, rather than the ID, to turn, to turn the text box into a color picker. I think this corresponds to the styleClass attribute in your XML.

Answer 2

I don't know why it's not easier to find, but spectrum has everything I ever needed in a color picker. (I was using minicolors until I found spectrum.)

I don't know if it takes 8 digit hex, but I know it will accept 4 parameter rgba. (It uses a plugin called tinycolor for all the color parsing.)

Answer 3

You might be able to manage it by defining a "trim strings and do this thing" function that would only have to be implemented once, and just call it everywhere.

Answer 4

I would suggest using the spectrum color picker that Scott suggested, but then you could get the RGB value from it, and use this property:

background: rgba(132,182,19,.5);

That way, it will set the background of the current div and it will be as opaque as you want (so you'll have to find a way to give it the opacity you want), but then at least you'll get the color values from the picker. If you want more information on fallbacks, and workarounds for IE on using rgba, look at CSS Tricks.

Update:

Try something like this, if you have to use hex values instead:

http://jsfiddle.net/WzGG6/1/