{{ overviewIntro }}
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 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.
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
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.
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.
If you specify both the showInput and showInitial options, the layout keeps things in order and preserves the initial sample.
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.
Setting allowEmpty option to true adds an ability to reset current selection.
This example demonstrates a full featured color picker with combination of showInitial, showInput, showAlpha, allowEmpty and palette options.
Color palettes
Spectrum can show a palette to make it convenient for users to choose from frequently or recently used colors.
Spectrum can show a button to toggle the colorpicker next to the palette. Set togglePaletteOnly to true to enable the toggle.
Spectrum can keep track of what has been selected with the showSelectionPalette option.
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.
You can have the colorpicker automatically hidden after a palette color is selected. Set hideAfterPaletteSelect to true.
Color formats
You can set the format that is displayed in the text box and titles in the palette swatches using preferredFormat.
RGB color system constructs all the colors from the combination of the Red, Green and Blue colors.
Spectrum color picker also accepts HTML color names as valid color values.
The examples on the left keep their values formatted according to the configured output.
Picker events
The picker can emit change, hide, dragstart, move, show and dragstop 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 permissive in the allowed strings.
Spectrum can show a palette in a flat mode to make it convenient for users to choose from frequently or recently used colors.
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.
{{ apiIntro }}
{{ mainInputsTitle }}
[(ngModel)]controla o valor selecionado.showInput,showAlpha,allowEmptyeshowButtonsajustam a UI.showPalette,showSelectionPaletteepalettecobrem atalhos visuais.preferredFormat,flate eventos comopickerChangecompletam os casos avançados.