

Colorjoe - A Scaleable Color Picker (No Images) - luzon19
http://bebraw.github.com/colorjoe/

======
randomdrake
Very nicely done. I attempted something like this a while ago but it didn't
come out quite as nice.

I like that you decided to use some base64-packed images instead of using
anything external; good idea.

You may want to include something about what browsers are supported. As it is,
the page is completely broken and not usable with IE9 (1).

Nice work, though!

[1] - <http://i.imgur.com/d7JFq.png>

~~~
bebraw
IE9 should work now. There are some other goodies as well. Just a FYI. :)

~~~
randomdrake
Nicely done :)

------
pbreit
How did color pickers like this become so popular in non-pro situations? They
are completely impossible to use for mere mortals (for example, try and pick
the same color twice).

~~~
mparlane
Copy the hex value! XD

Seriously though, how would you go about picking the same colour twice without
just giving a finite list of colours and unique names for each ?

~~~
pbreit
"giving a finite list of colours and unique names"

Exactly! I don't know why this isn't provided more often, at least as an
option.

------
Smudge
Ah, I see, by "scaleable" you mean that it can literally be scaled to
different sizes on the page. (For HN, an uncommon use of that word.)

~~~
bebraw
Yeah, exactly. That's the main benefit of a CSS based approach.

~~~
mparlane
It doesn't scale automatically though :( I shrunk the page and it did not like
that :P I assume "scaleable" is by a size value defined on creation?

~~~
tinyjoe
in jquery: $(window).bind('resize', renderfunc);

------
crazygringo
Wow, very clever usage of overlapping semi-transparent gradients to get the
square of saturation and brightness variations. Good job!

Too bad it isn't possible to draw color wheels in pure CSS, AFAIK...

~~~
quarterto
Surely something similar can be done with radial gradients?

~~~
crazygringo
Radial gradients in CSS have color vary with radius.

A color wheel needs the color to vary with the angle, not with the radius.

From what I know, CSS3 doesn't do that.

------
quarterto
Very clever. Unfortunately, the rounded corners aren't being drawn right here
(Firefox 15a2 on Linux), there's blobs of colour being drawn.

------
BillSaysThis
Would be nice if there was an affordance for transparent, this is a common
problem for JS color pickers I've seen recently.

~~~
bebraw
How would deal with this ui-wise? Just another vertical slider for alpha? The
underlying color lib definitely supports this.

~~~
BillSaysThis
A checkbox on the bottom right (under the text fields, that is).

------
rizumu
It would be great if github used a color picker, instead of requiring manual
hex input, for the issues label color picker.

------
dpham
i'm sure other people have mentioned but it doesn't work in IE9 or below. You
should at the very lease support IE9. If you wanna throw away IE8 or below, it
would make sense to just use canvas rather than a base64-encoded image.

------
sakai
Nice, was just looking for something like this. Thanks!

------
kangax
Looks nice. Are you planning to support IE<9?

~~~
bebraw
The gradients are defined using CSS. I think it might work if someone threw
suitable declarations there. I recall IE<9 implement some custom syntax that
might work.

~~~
kangax
I glanced at the code quickly and noticed `addEventListener` without
`attachEvent` fallback. So that will fail in at least IE8 and below. Not sure
about other things, but I'm guessing you never tried it in IE8?

~~~
bebraw
Nope. Definitely need to add that fallback there. Good point!

------
nextstep
Wow, this works very well on Mobile Safari.

------
makepanic
using opera 12 on win7 the cursor position isn't matching the color picker
circle :(

