Angular Bootstrap Colorpicker

Native AngularJS colorpicker directive. No dependency on jQuery or jQuery plugin is required.
Alternatives To Angular Bootstrap Colorpicker
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Gentelella20,77319583 days ago4October 18, 201757mitHTML
Free Bootstrap 4 Admin Dashboard Template
Selectize.js12,93360010525 days ago7July 12, 201851apache-2.0SCSS
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Bootstrap Select9,7369653266 days ago47April 20, 2022293mitJavaScript
:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Metro Ui Css6,992845 days ago99June 23, 202268mitCSS
Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
X Editable6,464
6 months ago622mitJavaScript
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
3 days ago1January 27, 2018202apache-2.0JavaScript
Drag and drop website builder javascript library.
Jquery Ui Bootstrap5,486
45 years agoMarch 15, 201549HTML
A jQuery UI theme based on Twitter Bootstrap
Bootstrap Fileinput5,2581,182353 months ago89August 17, 202214otherJavaScript
An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
18 days ago26mitHTML
:tada: (RuoYi)官方仓库 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用
Bootstrap Multiselect3,62082212 months ago4August 01, 2021302otherHTML
JQuery multiselect plugin based on Twitter Bootstrap.
Alternatives To Angular Bootstrap Colorpicker
Select To Compare

Alternative Project Comparisons

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.

Popular Jquery Projects
Popular Bootstrap Projects
Popular Web User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Color Picker