Цветовое кольцо (оттенок-насыщеность+яркость - hsv)
Насыщенность и яркость цвета выбираются при помощи вписанного в кольцо треугольника, либо квадрата в зависимости от настроек вывода.
Изначально видж. задумывался как плагин для фотошопа т.к. хотелось "так же как в той рисовалке", но для начала решил закончить версию для веба, т.к. документация API фотошопа весьма специфична и дело затянулось. (если кто работал, просьба отписать в приват)
Пример инициализации виджета
new KellyColorPicker({
place : 'color-picker', // id или обект элемент-контейнер, либо canvas
input : 'color', // необязательная привязка к полю ввода
});
Подробное описание, примеры входных параметров и возможных событий см. на странице
документации.
Виджет синхронизирует значение цвета с hex представлением в поле ввода (если задано). Позиционирование независимо от расположения поля ввода.
Если кто-нибудь соизволит протестировать, просьба отписать о работоспособности в разных браузерах. В том числе и мобильных (на "яблоках" не было возможности проверить например). Предложения \ замечания приветствуются.
пример 1 (привязка к полю ввода),
пример 2 (удаление и создание на рандоме),
пример 3 (градиент по двум цветам)
Если кого-то заинтересовало в качестве готового решения для каких-либо целей, скачать актуальную версию можно на GitHub'е
GitHub,
документация