4 ms·

I made this for the An Event Apart JavaScript 10k contest but unfortunately finished it after the deadline (but not by much!). Anyway, here it is for all of yo

by spicyj 16y ago

I made this for the An Event Apart JavaScript 10k contest but unfortunately finished it after the deadline (but not by much!). Anyway, here it is for all of you to enjoy. Hopefully useful when you don't feel like opening up Photoshop to get a CSS color. I'd love to hear suggestions for how I can improve it. (Sorry that the bubbles next to Lab are missing; refreshing the square on the left was too slow for it to be useful.)

jp_sc 16y ago
Really nice, congratz. Instead of using images, the square and slider markers could be drawed on an extra canvas on top.
- DrJokepu 16y ago
  I don't think (programmatically) drawing everything is a good idea. Sprites have been used in computer graphics since time immemorial because they're easy to implement, maintain, change and can offer performance improvements as well. Just imagine the hassle you have to go through if you want to change a programmatically rendered sprite as opposed to opening it in an image editor and simply changing it there.
bd 16y ago
If you want to have it much faster, use transparent PNG image for saturation-value rectangle instead of drawing everything in canvas and then just color its background property according to hue. Long ago I needed color picker, so I did research many options. This was the most efficient implementation I found (the trick I described above comes from here): http://ecritters.biz/colorselector/ http://ecritters.biz/colorselector/
ELV1S 16y ago
I've made one for 10K too http://10k.aneventapart.com/Entry/235 http://10k.aneventapart.com/Entry/235. Mine is SVG based. The code is on GitHub http://github.com/NV/color-blender http://github.com/NV/color-blender.
- daychilde 16y ago
  I really like being able to select two colours like that - and the in-between colour is even better. Love that.
daychilde 16y ago
It would be really cool to see CMYK support - I prefer HSL to RGB to find good colours that work together; but I prefer CMYK to even HSL It would also be cool if multiple copies of the tool could dynamically be added to pick multiple colours at a time - with, say, up to eight blocks at the top showing the current colour for each selector, and a text box to easily copy the various colours... Thanks for sharing - this is nice!
- spicyj 16y ago
  I'm not quite sure how this would work; the color models I have currently are three-dimensional so can be specified by three pieces of information (square x, square y, bar y). CMYK is 4-dimensional so you'd need something like 2 squares to specify a color. (Note that Photoshop's color picker doesn't have bubbles next to CMYK.)

by spicyj 16y ago

jp_sc 16y ago

Really nice, congratz. Instead of using images, the square and slider markers could be drawed on an extra canvas on top.

DrJokepu 16y ago
I don't think (programmatically) drawing everything is a good idea. Sprites have been used in computer graphics since time immemorial because they're easy to implement, maintain, change and can offer performance improvements as well. Just imagine the hassle you have to go through if you want to change a programmatically rendered sprite as opposed to opening it in an image editor and simply changing it there.

bd 16y ago

If you want to have it much faster, use transparent PNG image for saturation-value rectangle instead of drawing everything in canvas and then just color its background property according to hue. Long ago I needed color picker, so I did research many options. This was the most efficient implementation I found (the trick I described above comes from here): http://ecritters.biz/colorselector/ http://ecritters.biz/colorselector/

ELV1S 16y ago

I've made one for 10K too http://10k.aneventapart.com/Entry/235 http://10k.aneventapart.com/Entry/235. Mine is SVG based. The code is on GitHub http://github.com/NV/color-blender http://github.com/NV/color-blender.

daychilde 16y ago
I really like being able to select two colours like that - and the in-between colour is even better. Love that.

daychilde 16y ago

It would be really cool to see CMYK support - I prefer HSL to RGB to find good colours that work together; but I prefer CMYK to even HSL It would also be cool if multiple copies of the tool could dynamically be added to pick multiple colours at a time - with, say, up to eight blocks at the top showing the current colour for each selector, and a text box to easily copy the various colours... Thanks for sharing - this is nice!

spicyj 16y ago
I'm not quite sure how this would work; the color models I have currently are three-dimensional so can be specified by three pieces of information (square x, square y, bar y). CMYK is 4-dimensional so you'd need something like 2 squares to specify a color. (Note that Photoshop's color picker doesn't have bubbles next to CMYK.)