CODEWITHSUNDEEP
javascripthashhexcolor-picker
4ndro1d
4ndro1d

Reputation: 2976

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

Upvotes: 2

Views: 11126

Answers (5)

Paul
Paul

Reputation: 467

// I’ve been using this component for my projects:

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<script src="https://jsuites.net/v5/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<jsuites-color value="#009688"></jsuites-color>
<script>
document.querySelector('jsuites-color').addEventListener('onchange', function(e) {
    // Set the font color
    e.target.children[0].style.color = this.value;
    // Show on console
    console.log('New value:' + this.value);
});
</script>
</html>

// Here's the link if you want to check it out: https://jsuites.net/docs/color-picker

Upvotes: 0

Peter O.
Peter O.

Reputation: 32878

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.

Upvotes: 1

Nicholaus Chipping
Nicholaus Chipping

Reputation: 324

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/

Upvotes: 0

Ben Barden
Ben Barden

Reputation: 2111

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.

Upvotes: 0

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

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

Upvotes: 3

Related Questions