AngularJS Color Picker
An AngularJS directive for a color picker. No requirement on jQuery.
Color
Show
Hide
Color
Format (format)
Case (case) - The case of hex colors - 'upper', 'lower'
Sliders
Hue (hue) - whether or not to display the hue control
Dynamic Hue (dynamicHue) - whether or not to allow hue control to change based on color selection
Saturation (saturation) - whether or not to display the saturation control
Dynamic Saturation (dynamicSaturation) - whether or not to allow saturation control to change based on color selection
Lightness (lightness) - whether or not to display the lightness control
Dynamic Lightness (dynamicLightness) - whether or not to allow lightness control to change based on color selection
Alpha (alpha) - whether or not to display the alpha control
Dynamic Alpha (dynamicAlpha) - whether or not to allow alpha control to change based on color selection
Swatch
Swatch (swatch) - whether or not to display the swatch inside the input field
Swatch Only (swatch-only) - whether or not to display the input field
Swatch Position (swatch-pos) - the position of the swatch in the input field - 'left' or 'right'
Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on
Popup
Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'
Inline (inline) - whether or not to display inline or in a popup - false, true
Round (round) - whether or not to display the picker as a circle
Validation
Restrict To Format (restrictToFormat) - whether or not to restrict typing of the color to the selected format
Preserve Input Format (preserveInputFormat) - whether or not a valid input color of a different format should change to the configured format
Allow Empty (allowEmpty) - whether or not to allow empty values as valid
Attributes
Required (required)
Disabled (disabled)
Placeholder (placeholder)
ID (id)
Name (name)
Input Class (inputClass)
Show/Hide
Show Swatch (show.swatch) - whether or not to open when clicking the swatch - true, false
Show Focus (show.focus) - whether or not to open when focusing on the input - true, false
Hide Blur (hide.blur) - whether or not to close when losing focus on the input - true, false
Hide Escape (hide.escape) - whether or not to close when pressing the escape key - true, false
Hide Click (hide.click) - whether or not to close when clicking outside the color picker - true, false
Buttons
Close Visible (close.show) - whether or not to display the close button - false, true
Close Label (close.label) - The label of the close button - "Close"
Close class (close.class) - The class of the close button - ""
Clear Visible (clear.show) - whether or not to display the clear button - false, true
Clear Label (clear.label) - The label of the clear button - "Clear"
Clear class (clear.class) - The class of the clear button - ""
Reset Visible (reset.show) - whether or not to display the reset button - false, true
Reset Label (reset.label) - The label of the reset button - "Reset"
Reset class (reset.class) - The class of the reset button - ""