Spectrum — colorpicker выбор цвета

Скрипт выбора цветов — colorpicker.
Поддержка браузерами:
IE 6+, Chrome 4+, Firefox 3.6+, Safari 4+, Opera 11.1+, iOS

Для использования colorpicker подключаем скрипты:
<script src='spectrum.js'></script>
	<link rel='stylesheet' href='spectrum.css' />
Никакие дополнительные внешние файлы с изображениями не используются. Всё что нужно содержится в стилях spectrum.css

HTML

Пример простого использования:
<input id='colorpicker' />

JS

Плагин поддерживает работу с jQuery, так и без.
Если подключена библиотека jQuery, то инициализация будет такой:
<script>
	$("#colorpicker").spectrum({
	    color: "#f00"
	});
	</script>

Опции

$("#picker").spectrum({
    color: tinycolor,
    flat: bool,
    showInput: bool,
    showInitial: bool,
    allowEmpty: bool,
    showAlpha: bool,
    disabled: bool,
    localStorageKey: string,
    showPalette: bool,
    showPaletteOnly: bool,
    togglePaletteOnly: bool,
    showSelectionPalette: bool,
    clickoutFiresChange: bool,
    cancelText: string,
    chooseText: string,
    togglePaletteMoreText: string,
    togglePaletteLessText: string,
    containerClassName: string,
    replacerClassName: string,
    preferredFormat: string,
    maxSelectionSize: int,
    palette: [[string]],
    selectionPalette: [string]
});
Colorpicker имеет множество параметров.
Можно использовать в скрипте, или в разметке html, через data- атрибут, например так:
<input data-show-alpha="true" />
Подробнее - http://bgrins.github.io/spectrum/#options

События

// События могут быть использованы при инициализации, как опции:
	$("#picker").spectrum({
	    move: function(tinycolor) { },
	    show: function(tinycolor) { },
	    hide: function(tinycolor) { },
	    beforeShow: function(tinycolor) { },
	});
	
	
	// или, они могут быть добавлены в качестве слушателей событий:
	$("#picker").on('move.spectrum', function(e, tinycolor) { });
	$("#picker").on('show.spectrum', function(e, tinycolor) { });
	$("#picker").on('hide.spectrum', function(e, tinycolor) { });
	$("#picker").on('beforeShow.spectrum', function(e, tinycolor) { });
Подробнее - http://bgrins.github.io/spectrum/#events

Методы

$("#picker").spectrum("show");
	$("#picker").spectrum("hide");
	$("#picker").spectrum("toggle");
	$("#picker").spectrum("get");
	$("#picker").spectrum("set", colorString);
	$("#picker").spectrum("container");
	$("#picker").spectrum("reflow");
	$("#picker").spectrum("destroy");
	$("#picker").spectrum("enable");
	$("#picker").spectrum("disable");
	$("#picker").spectrum("option", optionName);
	$("#picker").spectrum("option", optionName, newOptionValue);
Подробнее - http://bgrins.github.io/spectrum/#methods

Более подробно можно ознакомиться - http://bgrins.github.io/spectrum/

Внешний вид плагина можно просто кастомизировать. В файле spectrum.css, в верхней части, находятся базые стили, а ниже свойства тем. Можно изменять стили, так как вам будет нужно.
ДЕМОПосмотреть
пример
Java Script
bower install spectrum
npm install spectrum-colorpicker