Colorjoe - A Scaleable Color Picker (No Images) | Hacker News Reader

Colorjoe - A Scaleable Color Picker (No Images)

bebraw.github.com

85 pointsluzon1929 comments

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

If you end up adding IE support, check out this hack to get multi-stop gradients in IE for the hue slider: https://github.com/bgrins/spectrum/blob/master/spectrum.css#...

It's working much better for me in IE9.

http://screencast.com/t/BI0Q97W5FpL

Still not quite perfect, but not totally broken.

I'll look into IE9. It would be nice to have that working.

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

Nicely done :)

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

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 ?

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

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

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

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?

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

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

Surely something similar can be done with radial gradients?

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.

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

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

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

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

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

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.

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

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

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.

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?

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

Wow, this works very well on Mobile Safari.

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

Reply on news.ycombinator.com