A Native angular directive for bootstrap-color-picker



Stars : 10

Forks : 10

Created by buberdds

Demo Download GitHub

devDependency Status Build Status


This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.
No dependency on jQuery or jQuery plugin is required.

Demo page (Bootstrap v3.x.x)

Previous releases: - branch 2.0 (Bootstrap v2.x.x) - branch 1.0 if you need a functionality from the original plugin or IE<9 support



$ npm install angular-bootstrap-colorpicker --save


$ bower install angular-bootstrap-colorpicker --save

Copy css/colorpicker.css and js/bootstrap-colorpicker-module.js. Add a dependency to your app, for instance:

angular.module('myApp', ['colorpicker.module'])


Hex format

<input colorpicker type="text" ng-model="your_model" />


<input colorpicker="hex" type="text" ng-model="your_model" />

RGB format

<input colorpicker="rgb" type="text" ng-model="your_model" />

RBGA format

<input colorpicker="rgba" type="text" ng-model="your_model" />

As non input element

<div colorpicker ng-model="your_model"></div>

The color picker template with an input element

<input colorpicker colorpicker-with-input="true" type="text" ng-model="your_model" />

Position of the color picker (top, right, bottom, left).

<input colorpicker colorpicker-position="right" type="text" ng-model="your_model" />

The color picker in a fixed element

<input colorpicker colorpicker-fixed-position="true" type="text" ng-model="your_model" />

When using fixed positioning, you can also put the picker into the parent element (this allows more styling control)

<input colorpicker colorpicker-fixed-position="true" colorpicker-parent="true" type="text" ng-model="your_model" />

The color picker in UI Bootstrap modal (the parent element position property must be set to relative)

<input colorpicker colorpicker-parent="true" type="text" ng-model="your_model" />

Binding the visibility of the color picker to a variable in the scope

<input colorpicker colorpicker-is-open="isOpen" type="text" ng-model="your_model" />

Auto hiding the color picker when a color has been selected

<input colorpicker colorpicker-close-on-select type="text" ng-model="your_model" />

Customize a size of the color picker saturation panel

<input colorpicker colorpicker-size="200" type="text" ng-model="your_model" />


Each color picker will emit the following events passing a data object in the following format:

    name: '',
    value: ''

Name is the string representation of ng-model and value is the current color.


A global selected event, will be fired when a color is selected from the saturation, hue or alpha slider.


Will be fired when a color is selected from the saturation slider.


Will be fired when a color is selected from the hue slider.


Will be fired when a color is selected from the alpha slider.


Will be fired when a color picker is opened.


Will be fired when a color picker is closed.


Javascript plugin


Leave a Reply