AngularJS Color Picker

Format (format)

Case (case) - The case of hex colors - 'upper', 'lower'

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) - 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

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

Horizontal (horizontal) - whether or not to display the hue, saturation, lightness, and opacity sliders horizontally below

Required (required)

Disabled (disabled)

Placeholder (placeholder)

ID (id)

Name (name)

Input Class (inputClass)

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

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 - ""

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

Color Show Hide Set value to #FF0000

Two Way Binding {{color}}

HTML Options

Color

Two Way Binding {{color2}}

No Options

Color

Two Way Binding {{color3}}