Sunday, September 20FreeJQuery

Material Design Color Picker for AngularJS

Material Design Color Picker directive for AngularJS:

Material Design Color Picker

Color Picker

Latest example.

Reference the ui bootstrap material Picker module

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

HTML – Only ng-model is required. If supplying an API it must be a unique object per color picker. However, the event API can be shared among color pickers.



<material-picker ng-model="color"></material-picker>
<material-picker ng-model="color" format="'hex'" size="10" hover-model="hoverColor" size="15"></material-picker>
ng-modeln/astring, objecttrue
format'object'‘object’, ‘hex’false
size155 to nfalse


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

Leave a Reply

Your email address will not be published. Required fields are marked *