Часто, во время разработки сайта мне нужно было добавить возможность выбора собственного цвета. Для этих целей я нашел очень простой и легкий jQuery плагин, который называется Tiny Colorpicker.

Демо

Посмотреть работы плагина можно по этой ссылке.

Функции Tiny Colorpicker

Сразу хочу сказать, что это не громоздкий плагин — в нем немного функций.

У него Tiny Colorpicker есть две основных функции

Выбор цвета из палитры (скриншот ниже)

Выбор цвета с картинки или фотографии (скриншот ниже)

Как я и писал выше, вы можете выбрать цвет из заранее построеной палитры или же из фотографии или картинки.

Использование

В этой секции будет описание использование этого плагига.

Цвет из палитры

Чтобы отобразить простую палитру, вы можете использовать текущий код:

$(document).ready(function()
{
    $("#colorpicker1").tinycolorpicker();
});

Если вы хотите установить какой-либо цвет по умолчания в палитру, вам нужно использовать функции .setColor() и как аргумент написать цвет (как показано в примере ниже):

$(document).ready(function()
{
    $("#colorPicker3").tinycolorpicker();
    var picker = $('#colorPicker3').data("plugin_tinycolorpicker");

    picker.setColor("#FF45CC");
});

Цвет из картинки

Чтобы отобразить картинку, а после выбрать из нее цвет, вы можете воспользоваться кодом ниже:

$(document).ready(function()
{
    $("#colorpicker2").tinycolorpicker();
});

Картинка берется из CSS стилей.

Другие примеры использования этого плагина вы можете посмотреть на официальном сайте разработчика.

На этом все. Если у вас остались или есть какие-либо вопросы — задавайте их ниже в комментарии.

JavaScript colorpicker — плагин для выбора цвета