# angular-color-picker

**Repository Path**: mirrors_linslin/angular-color-picker

## Basic Information

- **Project Name**: angular-color-picker
- **Description**: AngularJS Colour Picker Directive
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-09
- **Last Updated**: 2026-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# angularjs-color-picker


AngularJS Color Picker Directive

## Installation

#### Bower

```shell
bower install angularjs-color-picker --save
```

#### Npm
```shell
npm install angularjs-color-picker --save
```

#### Usage

* Include tinycolor.js, angularjs-color-picker.js and angularjs-color-picker.css
```html
<link rel="stylesheet" href="bower_components/angular-color-picker/dist/angularjs-color-picker.min.css" />
<!-- only include if you use bootstrap -->
<link rel="stylesheet" href="bower_components/angular-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css" />
<script src="bower_components/tinycolor/dist/tinycolor-min.js"></script>
<script src="bower_components/angular-color-picker/dist/angularjs-color-picker.min.js"></script>
```


* Add the module to your app
```javascript
angular.module('app', ['color.picker']);
```

* Include in your view
```html
<color-picker ng-model="myColor"></color-picker>
```

## Options

If a list is given then choose one of the items. The first item in the list will be the default.
```html
<color-picker
    ng-model="" <!-- only required field -->
    color-picker-format="'hsl', 'hsv', 'rgb', 'hex', 'hex8'"
    color-picker-alpha="true, false"
    color-picker-swatch="true, false"
    color-picker-swatch-pos="'left', 'right'"
    color-picker-swatch-bootstrap="true, false"
    color-picker-swatch-only="true, false"
    color-picker-pos="'bottom left', 'bottom right', 'top left', 'top right'"
    color-picker-case="'upper', 'lower'"
    color-picker-on-change="onColorChange($event, color)"
></color-picker>
```

## Requirements

* angularjs (v1.3 and higher)
* tinycolor.js (18.8 KB minified)

NO requirement for jQuery!

## Inspiration

Inspiration and code taken from projects like
* http://kaihenzler.github.io/angular-minicolors/
* http://mjolnic.github.io/bootstrap-colorpicker/
* https://github.com/buberdds/angular-bootstrap-colorpicker/