Basic examples
Spectrum is a simple yet powerful color picker that can be used as a cross-browser alternative to native color input. It supports dropdown and flat modes with variety of options and events.
Apart from default button labels, you can set custom button's text or translate it using cancelText and chooseText properties. Default button labels are Cancel and Choose.
Spectrum picker can be initialized with an empty color value, meaning the input field value remains empty. This is very useful if the picker field needs to be validated or when field is optional.
You can show or hide the buttons using the showButtons property. If there are no buttons, the behavior will be to fire the change event (and update the original input) when the picker is closed.
Spectrum can be automatically disabled if you pass in the disabled flag. Additionally, if the input that you initialize spectrum on is disabled, this will be the default value. Note: you cannot enable spectrum if the input is disabled.
When clicking outside of the colorpicker, you can force it to fire a change event rather than having it revert the change. This is true by default. Try to pick a color and click outside to see it in action.
Picker additions
Spectrum can show the color that was initially set when opening. This provides an easy way to click back to what was set when opened. Pick a color and click on initial color to reset your selection.
You can allow alpha transparency selection by setting showAlpha option to true. Opacity is shown as a slider that supports values from 0 to 100 with minimum increment.
If you specify both the showInput and showInitial options, the CSS keeps things in order by wrapping the buttons to the bottom row, and shrinking the input. Note: this is all customizable via CSS.
You can add an input to allow free form typing. The color parsing is very permissive in the allowed strings. Use in combination with allowEmpty is recommended to allow empty value.
Setting allowEmpty option to true adds an ability to reset current selection. Spectrum inserts a square area in top right corner, which clears the selected color on click.
This example demonstrates a full featured color picker with combination of various options explained above: showInitial, showInput, showAlpha and allowEmpty.
Color palettes
Spectrum can show a palette to make it convenient for users to choose from frequently or recently used colors. When the picker is closed, the current color will be added to the palette.
Spectrum can show a button to toggle the colorpicker next to the palette. The default value for togglePaletteOnly is false. Set it to true to enable the Toggle button.
You can define how many elements are allowed in the selectionPallete at once. Elements will be removed from the palette in first in - first out order if this limit is reached.
If you'd like, spectrum can show the palettes you specify, and nothing else. To hide color picker and show only color palette, simply set showPaletteOnly and showPalette options to true.
Spectrum can keep track of what has been selected with the showSelectionPalette option. If the localStorageKey option is defined, the selection will be saved in the browser's localStorage object.
You can have the colorpicker automatically hidden after a palette color is selected. Set hideAfterPaletteSelect to true. Note: this behaviour is only available in color palette and doesn't work with color selection.
Color formats
You can set the format that is displayed in the text box and titles in the palette swatches. Use either preferredFormat option in JS or data-preferred-format attribute in HTML.
HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. Color value is specified with the hsl() function, which has hsl(hue, saturation, lightness) syntax.
Spectrum color picker also accepts HTML color names as valid color values. You can define 140 color names, out of which 17 colors are standard. Refer to this page to see a full list.
Some six-digit hex colors can be written using a three-digit shorthand, which combines the duplicate digits from each color component into one. This results in a three digit hex number instead of six.
RGB color system constructs all the colors from the combination of the Red, Green and Blue colors. Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.
In this example preferred color format is null, meaning it depends on input - try changing formats with the text box. Here all formats are supported and this is the default behaviour.
Picker events
Change event is called as the original input changes. Only happens when the input is closed (not by clicking 'Cancel' button) or the 'Choose' button is clicked.
Called after the colorpicker is hidden. This happens when clicking outside of the picker while it is open. Note, when any colorpicker on the page is shown it will hide any that are already open.
Dragstart event is called at the beginning of a drag event on either hue slider, alpha slider, or main color picker areas. Can be combined with other events.
Move event is called as the user moves around within the colorpicker. When the picker is closed, the last picked color value is remembered, but not considered selected.
Show event is called after the colorpicker is opened. This is ignored on a flat colorpicker. Note, when any colorpicker on the page is shown it will hide any that are already open.
Dragstop event is called at the end of a drag event on either hue slider, alpha slider, or main color picker areas. Can be combined with other events.
Flat picker
Flat mode means that the color picker will always show up at full size, and be positioned as an inline-block element. To display color picker in flat mode, set flat option to true.
In flat picker you can add an input to allow free form typing. The color parsing is very permissive in the allowed strings. Use in combination with allowEmpty is recommended to allow empty value
Spectrum can show a palette in a flat mode to make it convenient for users to choose from frequently or recently used colors. When the picker is closed, the current color will be added to the palette.
Spectrum in a flat mode can show the color that was initially set. This provides an easy way to click back to what was set when opened. Pick a color and click on initial color to reset your selection.
