A minimalistic Angular color picker directive.

~12 kb minified. Only depends on TinyColor.

Try Pickment out

Include Pickment files and dependencies.

<script type="text/javascript" src="tinycolor.js"></script>
<script type="text/javascript" src="pickment.js"></script>
<!-- Color modes are optional, but you need at least one -->
<script type="text/javascript" src="pickment-hue.js"></script>

Inject Pickment and one or more Pickment modes into your Angular app:

angular.module('app', ['pickment', 'pickment-hue']);

Pickment is used with the pickment element with its ng-model holding the CSS color value.

<pickment ng-model="color" preview="true" alpha="true" size="256" mode="hue" format="rgb" position="left top, left top"></pickment>

Using the element requires appropriate styles for the pickment class element it's transformed to. For example:

.pickment {
  min-width: 1em;
  min-height: 1em;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
}