I recently updated your code to handle the ARGB format inbound, since most of the content I deal with is in that format. I updated Color._parseHex() to look like this:

    _parseHex: function (color) {
        var name = $.trim(color).toLowerCase(),
            c,
            m;

        if (_colors[name]) {
            c = _colors[name];
            return [c[0] / 255, c[1] / 255, c[2] / 255];
        }

        //Handle Alpha
        var alpha = 255;
        if (color.length >= 8) {
            if (color.substring(0, 1) == "#")
                color = color.substring(1, color.length - 1);
            alpha = parseInt(color.substring(0, 2), 16);
            color = color.substring(2, 8);
        }

        // {#}rrggbb
        m = /^#?([a-fA-F0-9]{0,6})/.exec(color);
        if (m) {
            c = parseInt(m[1], 16);
            return [((c >> 16) & 0xFF) / 255,
                    ((c >> 8) & 0xFF) / 255,
                    (c & 0xFF) / 255,
                    alpha / 255];
        }
    }

It wasn't too difficult to get this to work, but wanted to make you aware of your method Color.toHexAlpha() is not correct.

Basically the Alpha hex was always wrong because the value was being calculated against 100 instead of 255. I grabbed your _intToHex() method and applied it inside of toHexAlpha() and everything is happy again.

      this.toHexAlpha = function () {
            var dec = this.a * 255;
            var result = Math.round(dec).toString(16);
            if (result.length === 1) {
                result = ('0' + result);
            }
            return result.toLowerCase();                
        };

Additionally, I modified the following line in the _change function:

            } else if (!this.color.equals(this._parseHex(this.element.val()))) {
                this.element.val(this.color.toHexAlpha() + this.color.toHex());
            }

This is obviously "ARGB" specific, but it seems like the widget could ask for a specific output format, that way any of your parse-supported methods could be the output value.

Hi, first of all nice work with the plugin. The problem that I found was when I try to use the "rgba(rrr,ggg,bbb,aaa)" format, it seems that even if I put the alpha value to zero the parser always conver the value to ff. So I read the code and change a couple of lines to make it work, I'm not sure if was the best aproach, but works.

In the _parseColor function I parse the alpha part to a float

// rgba(r,g,b,a)
m = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/.exec(color);
if (m) {
  return [
     m[1] / 255,
     m[2] / 255,
     m[3] / 255,
     parseFloat(m[4])
  ];
}

And in the Color prototype object I change the coalesce part of the alpha argument to handle the case when the value was zero, because in that case the coalesce operator will interpretated the zero as false and put the 1 as default.

this.no_color = false;

this.r = args[0] || 0;
this.g = args[1] || 0;
this.b = args[2] || 0;
this.a = args[3]==0 ? 0 : args[3]||1;
this.h = args[4] || 0;
this.s = args[5] || 0;
this.v = args[6] || 0;
this.updateHSV();

Is it possible to save selected color by clicking Enter key? As I see now Color Picker doesn't react on Enter key at all.

Thank you!

On IE7 (ok on 8 and 9) I'm getting an error

"SCRIPT438: Object doesn't support property or method 'undefined'
jquery.colorpicker.js, line 138 character 7"

Doctype is defined as

Am I missing something?

Also how about the ability to set a default colour?

Value returned by _parseHex is returned by _parseCssColor and then by _parseColor. So, if _parseHex returns false, _parseColor does it too. In many functions you use result of _parseColor as Color object, without checking what is it in fact. I'm suggesting change 'return false' in _parseHex to 'return new Color()' or handle it in _parseColor.

It seems in Chrome if we have it popup on focus it does not popup under the field but rather in the middle of the browser window.

Hello!

I have faced a problem with opening Color Picker with certain color.

I binded Color Picker to the DIV

In js file I initialized Color Picker in the next way

var colorpickerOptions = {
parts: ['map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'swatches', 'footer'],
altProperties: 'background-color',
altField: '.colorpicker',
color: color_in_hex_format (for example fe9810, without #),
select: function (event, color) {
color_in_hex_format = color.formatted;
}
};

$('.colorpicker').colorpicker(colorpickerOptions);

When my page is loaded Color Picker sets correct background color for my DIV. Then I click on my DIV and Color Picker opens, but init color is 000000 instead of set color during initialization. It looks like it ignores property color.

Could you please help me with solving this problem?

You could add hex alpha color to writers and parsers as:

jQuery.colorpicker.writers[ 'HEXA' ] = function( color, that ){
return that._formatColor( 'axrxgxbx', color );
};

jQuery.colorpicker.parsers[ 'HEXA' ] = function( color ){
var m = /^([a-fA-F0-9]{2})?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec( color );
if ( m ) {
return new $.colorpicker.Color(
parseInt( m[2], 16 ) / 255,
parseInt( m[3], 16 ) / 255,
parseInt( m[4], 16 ) / 255,
m[1] ? parseInt( m[1], 16 ) / 255 : 1
);
}
};

The demo page at http://vanderlee.github.com/colorpicker/ is failing due to a moved jQuery UI resource:

GET http://jqueryui.com/themeroller/themeswitchertool/ 410 (Gone) vanderlee.github.com:8
Uncaught TypeError: Object [object Object] has no method 'themeswitcher' vanderlee.github.com:26

Vanderlee,

I'm using your colorpicker (great control) in a MVC 4 project that has jquery 1.9.1 with bootstrap. I was wanting to get just the button/image display without the input box displayed. If I try using it with a 'hidden' input field (so I can still capture the color value), the colorpicker gets displayed at the top of the form (and the top of it is hidden by the nav bar at the top). If I change the input back to a 'text' type, it does display below the input box. Is there anyway to get it to be displayed where it should be without having the input box displayed also? (Or a better way to do this?)

I'm also having a problem with the size of it. It's showing up very large in my browser. I'm thinking it might be a conflict with the bootstrap. I've got your referenced scripts and styles after all of the ones on my page so I would think they should have precedence. I would appreciate any information. Thank you,

Hello!

Is it possible to set color of the colorpicker using cmyk colors?

Thanks for ur advice!

Greetings

Stefan

I need to control output of colorpicker not to only hex color without '#'.

For example I need to store in database rgba value except ot hex

Hi, it seems something's going on with the alpha values.

When I type in a value (say 50) in the input for alpha and tap out of the field, it gets recalculated and the number becomes huge (12,800 in this case). This also happen when you change the first 2 hex values.

Also when using the example onselect function logging values to the console for all rgba values I get values I can not use in CSS (onSelect: #000a0a, (0,0.0392156862745098,0.0392156862745098,128).

Do these need to be recalculated first and if so how?

Cheers,
Nils

When running the demo page (http://vanderlee.github.com/colorpicker/) on Firefox (version 13 here), if I click on the picker icon, a bug prevent the picker from opening:

"can't convert value to number"

var v = Math.round(value);

line 940

Because the _colors hash is filled with CamelCased names and _parseHex() lowercases its input before looking it up in _colors, it never recognizes w3c-defined names. Consequently, w3c-defined names passed in via options.color and the setColor() method aren't recognized either.

In toolness/lovebomb.me@aff9a94 I've patched the code by creating a separate hash called _lowerColors and looking up lowercased input in that. Let me know if you think this is a decent solution and I'll make a unit test for it and submit it as a pull request.

When updating the current color in the _change method the colorpicker set the value of the underlying input field but did not update the widget's color option. So the next open() of the same widget would ignore its most recent value, in favor of its original value when the widget was created, contradicting what the user is seeing on the button. Fixed this by setting this.options.color to the same hex color as the input element in the patch I'm submitting momentarily

You have about 5 or 6 duplicate predefined colors.

I stripped them before making note of the exact names, but they were the last items in the list... Everything after... "'LightPink': [0xFF, 0xB6, 0xC1]"

When passing in an rgba() quad via options.color or the setColor() method, colorpicker seems to ignore the alpha component.

In toolness/lovebomb.me@ab6009a I have fixed this. Let me know if this looks like a sane solution and I'll create a unit test for it and issue a pull request.

I tried to use colorpicker with DIV using option inline=false and at same time to initialize background color of DIV I used option color, but color option is ignored.

I looked into the code and when inline=false is used, initial color is determined using jQuery val() instead of color option (in colorpicker _create function). I used workaround calling DIV.val(color) before attaching colorpicker to DIV, but it would be nicer if the color option could be used for non-input elements.

Just noticed when click on the alpha channel radio button the gradient slider does not start from the color that's currently selected.

i import jquery library, jquery_ui and your colorpicker. Colorpicker works ok but it havent look from jquery ui. Buttons and inputs haven't class from ui. Why ?

The alpha value of a color isn't used in the color.equals() function. So changing only the alpha value doesn't update the input control properly.

I'm not sure why, but it seems that colorpicker not change input value, I have just checked using firebug on your demo and value is not changed after you select new color and click OK button.
Submiting form allways submit default input value instead color value selected using colorpicker.

I'm using a custom UI them called "jquery-ui-aristo" and the last TD in the table was shifting down. Not sure if this would affect any other themes out there, but I fixed it by creating a custom rule for your TD's

.ui-colorpicker table td {
vertical-align: top;
}

I am trying to display the Alpha along with the HEX codes.

I have tried many variations on the following but no luck.

colorFormat: 'aHEX'

colorFormat: 'HEXa'

colorFormat: 'a'

colorFormat: ['a', 'HEX']

If this is not the location to ask please let me know where would be a good place to post questions.

Thank You,
~Donavon

Hi,

Demo didn't work, error said there was no arg...

this.a = args[3] === 0 ? 0 : arg[3] || 1;

when I changed it to:

this.a = args[3] === 0 ? 0 : args[3] || 1;

it works :-)

In my setup of Datatable with jeditable and colorpicker, I've got an error :

Uncaught TypeError: Cannot read property 'zIndex' of undefined jquery.colorpicker.js:654
$.widget.closejquery.colorpicker.js:654
f.extend.speed.d.completejquery-1.7.min.js:4
f.fx.stepjquery-1.7.min.js:4
hjquery-1.7.min.js:4
f.extend.tickjquery-1.7.min.js:4

except this issue, your plugin is perfect ! Thanks for the great job you've done.

The color picker uses the look of a jquery dialog, however, as far as I can tell, doesn't actually use dialog() and therefore lacks some features (such moving the dialog or make it modal).
Is it possible/planned to do so?

TIA

greg

Confused as to what the best practice is for using this widget with elements other than .

Can I pop this up next to an arbitrary element and listen to events to get the selected color? Is there an example of this?

This was something else I added, but forgot to add to my GitHub fork. Add some padding to the dialog to make sure it's not floating directly next to the window edge.

In the "open" function, you had:

x -= Math.max(0, (x + this.dialog.width()) - $(window).width());
y -= Math.max(0, (y + this.dialog.height()) - $(window).height());

... and I changed it to allow a 20 pixel padding. (Maybe this could be a setting the user could override?)

x -= Math.max(0, (x + this.dialog.width()) - $(window).width() + 20);
y -= Math.max(0, (y + this.dialog.height()) - $(window).height() + 20);

Also, I apologize, I'm still trying to figure out how GitHub works andI couldn't figure out how to update my forked branch with your updates or I would have done the updates myself instead of posting here.

There is a bug in demo page using 'in dialog' tab.
If you open dialog 8 times in a row, 'ui-widget-overlay' div is over the dialog. This is because a bug using string concatenation (+) instead of variable of type integer. In fact, z-index exceed integer size limit.

A simple fix is to parse to integer value of z in (line 2174 in jquery.colorpicker.js):

zIndex = parseInt(z);

After change color and click Cancel button - background-color button and input value always changed (not store previos value)

Demo http://vanderlee.github.io/colorpicker/ All features Tab

When you pick a color and set the picker to the left or bottom border, the color bar has no effect, so the color transition switches to black->red, no matter what you selected in the bar (in the video green is selected).

The video has been taken from your demosite: http://www.youtube.com/watch?v=0dLDX7QMSrY

I found an issue, that I can't use HOME and END keys in FireFox browser while editing any of the input fields (R,G,B, Alpha, HEX, etc.) - using FireFox 20.0.1. Working fine in Chrome.

I could not find solution for my problem.
I wanted to have NO colour by default, but providing empty value in type="color" element I was getting black by default.

Those 2 changes worked for me: diff file.

Thanks.

update
BTW - there is a problem with footer repaint; case when you first click None button, then change colour. You'll see there still Color text where it should be now None again.
Diff file was update, so there are now 3 changes.

I guess something might be wrong with Lab and CYMK calculations. Photoshop gives different values for the same color.

On opening the widget the cursor is always stuck in the upper left color of the colormap, not because it doesn't know the color to initialize to, but because the width of the div isn't available yet. I'm submitting a patch in a moment that fixes this with a repaint of all components on domready at the end of the widget's open: method.

I noticed that you've placed a lot of image calls directly inside the JavaScript file. This causes issues if your script is not located at the same level as the "images" directory.

I fixed this by declaring new CSS rules:

ui-colorpicker-bar { background-color: rgb(0, 0, 255); }

ui-colorpicker-bar-layer-1 { background: url(images/bar.png) repeat-x; }

ui-colorpicker-bar-layer-2 { background: url(images/bar.png) repeat-x; }

ui-colorpicker-bar-layer-3 { background: url(images/bar.png) repeat-x; }

ui-colorpicker-bar-layer-4 { background: url(images/bar.png) repeat-x; }

ui-colorpicker-bar-layer-alpha { background: url(images/bar-opacity.png); }

ui-colorpicker-bar-layer-alphabar { background: url(images/bar-alpha.png); }

ui-colorpicker-preview-initial-alpha { background: url(images/preview-opacity.png) repeat; }

ui-colorpicker-preview-current-alpha { background: url(images/preview-opacity.png) repeat; }

ui-colorpicker-map-layer-1 { background: url(images/map.png) no-repeat; }

ui-colorpicker-map-layer-2 { background: url(images/map.png) no-repeat; }

ui-colorpicker-map-layer-alpha { background: url(images/map-opacity.png); }

ui-colorpicker-map-pointer { display: inline-block; width: 15px; height: 15px; background: url(images/map-pointer.png) no-repeat; }

ui-colorpicker-bar-pointer { display: inline-block; width: 20px; height: 7px; background: url(images/bar-pointer.png) no-repeat; }

..and then stripping all of the inline style calls in your JS file. The only issue, is that instead of using <img> for your pointers, I converted them to <span> and kept the ID's you had assigned. Works as expected now.

The cmyk percentage parser looks like it was never finished (or tested).

1. The values need to be divided by 100 (not 255)
2. The value patterns for C,M,Y were wrong (K was correct).

Here is a working version:
;jQuery(function($) {
$.colorpicker.parsers['CMYK%'] = function (color) {
var m = /^cmyk(\s_(\d+(?:.\d+)?)%\s_,\s_(\d+(?:.\d+)?)%\s_,\s_(\d+(?:.\d+)?)%\s_,\s_(\d+(?:.\d+)?)%\s_)$/.exec(color);
if (m) {
return (new $.colorpicker.Color()).setCMYK(
m[1] / 100,
m[2] / 100,
m[3] / 100,
m[4] / 100
);
}
};
});

My installation produce problem with this for element

for (index in layout) {
if (layout[index].pos) {
width = Math.max(width, layout[index].pos[0] + layout[index].pos[2]);
height = Math.max(height, layout[index].pos[1] + layout[index].pos[3]);
}
}
and
for (index in layout) {
// mark columns
for (x = 0; x < layout[index].pos[2]; x += 1) {
columns[layout[index].pos[0] + x] = true;
}
for (y = 0; y < layout[index].pos[3]; y += 1) {
rows[layout[index].pos[1] + y] = true;
}
}

Index was 0,1,2,3,4,5,6,copy,random,...
so need to create test for
if (layout[index].pos) {
....
}

jquery 1.7.2
jquery-ui 1.8.17
chrome 19

the default colorFormat is 'HEX' and in the README file it is written that that format returned in callback is '#123456' when the acctual returned value is '123456' without the hashtag

I'm using jqueryui 1.8.23
Create a dialog with modal option set to true
Create a color picker with modal option set to true
Open the dialog first, then close it
Open the color picker and then you cannot do anything with it because the widget-overlay is on top of it

Colorpicker should be resizable. For example the map can be too large for some uses and it is not possible to resize it with CSS.

It would be neat to have width and height as options for colorpicker initialization.

The widget has no way to change the current color from outside the widget. Problematic if I want to reset some fields to their defaults in a form. I'm submitting a patch that includes a setColor: method that addresses this

Being able to call _change() at any time (to update the button color, for instance) is convenient in the implementation of a setColor: method. Right now if you call it when the widget happens to not be open it doesn't check whether 'parts' is undefined

This is just a minor thing, but I did notice on the jQuery UI forums that you were looking to include this code in the main branch of jQuery UI (Which I would really love to see!), but you have some minor coding issues that you may want to fix.

If you run your code through JSHint or JSLint, then you will see the errors. (Nothing major)

Other than that, great job! Thanks!

When ESC button has been clicked, OK event is called with saving selected color. This can be reproduced on the fiddler http://jsfiddle.net/6V7hL/11/. From my point of view Color Picker has to fire Cancel event instead.

Also, on demo site http://vanderlee.github.io/colorpicker it looks like everything is correct.

Thank you!

hello I'm using your color picker but

I realized that the same RGB values ​​in Photoshop provides different CMYK values

n fact trying to print a pdf with the color CMYK provided by your color picker
printing an incorrect color

http://imageshack.us/f/580/9uac.jpg/

Would you add new functions in jQuery 1.9 as change attr to prop

When I type in a 3 digit Hex Code what I get back is a 6 dogot hex code with zeros appended on the left side, but the last 3 digit should be the same instead what I get is 000+'last digit'+'first digit'+'second digit'.

Example: if I type in 123, I expect to see 000123, but I see 000312 in the hex input field.