angular-color-picker

Lightweight Color Picker for Angular

Live Demo

Click and drag to pick colors or enter RGB color values into the input element.

Demo Source

<color-picker ng-model="color">
</color-picker>

<input type="text"
       ng-model="color"
       ng-init="color = '#f05a28'">

Overview

angular-color-picker is a lightweight color picker that acts like a custom input element through regular ngModel bindings. It is:

  • Pure CSS – does not use any images
  • Pure Angular – does not rely on any other libraries
  • Compatible with IE8+

Download

Grab the latest from GitHub or use your favorite package manager:

Via Bower

bower install angular-color-picker

Via NPM

npm install angular-color-picker

Usage

Include angular-color-picker.js in your application, after Angular is included. Also include angular-color-picker.css to get the bare minimum styling.

<link rel="stylesheet" href="path/to/angular-color-picker.css">
<script src="path/to/angular.js"></script>
<script src="path/to/angular-color-picker.js"></script>

You may use an AMD or CommonJS loader as well.

Initialize your Angular application with the mp.colorPicker module as a dependency:

angular.module('app', [ 'mp.colorPicker' ]);

Then use the <color-picker> element along with an ng-model directive for two-way binding with a scope variable:

<color-picker ng-model="color">
</color-picker>

Theming

You can override the styles defined in angular-color-picker.css to match the style of your application, while being careful not to change the size of the color variation and hue picker boxes. The classes and specifiers that are used are:

.angular-color-picker
The top-level container for the entire component.
.angular-color-picker > ._variations
The color picker box that shows all the color variations for a selected hue. The size of this must remain 200x200 pixels.
.angular-color-picker > ._variations > ._whites
.angular-color-picker > ._variations > ._whites > ._blacks
Gradient overlays that result in all variations to be rendered. You should not have to touch these.
.angular-color-picker > ._variations > ._whites > ._blacks > ._cursor
The currently selected color cursor. The effective size of this must remain 10x10 pixels.
.angular-color-picker > ._variations > ._whites > ._blacks > ._mouse-trap
Internally used to capture mouse events. You should not have to touch this.
.angular-color-picker > ._hues
The hue picker box. The height of this must remain 200 pixels. You should not have to change the gradients.
.angular-color-picker > ._hues > ._cursor
The currently seleted hue cursor. The effective height of this must remain 10 pixels.
.angular-color-picker > ._hues > ._mouse-trap
Internally used to capture mouse events. You should not have to touch this.
.angular-color-picker > ._hues > ._ie-1
.angular-color-picker > ._hues > ._ie-2
.angular-color-picker > ._hues > ._ie-3
.angular-color-picker > ._hues > ._ie-4
.angular-color-picker > ._hues > ._ie-5
.angular-color-picker > ._hues > ._ie-6
Fallback containers to get contiguous hue gradients working on IE. You should not have to change the gradients.

Limitations

As evidenced by the warnings under Theming, the JavaScript code is currently hard-coded to work with certain dimensions for some key elements. The color picker will stop functioning accurately if you change the dimensions of those elements during theming.

License

MIT