ui.bootstrap.materialPicker

Material Design Color Picker directive for AngularJS.

Latest codepen.io example.

Reference the ui.bootstrap.materialPicker module

To use include the ui.bootstrap.materialPicker.js file and add a reference to the ui.bootstrap.materialPicker module.

Tag

<material-picker ng-model="color"></material-picker>
<material-picker ng-model="color" format="'hex'" size="10" hover-model="hoverColor" size="15"></material-picker>

Attribute	Default	values	Required
ng-model	n/a	string, object	true
hover-model	n/a	object	false
format	'object'	'object', 'hex'	false
size	15	5 to n	false

CSS

The required CSS is below.

.materialpicker-colors {
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    border: 1px solid #FFF;
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    cursor: default;
}
.materialpicker-colors div.selected {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 4px #000;
    border: 2px solid #FFF;
}
div.materialpicker-white.selected {
    border-color: #78909C;
}
.materialpicker.ng-invalid .materialpicker-colors {
    border-color: #a94442;
    box-shadow: 0 1px 5px #a94442;
}

Format Object

$scope.color = {
  hex: '#990000',    Hex or RGB must be populated.
  r: 153,            Red 0-255
  g: 0,              Green 0-255
  b: 0,              Blue 0-255
  name: ''           Material Design Color Name or empty string
};