Spectrum

<input type='color' value='#f594d0' />

Why A Colorpicker?

I wasn't satisfied with the solutions available for colorpicking. Many of them included a ton of images, were hard to skin or customize, or were very large plugins. Here are the goals I had when making a new one:

Small Footprint

Just include the needed CSS and JavaScript files, and you are ready to go!

<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' />

We don't need no stinkin' images!

Nobody wants to add a bunch of code into their project. Spectrum is contained in two files, and both are careful not to mess with your existing code. The JavaScript is well less than 10K gzipped, see the current size in the README.

Polyfill

I wanted an option for the most basic use case, a polyfill for the input[type=color] HTML5 control. This mode needs to work without JavaScript enabled - and fallback to an input[type=text] like other HTML5 inputs.

Customizable

Just because you don't have to change anything to get it to work, doesn't mean you can't! It is easy to skin and customize the plugin with CSS, and there are a wide range of modes and options to explore.

Modes

input[type=color]

If you just want to provide a polyfill for the native color input, the easiest way is to create an input with the type of color. Once a user's browser supports a native color control, it will opt to use their native control instead.

Unlike the other modes, your value must be a 6 character hex value starting with a '#'. Why? Because the spec says so, that's why.

<input type='color' name='color' />
<input type='color' name='color2' value='#3355cc' />

That's it! The field will degrade to a text input if the user does not have JavaScript enabled, so that they will still be able to manually enter a color. You don't need to add a single line of code.

Custom

If you want to get more into the functionality, just create a normal input and initialize it as a normal jQuery plugin. You can set a lot of options when initializing the colorpicker. See the 'Options' section below.

<input type='text' id="custom" />

<script>
$("#custom").spectrum({
    color: "#f00"
});
</script>

Flat

Flat This means that it will always show up at full size, and be positioned as an inline-block element. Look to the left for a full sized flat picker.

<input type='text' id="flat" />

$("#flat").spectrum({
    flat: true
});

Options

$("#picker").spectrum({
    color: tinycolor,
    flat: bool,
    showInput: bool,
    showInitial: bool,
    localStorageKey: string,
    showPalette: bool,
    showPaletteOnly: bool,
    showSelectionPalette: bool,
    cancelText: string,
    chooseText: string,
    className: string,
    preferredFormat: string,
    maxSelectionSize: int,
    palette: [[string]],
    selectionPalette: [string]
});

Color

<input type='text' class='basic' value='red' />
<input type='text' class='basic' value='#0f0' />
<input type='text' class='basic' value='blue' />
<br />
<input type='text' class='override' />
            

<script>
$(".basic").spectrum();
$(".override").spectrum({
    color: "yellow"
});
</script>
            

Show Input

$("#showInput").spectrum({
    showInput: true
});
            

Show Palette

$("#showPalette").spectrum({
    showPalette: true,
    palette: [
        ['black', 'white', 'blanchedalmond'], 
        ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
    ]
});
            

Show Palette Only

$("#showPaletteOnly").spectrum({
    showPaletteOnly: true,
    color: 'blanchedalmond',
    palette: [
        ['black', 'white', 'blanchedalmond', 
        'rgb(255, 128, 0);', 'hsv 100 70 50'],
        ['red', 'yellow', 'green', 'blue', 'violet']
    ]
});
            

Show Selection Palette

$("#showSelectionPalette").spectrum({
    showPalette: true,
    showSelectionPalette: true, // true by default
    palette: [ ]
});
$("#showSelectionPaletteStorage").spectrum({
    showPalette: true,
    showSelectionPalette: true,
    palette: [ ],
    localStorageKey: "spectrum.homepage", // Any Spectrum with the same string will share selection
});
            

Show Initial

$("#showInitial").spectrum({
    showInitial: true
});
            

Show Input and Initial

$("#showInputAndInitial").spectrum({
    showInitial: true,
    showInput: true
});
            

Button Text

$("#buttonText").spectrum({
    chooseText: "Alright",
    cancelText: "No way"
});
            

Show Buttons

$("#hideButtons").spectrum({
    showButtons: false
});
            

Preferred Format

$("#preferredHex").spectrum({
    preferredFormat: "hex",
    showInput: true
});
$("#preferredHsl").spectrum({
    preferredFormat: "hsl",
    showInput: true
});
$("#preferredRgb").spectrum({
    preferredFormat: "rgb",
    showInput: true
});
$("#preferredName").spectrum({
    preferredFormat: "name",
    showInput: true
});
$("#preferredNone").spectrum({
    showInput: true
});
            

Events

$("#picker").spectrum({
    move: function(tinycolor) { },
    show: function(tinycolor) { },
    hide: function(tinycolor) { },
    beforeShow: function(tinycolor) { },
});

change

change: function(color) {               
    color.toHexString(); // #ff0000
}
            

move

move: function(color) {             
    color.toHexString(); // #ff0000
}
            

hide

            hide: function(color) {             
                color.toHexString(); // #ff0000
            }
            

show

            show: function(color) {             
                color.toHexString(); // #ff0000
            }
            

beforeShow

beforeShow: function(color) {
    return false; // Will never show up
}
            

Methods

$("#picker").spectrum("show");
$("#picker").spectrum("hide");
$("#picker").spectrum("get");
$("#picker").spectrum("set", colorString);
$("#picker").spectrum("container");

Skinning

Since it is all built with HTML/CSS, you can skin it easily. There are two parts to the spectrum.css file, the core rules (at the top of the file), and the themable rules (at the bottom). Feel free to tweak these rules to make it look how you want.

Non-input elements

You can use any element you would like to trigger the colorpicker: Click me to open a colorpicker, though it is strongly recommended to stick with <input> tags.

Nitty Gritty

Browser Support

I wanted this to work in the latest and greatest browsers, but also target backwords compatibility and mobile support. Here are the currently supported browers:

• IE 6+
• Chrome 4+
• Firefox 3.6+
• Safari 4+
• Opera 11.1+
• iOS

IE Implementation

IE Support is provided using proprietary filters. Other browsers use CSS gradients.

Accepted Color Inputs

Spectrum will use the color passed in to initialize. If there is no color passed in, it will try to parse a color based on the value of the input. The color parsing is based on the TinyColor plugin, and accepts many forms of input:

red
#fff
fff
#ffffff
ffffff
rgb(255, 0, 0)
rgb 255 0 0
hsl(0, 100, 50)
hsl(0, 100%, 50%)
hsl 0 100 50
hsl 0 100% 50%
hsv(0, 100%, 100%)
hsv(0, 100, 100)
hsv 0 100% 100%
hsv 0 100 100

It also provides the following forms of output:

var t = $("#element").spectrum("get");
t.toHex()       // "ff0000"
t.toHexString() // "#ff0000"
t.toRgb()       // {"r":255,"g":0,"b":0}
t.toRgbString() // "rgb(255, 0, 0)"
t.toHsv()       // {"h":0,"s":1,"v":1}
t.toHsvString() // "hsv(0, 100%, 100%)"
t.toHsl()       // {"h":0,"s":1,"l":0.5}
t.toHslString() // "hsl(0, 100%, 50%)"
t.toName()      // "red"