A color picker with a few extra functions - for AngularJS

Downloads in past


1.1.27 years ago9 years agoMinified + gzip package size for ngjs-color-picker in KB


ngjs-color-picker npm Build Status
A small directive which essentially is a color picker but with a few extra functions - for AngularJS. Based on ng-color-picker.
Requirements: Angular 1.2+
  • Customize the appearance of the color picker (vertical, horizontal, columns etc.)
  • Generate random colors
  • Generate gradient colors

via npm:

npm install --save ngjs-color-picker

via bower:

bower install --save ngjs-color-picker

You may have to run
``` bash grunt wiredep ``` to make grunt automatically add the needed files to your index.html.


Clone or download the repository and include the production file in your application.
<script type="text/javascript" src="dist/ngjs-color-picker.js"></script>

Inject the directive as a dependency in your app:
angular.module('myApp', ['ngjsColorPicker']);
Usage and documentation
For documentation, examples and usage see the GitHub page for this repository.

Option prioritization

  1. Custom colors
  2. Random colors
  3. Gradient
  4. Default colors
Contribute :octocat: :raisedhands:
Run npm install and then you're able to start dev server with
npm run serve

The server is then available at http://localhost:8080.
The file dev/app/ngjs-color-picker.js is a symlink to source/ngjs-color-picker.js, so you can edit either one of them and the change will be shown on the dev server.
(Development server environment created using awesome angular-webpack).
  • See issues
  • Click (or something) to get the hex-code for the color (rgb should also be available)
  • Add reverse option for gradient
  • Include color themes (Good palettes:
  • Add option to select rows instead of columns