javascripthashhexcolor-picker

Javascript color picker with 8 digit hex


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

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).


Solution

  • 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.

    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.