Michael Lascarides / Projects /ssp

Simple Swatch Picker icon

Simple Swatch Picker

A JQuery color picker plugin

Download .Zip Source (@ GitHub)

Why another color picker?

  • It's tiny. Just 2.6kB of Javascript in the minified version, just a smidgen of CSS to go with it, and no images.
  • It's versatile. Options control what range of colors goes in the palette, the number of rows and columns of colors, and even the size and shape of the swatches (using only CSS).
  • It's simple. Need a full-featured Photoshop-style color picker for a design project? This ain't it. But sometimes you just want a super-basic picker for color-coding folder tabs, or inboxes, or avatars. With Simple Swatch Picker, create a text field in your application, add one line of code, and you've got it.
  • It's elegant. No cruft, no eyedroppers, no RGB or Hex codes showing. Just a sweet little grid of chips and one big selected swatch.

The Simple Swatch Picker installs in seconds, and attaches a beautiful rainbow of colors from either one of the preset palettes or your own custom palette.

Basic usage

To activate Simple Swatch Picker, simply include JQuery, the plugin file and the CSS file in your HTML page, then use the following Jquery statement to add the picker to the form field of your choice:

To add a Simple Swatch Picker to this hidden form field:

<input type="hidden" id="myField">

Add this code to your page:

<script type="text/javascript"> $("#myField").simpleSwatchPicker(); </script>

Try it here!

Click here to see what color is stored in hidden field.

Options

You can customize the look and behavior of your Simple Swatch Picker by invoking it with any of the options below.

Option Description

'palette'

(One of 'default', 'moody', 'pastel', 'primary', 'warm', or 'cool')

Changes the colors in the palette to any one of the following presets:

'default'

Default palette

If you don't specify a value for 'palette', you'll get this slightly desaturated, medium value set of colors.

'pastel'

Pastel palette

Light, unsaturated colors, suitable for using as backgrounds behind black type.

'moody'

Moody palette

Dark, rich colors, suitable for using as backgrounds behind white type.

'primary'

Primary palette

Bright, sunny, saturated colors.

'warm'

Warm palette

Reds, oranges, yellows: the warmest part of the spectrum.

'cool'

Cool palette

Cyans, blues, indigos: the coolest part of the spectrum.

'rows'

(integer)

Number of rows of color chips in the palette. Practical maximum depends on the layout of your page.

'cols'

(integer)

Number of columns of color chips in the palette. Practical maximum depends on the layout of your page.

'selectMessage'

(string)

The message displayed when no color is yet selected. Default is "click to choose color".

'swatchContainer'

(string or JQuery object)

JQuery/HTML object or CSS selector of the container on the page where you want to draw the picker.

By default, the picker will be drawn immediately after the form field you're attaching it to; even if it's a hidden form field, the picker will be drawn in the container that contains the field. For layout reasons, you may want it somewhere else, in which case you can set this option.

(Note: You can also use this picker with a text field instead of a hidden field, but why would you? Hex codes are not friendly to most users.)

'hue'

(Array: float, float, 'rows'|'cols')

To control the color range of the palette, you can set the numerical range of each of the three color components hue, saturation and value.

The 'hue' option takes as an argument an array of three items. The first two are decimal numbers between 0.0 and 360.0 to indicate the hue value on the spectrum (red, orange, yellow, green, cyan, blue, violet).

The first number indicates the value at the beginning of the range, and the second number indicates the value at the end. You can have a higher number first and a lower number second if you want to descend.

The third item in the array should be either 'rows' or 'cols' to indicate in which direction the hues should be spread out.

Note that hue is a circular range; both 0 and 360 are red! If you want a full range of colors, you'll probably want to set this to 0 to 320 or so. Otherwise, your first and last columns will be identical!

In the default palette, the 'hue' option is set to [0.0, 300.0, 'cols'], meaning hues are spread across palette columns from 0 on the left to 300 on the right.

'saturation'

(Array: float, float, 'rows'|'cols')

The 'saturation' option takes as an argument an array of three items. The first two are decimal numbers between 0.0 and 100.0 to indicate the saturation of the color.

The first number indicates the saturation at the beginning of the range, and the second number indicates the saturation at the end. You can have a higher number first and a lower number second if you want to descend.

The third item in the array should be either 'rows' or 'cols' to indicate in which direction the saturation should be spread out.

Saturation is a measure of how vivid a color is. A saturation of 100 means full vivid reds, blues, greens, what have you (according to the hue setting). A saturation of 0 means a purely neutral gray, no matter the hue setting.

In the default palette, the 'saturation' option is set to [70.0, 100.0, 'rows'], meaning that the topmost row has a saturation of 70 and the bottommost has a saturation of 100.

'value'

(Array: float, float, 'rows'|'cols')

The 'value' option takes as an argument an array of three items. The first two are decimal numbers between 0.0 and 100.0 to indicate the value of the color.

The first number indicates the value at the beginning of the range, and the second number indicates the value at the end. You can have a higher number first and a lower number second if you want to descend.

The third item in the array should be either 'rows' or 'cols' to indicate in which direction the color value should be spread out.

Color Value is a measure of how light or dark a color is. A value of 100 means the brightest color (if saturation is high), or pastel or white colors (if saturation is low). A saturation of 0 means black, no matter the setting of the other two numbers.

In the default palette, the 'value' option is set to [40.0, 98.0, 'rows'], meaning that the topmost row has a color value of 40 and the bottommost has a value of 98.

Customized examples

With 'palette':'pastel'

$('#myCustomField').simpleSwatchPicker({ 'palette' : 'pastel' });

12×12 grid with custom palette

$('#myCustomField2').simpleSwatchPicker({ 'rows' : 12, 'cols' : 12, 'hue':[5.0,200.0,'rows'], 'saturation':[25.0,75.0,'cols'], 'value':[100.0,30.0,'cols'] });