10 ms·
Colorjoe - A Scaleable Color Picker (No Images)
- sakai 14y agoNice, was just looking for something like this. Thanks!
- rizumu 14y agoIt would be great if github used a color picker, instead of requiring manual hex input, for the issues label color picker.
- Smudge 14y agoAh, 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 14y agoYeah, exactly. That's the main benefit of a CSS based approach.
- randomdrake 14y agoVery 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 http://i.imgur.com/d7JFq.png
- bebraw 14y agoI'll look into IE9. It would be nice to have that working.
- bgrins 14y agoIf 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#L116 https://github.com/bgrins/spectrum/blob/master/spectrum.css#...
- RandallBrown 14y agoIt's working much better for me in IE9. http://screencast.com/t/BI0Q97W5FpL http://screencast.com/t/BI0Q97W5FpL Still not quite perfect, but not totally broken.
- bebraw 14y agoIE9 should work now. There are some other goodies as well. Just a FYI. :)
- randomdrake 14y agoNicely done :)
- crazygringo 14y agoWow, 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 14y agoSurely something similar can be done with radial gradients?
- crazygringo 14y agoRadial 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 14y agoVery clever. Unfortunately, the rounded corners aren't being drawn right here (Firefox 15a2 on Linux), there's blobs of colour being drawn.
- pbreit 14y agoHow 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 14y agoCopy 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 14y ago"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.
- nextstep 14y agoWow, this works very well on Mobile Safari.
- kangax 14y agoLooks nice. Are you planning to support IE<9?
- bebraw 14y agoThe 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.
- makepanic 14y agousing opera 12 on win7 the cursor position isn't matching the color picker circle :(
- BillSaysThis 14y agoWould be nice if there was an affordance for transparent, this is a common problem for JS color pickers I've seen recently.
- bebraw 14y agoHow would deal with this ui-wise? Just another vertical slider for alpha? The underlying color lib definitely supports this.
- BillSaysThis 14y agoA checkbox on the bottom right (under the text fields, that is).
- dpham 14y agoi'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.