#### {{ title }}{{ subtitle }}

##### Basic examples

Basic color picker

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.

Custom button text

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`.

Initially empty

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.

Hide picker buttons

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 when the picker is closed.

Disable color picker

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.

{{ enableLabel }}
Clickout fires change

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.

##### Picker additions

Show initial color

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.

Show alpha channel

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.

Show input and initial

If you specify both the `showInput` and `showInitial` options, the layout keeps things in order and preserves the initial sample.

Show input field

You can add an input to allow free form typing. The color parsing is permissive in the allowed strings, including HEX, RGB and known names.

Clear selection

Setting `allowEmpty` option to `true` adds an ability to reset current selection.

Full featured

This example demonstrates a full featured color picker with combination of `showInitial`, `showInput`, `showAlpha`, `allowEmpty` and palette options.

##### Color palettes

Show color palette

Spectrum can show a palette to make it convenient for users to choose from frequently or recently used colors.

Toggle palette only

Spectrum can show a button to toggle the colorpicker next to the palette. Set `togglePaletteOnly` to `true` to enable the toggle.

Selection palette

Spectrum can keep track of what has been selected with the `showSelectionPalette` option.

Show palette only

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` to `true`.

Hide after select

You can have the colorpicker automatically hidden after a palette color is selected. Set `hideAfterPaletteSelect` to `true`.

##### Color formats

HEX color format

You can set the format that is displayed in the text box and titles in the palette swatches using `preferredFormat`.

RGB color format

RGB color system constructs all the colors from the combination of the Red, Green and Blue colors.

HTML color names

Spectrum color picker also accepts HTML color names as valid color values.

Current values

The examples on the left keep their values formatted according to the configured output.

HEX: {{ formatValue(hexColor) }}
RGB: {{ formatValue(rgbColor) }}
Name: {{ formatValue(nameColor) }}

##### Picker events

Event binding

The picker can emit `change`, `hide`, `dragstart`, `move`, `show` and `dragstop` events.

Latest events
change: {{ eventResults['change'] }}
hide: {{ eventResults['hide'] }}
dragstart: {{ eventResults['dragstart'] }}
move: {{ eventResults['move'] }}
show: {{ eventResults['show'] }}
dragstop: {{ eventResults['dragstop'] }}

##### Flat picker

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`.

Show input field

In flat picker you can add an input to allow free form typing. The color parsing is permissive in the allowed strings.

Flat color palette

Spectrum can show a palette in a flat mode to make it convenient for users to choose from frequently or recently used colors.

Show initial color

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.