pitpik/colorpicker

Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...)

colorpicker's Issues

document.body is null if script is loaded in head

This happens on colorPicker.js line 17. As it is not stated anywhere that it is not intended to put the script in the head section, I see this as a bug.

More implementation examples

To make it easier for developers to use colorPicker there should be some little 'kick-start' scripts to implement colorPicker such as: $('.color').choseColor(); that also appends/places colorPicker at the right spot (maybe also drag&drop,...) with minimum afford. This script should also contain memory functionality (such as cookies or web-storage) for saved memory-colors, app-size, last used mode, etc...

Gradients Suggestion

The color picker is amazing. Lightning fast, simple to use. I have over 200 running on one page and performance is fine (its why I coudn't use Spectrum - too heavy).

I'd like to let the user build a gradient somehow using this color picker. I know I can just give them multiple pickers and build a gradient from the two colors, but how cool would it be if the picker had gradients built in, where you could add gradient breaks and everything. I think something like https://github.com/greggman/gradient-editor combined with this would be awesome.

Any advice before I start?

WebGL support idea

Hello. I suggest to add webgl support. I also made low-level utility (color-nuker project) that can be helped with coordinates and visualization. I have too many combinations and forms by pure webgl. I enabled anti-aliasing, triangle and etc...

hot to close the colorpicker panel?

I can't close the colorpicker panel when I click the "close icon".What's wrong ? Seems no relative API to do this.Can't figure it out .

positionCallback

does this colorpicker have a positionCallback, or only the tiny version??

How initialize colorPickers without clicking on element

Hello!
Thank you for great job!
In my project i use yours colorPicker from jsColorPicker.min.js.
Can you tell, how initialize window.jsColorPicker.colorPickers objects without clicking on input element?
Is there some method wich need to call and how it call?

transparent cursor for IE11

function 'buildView' replaces _data._cssMain with IE specific stuff: also replace('_blank.png', !_isIE ? ... gets replaced which is probably not valid for IE11

How to use the Color Wheel picker?

On your demo page there's a color wheel that I would like to use. In the documentation, I can't find any options to setup this picker.

Can you explain how to do so?

a problem on how you finished your demo

hi, your work is just what I want to use in my page. The examples you show seems difficult for me to understand. Could you tell me the demo on the right one you show is just finished with colors.js? Or could you provide me with a more detail documentation. Thanks!

throw a error if input have not default color value

colors.js in line: 221

colors[typ] = convert[from + '2' + typ](colors[from]);

Initial text color of input in javascript implementation

When your click in input to show picker, the CSS color of input is changed in function of the luminance of its background-color. However, before click text color is always black instead of being correct color in function of luminance.

Correcting it would be great and low-cost I think.

Thanks and congratulations, the picker is really good!

How to use setColor? Can't find examples, can't figure it out

Hey, I like your plugin, and I want to use it in a package I'm writing in R (programming language). One thing I can't figure out is how to set the color of an existing input? I see that you can somehow "extend" with proto, but I can't figure out - can you show an example?

Typing mistake (appendTo property)

Hi, the "appendTo" property cannot works because of a typing error :

jsColor.js - line 118

(options.appenTo || document.body).appendChild(colorPickerUI);

Just replace "appenTo" by "appendTo" to fix it. :)

opacity doesn't work for sliders in IE>=10

function 'getOpacityCSS' needs to determin opacity support differently as DX filters are no longer supported in IE 10 and up: http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx

ColorWheel Picker from doc

I'm trying to get the colorWheel picker on it's own, i.e. without the other color picker; from the documentation file. What should I delete? (Maybe you can send me the final files using dropbox, or fileDropper.)

Unable to add letters to hex code if hex starts with 0

When editing the HEX directly inside the picker I am unable to then add letters after the 0.
For example; EEEEE0 can be written fine, 0EEEEE cannot.

Does it support no default value?

I need to use it whith out default value.

transfer _bgs.png into _horizontal.png

Make alpha background (256px and 128px) and rasters for memory patches (256px and 128px) part of _horizontal.png (at the end) and make according changes in colorPicker.css

Bug with colors without hue.

Hello.

I have tested new version with init color text in function of luminance and this funcionality works very well.

However, picker is not shown in some inputs until you enter in another input with hue, picker is shown for this input and then is shown for whatever. I think that this issue happens with colors without hue (blacks, whites and greys).

If I have not explained well, here are the steps done in tests:

• Select black input. -> Picker is not shown
• Select white input. -> Picker is not shown
• Select grey input. -> Picker is not shown
• Select blue input. -> Picker is shown perfectly
• Select black input. -> Picker is shown perfectly
• Select white input. -> Picker is shown perfectly
• Select grey input. -> Picker is shown perfectly

Thank you very much and congratulations for your great work. I hope these issues were more helpful than painful :)

[Suggestion] Please make a simple example on vanilla JS and some explaination

I'm trying to implement this in my project and found it a bit difficult to work with.

I was expecting to link ONE js file and ONE css file, give it an initialization and I'm good, but I'm getting some errors, I have no idea

colorPicker.js?ver=4.2.2:17 Uncaught TypeError: Cannot read property 'style' of null

How to access colorPicker object?

From your jQuery example:

$myColorPicker = $('input.color').colorPicker({
		customBG: '#222',
		readOnly: true,
		init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
			elm.style.backgroundColor = elm.value;
			elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
		},
		// appendTo: document.querySelector('.the-paragraph')
		// renderCallback: function(colors, mode) {
		// 	console.log(mode);
		// }
		// memoryColors: memoryColors,
		// actionCallback: function(event, type) {
		// 	if (type === 'toMemory') {
		// 		// $myColorPicker.renderMemory(memoryColors);
		// 	}
		// }
	}).each(function(idx, elm) {
		// $(elm).css({'background-color': this.value})
	});

I would think doing console.log($myColorPicker) would return the instance of the colorPicker - but it is returning an array. How do I access the colorPicker object (so I can access it's methods, setColor, etc..)?

Thanks!

Documentation

There has to be more documentation for the API and usage for developers and end-users.

potential failures with "document"

Hi,
First of all: thanks for this great color picker.

I think there are some potential failures if using it in an sandbox or across an iframe.
Because:

"window" is passed to "ColorPicker", but inside, it uses directly "document"
If we look at the code of jquery, it set "document" with:
var document = window.document;
So, "ColorPicker" must also set it from the beginning of the code.
Otherwise, it uses the current "window.document" and not the "document" of the provided "window".

I don't take time to write a test code, I only analyse the code.

Thanks again,
ARuben

Convert Color

How can I make a simple conversion? Say from HSV to HSL?

I tried the following:

var myColor = new Colors();
var hslColor = myColor.convertColor({
    h: 100,
    s: 100,
    v: 100
},'hsv2hsl')
console.log(hslColor);

And I get the folloinwg output:

Object {h: 100, s: -1.0204081632653061, l: -4900}

How can I get regular output?

Weird bugs in jQuery implementation

If I write this:

$('input.color').colorPicker();

colorPicker throws an error (Cannot read property 'customBG' of undefined (looks like it always require a config object)). If I pass any object, even

$('input.color').colorPicker({});

It throws another error (undefined is not a function). This points to function "convertColors", at this line (217 in colors.js file):

colors[typ] = convert[from + '2' + typ](colors[from]);

What should we do??

Plugin crashes when js files are called from html's head tag instead of body

All in the title. Although, I only tested the jQuery version, not the simple JS version

This doesn't work and return the following error: Uncaught TypeError: Cannot read property 'style' of null jQueryColorPicker.min.js:3:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jQueryColorPicker.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
    </body>
</html>

main.js is where I do cp_picker = new ColorPicker({...}) on DOM ready.

On the other hand, this works great:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="jQueryColorPicker.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

Where could be the problem please ?

appendTo different from document.body causes wrong placement using jsColorPicker

If I pass jsColorPicker() an appendTo element that is different from document.body and does is not placed at (0,0), the created color picker popup will be placed in an offset from where its supposed to be, the same offset the appendTo element is from (0,0)
The fix is (jsColor.js)
line 109: add
var atrect = (options.appendTo || document.body).getBoundingClientRect();

line 112:
'left:' + (position.left + options.margin.left - atrect.left) + 'px;' +
'top:' + (position.top + +input.offsetHeight + options.margin.top - atrect.top) + 'px;';

Questions about stability and use

Hello.

I am interested in use this library in a javascript library for color themes that I am developing. I have this questions:

• Which is the license of this project? I think that is double licensed as the 0.9 version, but I am not sure. If this is correct I can use this project only indicating that this project has the MIT license, no?
• How can I use this project? I suppose that it can be used like previous versions, but examples use jQuery and I think that it is not necessary. Can it be used like previous versions (http://www.dematte.at/colorPicker)?
• Finally, I want to know how much stable is this version, because I want to finish my project soon.

Thank you very much!

jqColor repeat call renderCallback

i console.log in renderCallBack it will repeate output when click one time in color picker area.

for prevent repeart call renderCallback. I write a bad code:

.....
    $.fn.extend({
        colorPicker: function(config) {
            var timestamp = new Date().getTime();
            var renderCallback = function(colors, mode) {
                    if(Date.now() - timestamp < 500){
                        return;
                    }else{
                        timestamp = Date.now();
                    }
.....

Is there any good way to solve it?

Add Lab Color Sliders not working

When I add Lab divs in the html in index.html (from the documentation page), the JavaScript should create the sliders and everything in the renderColorSliders function. But run it and try it out, the Lab color sliders don't move.

I think the problem is at line 118 (in the codePen bellow), or it's on line 102.

Here's a code sample of what I mean:

CodePen

allMixDetails: false not working

When I try to set allMixDetails: false, the whole script just stops working. I tried to set it both on my page and in the colorPicker.js. I get the same result. I am trying to get the size 3 window to show up without the extra color details/buttons on the right, so the UI is bigger on the mobile displays! Can you pls help me!?

Is it supported by mpbile device?

hi.
could you tell me how can I let it can work well in the mobile device? I have tried but failed. Maybe I initialized it in a way way. Could you tell me the right way? Thanks.

Two separate repository for color.js and colorPicker.js

Hey there! Really like this color picker!! (Though it would be a lot nicer with docs. As mentioned earlier.)

I just want to make a suggestion. I think you should separate the colorPicker.js and color.js in two separate (I think it's called) repository. (Just like brgins did with spectrumColorPicker and tinyColor.) This way if someone would like to just use color.js, it would be easier to access, and would have its own documentation.

[Question] Hook into color update?

I was searching your doc and cound't find any clue, basically what I'm after is similar to

init: function(elem,colors){
//do some stuff
}

Yes, there is this

actionCallback: function(e,action) {}

But I don't know what are those function attributes for.

So yes, I would need to do some stuff on update.

Thanks so much.

Reset all pickers with a single button click [jQuery version]

Hi,

I'm using the jQuery version and have multiple pickers on the page, like:

var cp_picker = cp_input.colorPicker({ ... }),
cp_picker2 = cp_input2.colorPicker({ ... }),
...

Then I would like to add a <input type="button" ... /> at the bottom of the page to reset all these pickers to their default colors.

How this can be acheived please ?

Verticle Stretching on first use

So on the first use of the jquery implementation color picker it stretches vertically and then resizes.
This only happens on firefox as far as I can tell.

This happens on your demo page also:

Is it possible to stop this behavior somehow?

simple jsFiddle with realistic example

Hi @PitPik,

first of all: Thanks for your work! Your colorPicker looks amazing.
Perhaps i dont get it and its the wrong Picker for my scenario, so please dont mind if i didnt understand your intention.

I looked at your examples and the demo page but i still dont get it.

This is what i try to get:
You have a button which opens the colorPicker on click.
It can have an initial color (eg by comming from a database or cookie).
When you change the color with the picker i want to execute a function (eg. an ajax call or a function which updates styles of some elements with the new color).
But i still dont get how to initialize it neighter how to listen to events.

Can you provide a simple jsFiddle?

Kind regards

How to set color？I use html input

I use html input

input class="color no-alpha" value="#B6BD79" id="color1"/

$('#color1').val("#FF0000");
use the code can change the color code, but the background color do not change

Could someone know how to set color for html input with color-class?

Error

TypeError: document.body is null
_doesOpacity = typeof document.body.style.opacity !== 'undefined',

Android web views and Chrome bad rendering

Chrome for Android does not implement completely background-position. Therefore, color picker is rendered bad as can be seen in the attached image. Maybe the problem is not background-position, but I have deduced it because debugging Android web view in Chrome for desktop the color picker is shown correctly in the desktop and bad in the mobile.

I only have tried JavaScript implementation, but I suppose that the issue also happens in jQuery implementation.

Thanks.

Initial set the color of the inputs

Why are the input backgrounds not set when you initialize the color picker? You even do this manually in your examples. Seems like 90% of people usi
ng this library would want that to be the default.

This code is taken from this example.

var $colors = $('input.color').colorPicker({
    customBG: '#222',
    readOnly: true,
    init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
      elm.style.backgroundColor = elm.value;
      elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
    }
  }).each(function(idx, elm) {
        // $(elm).css({'background-color': this.value})
    });

Z-index of color picker in javascript implementation

Color picker can be hidden by other elements because it hasn't z-index CSS property. This can be easily resolved adding this rule to line 12 of index.css :):

.cp-app {
position: relative;
float: left;
margin: 10px 0 0 10px;
z-index: 15000;
}

Cursor goes to wrong position when scroll

I'm using the colorwheel picker from the demo page, and I came up with a problem. When I add text above the color wheel, then scroll down and change the colorwheels color, the colorwheels cursor isn't contained in the actual circle. (It makes an imaginary circle in another place, and the colorwheels cursor is constrained in that imaginary circle.)

Another issue, which might be related to the first one is that if you zoom up in the browser, (in chrome: ctrl +) the colorwheels cursor stays position like a fixed element, it follows the scrolling.

How can I get the colorwheels cursor to always stay in the circle?

I think the relevant code is the function of getOrigin

JSFiddle

Support webcomponents

Hi,

I've been searching for a simple, lightweight color picker written in vanilla javascript for ages and gladly I've found your colorPicker. However, no matter how hard I try I can't initalize your color picker on inputs wrapped in Google Polymer components. No errors, no output on the console.

Would you please guide me on how to bind the colorPicker to inputs in components if there's a way to do that?

[question] + [suggestions]

• do you consider developing a palettes generator? (10 shims, complimentary, see here what I mean/like)
• Don't waste time with jQuery!!
• currently has the option to exclude rgba?

Thanks!!

Setting Memory Colours programatically

Hi

First of all, thanks for the amazing colour picker, it's got all the features I need (and more) which can't be said for others. But I was hoping you could help me out with something.

I am initialising the plugin using JQuery as so

$('#addNewColourInput').colorPicker({ memoryColors: ff.global.memoryColors, actionCallback: actionCallback )};

which works fine, but I am trying to add new memory colours after a selection has been made. I was hoping to keep my own list of colours and then just reset the memory colours object when I need to, however, I'm haping trouble doing this. Could you supply a snippet showing how I can set the memoryColours? If this isn't possible then how else could I achieve this?

Thank you for your time.

Enhance paste event

Paste event is not really implemented...

8 Digit Hex Code

Thanks for the great library!

Since most browsers are now supporting the use of 8 digit hex codes, it'd be great if this library did as well!

Erroron bower

I am getting the following error when I do a bower install

Error Message: enotfound package colorPicker not found