10 jQuery плагинов для выборки цвета (color picker)

Жара продолжает бушевать в столице и в северной столице и будет продолжаться ещё как минимум неделю. В связи с этим я постараюсь не парить сильно мозги всякими практическими темами и, по возможности, буду предлагать достаточно легковесные посты, например, как этот.

Итак, все прекрасно знают для чего нужен color picker, известный также под русскоязычным названием - "пипетка" (а для детей известен как "пипеточка" - прим.ред.).

Иногда на сайтах требуется установить color picker (к примеру, http://ru-ru.colourlovers.com/), а посему я предлагаю все, найденные мной, плагины пипеток на jQuery. Полагаю это наиболее полная коллекция. Итак.

Все плагины делятся на две категории. Одна из категорий представляет собой атлас цветов (swatches) - есть какие-то предустановленные цвета, из которых надо делать выбор. А вторая категория - позволяет выбирать всевозможные варианты цветов, путём перемещения по цветовому полю - color picker. Оба названия взяты из соответствующих инструментов Adobe Photoshop.

Все плагины проверялись в Internet Explorer 6-8, Google Chrome 5, Opera 10.60, Opera 9.26, Mozilla Firefox 3.6.6, Safari 4.03.

Color Pickers

1. jPicker. Гибридный плагин, содержащий в себе и color picker, и swatches. Лучший в линейке плагинов, т.к. корректно работает во всех ишаках, даёт информацию о цвете в системах HSV и RGB, даёт номер цвета. При этом если вы будете кликать по точечкам рядом с буквами RGB и HSV, то внешний вид палитры будет изменяться! Иными словами, есть всё, на вкус и на цвет.
      

    

2. Eyecon Color Picker.  Очень приятный и удобный плагин. Выдаёт параметры цвета в цветовых системах RGB и HSB, даёт также номер цвета. Более и не надо. Возможно задать два цвета в окошках справа вверху, чтобы их сравнивать. По ссылке инфо можно найти очень полезную информацию по плагину.  Замечена некорректная работа в IE6 - цветовое поле представлено оттенками серого, но при этом цвета в полях справа вверху показаны нормально, да и номера цветов указываются верно. По ссылке на второй пример указана упрощённая версия плагина. В целом плагин очень хорош, и если выбирать не jPicker, то этот. Советую.
          

    

3. Intelliance Color Picker. Очень похож на упрощённую версию от Eyecon, но обладает своими недостатками. Показывает цвет в системе RGB и даёт номер цвета. В шестом экплорере выдаёт красное поле, боковая полоска цветов отсутствует. При этом в окошке справа вверху цвет показывается, номер цвета даётся корректно. В остальном всё нормально. По окончании выборки цвета возможно вызывать какую-нибудь функцию.
      

    

4. Farbtastic. Плагин, внешне отличающийся от предыдущих. Даёт только номер цвета, хотя в некоторых случаях вроде бы можно получить нормированный цвет по системе HSL (нормированный к единице). Работает корректно вроде как везде. Хотя 7 ишак у меня просто зависал, но не факт, что в этом виноват плагин, нужно проверять.
      

    

Swatches

5. iColorPicker. Очень приятная палитра цветов. Даёт номер цвета. Баги не замечены.
      

    

6. Really Simple Color Picker. Очень простой атлас цветов. Цветов всего 36, возвращается номер цвета. Баги не замечены.

    
    

    

        

    

7. Normal Color Picker. Представляет собой атлас цветов, возвращающий номер цвета. По окончании выборки цвета возможно вызывать какую-нибудь функцию. В IE6 и Opera9.26 не работал, а IE7 намертво зависал, т.е. требуется дополнительная проверка на IE7.
      

    

8. Simplecolor color-picker. Простой атлас цветов. Не проверялся, т.к. нет онлайн-примера.
      

    

9. Crayonbox. Настраиваемый набор цветов, который может давать и номер цвета, и его название, в общем всё что душе угодно, т.к. список цветов настраиваемый. Возможет вызов функции по клику на выбранный цвет.
      

    

10. Syronex Color Picker. Плагин полный аналог предыдущего. Багов также не замечено.
       

     

Если я какие-то плагины упустил, пишите, добавим. Да, напоследок посоветую глянуть статью по ссылке. Она на английском языке, но в ней есть картинка со всеми возможными визуальными оформлениями колорпикеров. Любопытная штука. http://wiki.jqueryui.com/ColorPicker

Адрес для трекбека

color picker, jQuery

(голосов: 2, средний: 5.00 из 5)