kolor-picker

A tinyColorPicker plugin provides sampler function for Canvas.

Download

Compress JS
Uncompress JS

Installation

You can also install kolor-picker by using Bower.

bower install kolor-picker

Demo

Demo

Requirements

• jQuery
• tinyColorPicker
• color-sampler

Usage

You could just use jQuery bind, delegate or on to listen event. HTML

<div id="picker"></div>
<canvas id="canvas"></canvas>

JavaScript

$('#picker').kolorPicker({
  canvas: '#canvas',
  onSelect: function (color) {
    $('#picker').css('background-color', color);
  },
  onChange: function (color) {
    // anything you want to do
  }
});

See also.

Methods

setColor(color)

Set color to picker.

color: String

Color in hex or rgb format. It does not support color name like 'black' or 'white'.

getColor()

Get color from picker.

Themes

You can choose built-in themes by cssAddon options and $.kolorPicker.theme. Currently, there is following themes:

light

Example

$.kolorPicker.theme = 'light'; // default theme
// or single picker
$('#picker').kolorPicker({
  theme: 'light'
});
$('#picker').kolorPicker('setColor', '#FF0000');

// events
$('#picker').on('kolorPicker:select', function (e, color) { });
$('#picker').on('kolorPicker:change', function (e, color) { });

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/kolor-picker
Author: Chen, Yi-Cyuan (emn178@gmail.com)