Angular md-color-picker

*** BETA ***

A pop up color chooser featuring:

• HSL Specturm
• RGBA Sliders
• Palette Selection
• $cookie based history
• Multiple output formats

Spectrum Selector

Canvas based spectrum selection tool, no images or tricky css.

RGBA Sliders

Angular Material sliders and manual input.

$cookie Based History

If $cookies is not included in your app, the history function will fall back to an array based history that is reset on each reload.

Multiple Output Formats

Using tinycolor.js we can output hexadecimal, rgb(a), or hsl(a) formats.

Misc.

• Random Color on open (optional)
• Input focus opens color chooser (optional)
• Default color on open (optional)
• Specify output type
• Accepts label and icon for use in the generated md-input-container

Demo

*** Text Color ***

The text color field is not using the openOnInput attribute and you must click on the preview circle to open the color chooser. This allows you to manually type a color value without opening the color chooser.

This field has a label and icon specified.

*** Text Background ***

The text background field is using the openOnInput and the random attributes. This will maket he field open to a random color if one is not already selected when the input field receives focus.

This field only has the label specified.

Text Style

Font {{font}}