Brian Grinstead

I always thought it would be awesome to have a colorpicker in browser developer tools. Who wants to guess at hex colors or open up a separate program just to get a color code? Apparently I'm not the only one who thinks a colorpicker inside the developer toolbar would be nice.

I wanted a JavaScript colorpicker that didn't require images, and that had an API that made sense to me as a developer who has worked with color in a number of applications. I had used existing plugins (which I was quite grateful for), but decided that I would make a smaller, simpler one.

I needed color parsing for my JavaScript colorpicker. I couldn’t find many small frameworks that handled exactly what I wanted, though. So I wrote my own color parsing library and called it TinyColor.

When working on my javascript colorpicker, one of the things I thought would be really cool is if you could resize it and have the colorpicker automatically respond to different widths. When I first made it, I had basically defined static widths with the thought that there could be different themes (small, normal, large) which defined different widths.

I worked on a 10K Apart entry this year. I made a page explaining some of the development, and have my color picker / scheme generator hosted here.

Use ColorStash now – generate color schemes and convert colors

For most browsers, you can use the linear gradient vendor property with multiple color stops. In IE, the filter property does not support color stops, so we have to fake it with 6 divs, each with a single color stop gradient. It works in Internet Explorer, back to version 5.5.

I have been wanting to add colorpickers in a couple of projects recently, and was not happy with the options. Just search JavaScript Colorpicker and you'll see what I mean. It got me thinking about what I wanted out of a colorpicker.

Instant Sprite is a CSS Sprite Generator I built to learn some of the new (at the time) JavaScript APIs and to make it easier to follow the good practice of using CSS Sprites. I found it annoying to make sprites, especially if it required opening up an image editor and calculating offsets manually. I wanted to make the tool as easy as possible to fit my workflow. I use it now when doing any design work.

Note: this is a cross posting from my article at the foliotek devblog. This improves some of the code formatting.