Foliotek Development Blog

Spectrum Colorpicker In Foliotek Presentation

Monday, April 2nd, 2012

Spectrum, my JavaScript colorpicker project, has gotten some good news lately!

It was adopted by the WebKit project for use in the Web Inspector, which was on a few people’s wishlists, including my own.

Foliotek Getting Involved

We decided to add (and expand on) functionality and improve the design for use in Foliotek Presentation.

Geoff Leigh and I worked together, thinking about the color picking process from scratch and came up with a good workflow, I think.

Common Palettes

The palettes on the top are commonly used colors that are ‘sticky’. These are easy ways to grab a color that looks about right, and makes it easy to reuse colors. Clicking on any element from a palette instantly chooses the color and closes the colorpicker.

Template Palette

Part of what makes Foliotek Presentation cool is that we know so much about the designs that people use by analyzing the CSS and color changes that they do in our template editor. With this information, we bind a list of colors that are being used in their template. This opens up possibilities like reusing a heading color to accent a certain word in their portfolio.

User Colors

This is a list that remembers which colors you have chosen. It uses the localStorage object. It will automatically add any color you select that isn’t in the above palettes.

Since it is automatic, users do not need to add/remove/edit the custom palette. Right now, we think this is better than presenting the user with an interface for setting custom colors. We originally had some designs that handled this management, but we decided to go with the simpler solution for now.

Going Forward

I hope to continue development and make this the best JavaScript colorpicker available, keeping these goals in mind:

  • Good UX
  • Cross Browser Compatible (IE6 and up)
  • Doesn’t use any images
  • Easy to skin via CSS
  • Simple interface / easy to integrate with app

I am very happy with the changes and excited to be working on projects like these! You can follow development of the plugin, suggest features, or report bugs here: https://github.com/bgrins/spectrum.