PaletteBuilder jQuery Plugin

PaletteBuilder is a jQuery plugin to help web designers choose a palette for their website. It’s not intended to appear on the final version of websites, but you can add it to your site during the design phase to fiddle with the color scheme. The idea is that you set up multiple “color wells,” each connected to one or more jQuery selectors. The PaletteBuilder window hovers over your web page, and whenever you change the color for a given color well, the selectors are used to set that color for every matching element. This lets you get immediate feedback for how colors look together in the context of your page.

PaletteBuilder was written by Paul A. Jungwirth and uses the Farbtastic color wheel developed by Steven Wittens, another jQuery plugin. It is licensed under the GPL.

You can download a copy of PaletteBuilder here, including the required Farbtastic files. You’ll still need to get your own copy of jQuery. I’ve tested PaletteBuilder on jQuery 1.4.2.

To use PaletteBuilder, you need to add the following to your document’s <head> section:

<link rel="stylesheet" href="farbtastic.css" type="text/css"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<script type="text/javascript" src="jquery.palettebuilder.js"></script>

You can also add jQuery UI if you like. If jQuery UI is present, PaletteBuilder’s window will be draggable so you can move it around the page.

Methods

To use PaletteBuilder, first call $.palettebuilder.addColor once for each color well, passing the appropriate jQuery selectors for that color. addColor takes up to three parameters. Each may be either a string or a list of strings. The selector(s) in the first parameter are used to set the foreground color. The second parameter is for setting the background color, and the third the border color. Any valid jQuery selector string can be used. Any of the three arguments may be null or an empty array. So you could write code for three color wells like this:

$.palettebuilder.addColor(['a', 'a:visited'], '.nav');
$.palettebuilder.addColor('.title h1');
$.palettebuilder.addColor([], [], '.sidebar li');

Once you’ve defined your color wells, call $.palettebuilder.display to display the palette window:

$.palettebuilder.display();

This method takes an optional settings hash with these possible values:

  • divid: The id to use for the main palette window (defaults to palettebuilder).
  • color: The foreground color of the palette window (defaults to black).
  • bgcolor: The background color of the palette window (defaults to white).
  • left: The left position of the palette window (defaults to 0).
  • top: The top position of the palette window (defaults to 0).
  • z: The z-index position of the palette window (defaults to 1000).