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.
