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.
