Сегодня у нас есть несколько инструментов для выбора и определения цвета, выполненных на JavaScript. Так называемые Color Picker-ы используется в веб-приложениях во многих случаях, когда пользователю нужно сделать выбор из цветовой палитры. Самостоятельное написание палитры цветов – это долгий процесс, которого можно избежать, используя готовые варианты. Мы подобрали для вас готовые модули,скрипты и библиотеки написанные на Javascript, которые вы можете легко использовать на своих веб-сайтах или при разработке.

Эти библиотеки просты в использовании и хорошо документированы, каждая из них также служит разным целям. 

Jscolor

jscolor.js — это веб-подборщик цветов с непрозрачностью (альфа-канал) и настраиваемой палитрой.
Его основные преимущества:

• Один файл простого JS без зависимостей
• Поддерживает цвета CSS, такие как rgba и hex, включая обозначение #rrggbbaa.
• Загрузка включает уменьшенный jscolor.min.js
• Подходит для мобильных устройств

Jscolor.js — это полностью самодостаточная библиотека JavaScript, состоящая только из одного файла ванильного JavaScript. Ей не нужны никакие фреймворки (jQuery, Dojo, MooTools и т. д.), но она, безусловно, может сосуществовать вместе с ними. Библиотека поддерживает все современные браузеры.

Гибко настраиваемый jscolor предоставляет множество вариантов конфигурации. Если вам нужно изменить размер или цвета средства выбора цвета или присоединить функцию к его событию onchange, конфигурацию библиотеки можно точно настроить для вашего веб-проекта.

Благодаря встроенной поддержке сенсорных событий, jscolor спроектирована таким образом, чтобы её было легко использовать на смартфонах или планшетах.

ColorPicker

Если вам нужен быстрый и небольшой JS скрип для выбора цвета, то colorPicker – это ваш выбор. Он использует только один файл JavaScript, который занимает всего 45.4KB. При этом, скрипт не требует никаких дополнительных HTML или CSS файлов.

ColorPicker работает во всех браузерах, в том числе с IE6 + (необходимо сделать дополнительный CSS, чтобы он работал в IE6).
colorPicker.js использует colors.js , небольшой, но всеобъемлющий инструмент для преобразования / вычислений цветов (WCAG 2.0, контраст, разница в цвете, смешение слоев и т. д.).

С помощью colors.js вы также можете легко создавать свои собственные более простые и / или ограниченные палитры цветов. colors.js может преобразовывать 182 различных комбинации цветовых пространств (rgb2HSV, RGB2hsl, rgb2RGB, HEX2Lab и так далее).

Flexi Color Picker

FlexiColorPicker основан на цветовой модели HSV. Таким образом, единственными двумя частями палитры цветов являются ползунок для выбора значения оттенка и палитра для выбора насыщенности. И ползунок, и средство выбора являются элементами HTML (обычно <div>), которые служат оболочкой для прямоугольников градиента SVG / VML. Вы можете полностью настраивать внешний вид панели выбора цвета, изменять её размеры и отображение.

Функции:

• нет Flash, изображений или блоков размером 1 пиксель
• нет зависимости от внешней библиотеки JavaScript
• размеры как области выбора, так и области слайдера можно регулировать произвольно
• поддержка большого количества браузеров (включая мобильные браузеры)
• понятный (никакой магии, код легко читается и, следовательно, корректируется)
• стилизация в CSS
• положение ползунка и области выбора жестко не запрограммировано и может быть изменено в CSS
• вывод / ввод HSV, RGB и HEX
• индикаторы (указатели на ползунок и области выбора) могут быть произвольными HTML-элементами (изображениями, блоками и т. д.), стилизованными в CSS.
• готовые к использованию темы (хранятся в одной таблице стилей CSS)

Huebee

Данная библиотека написана на JavaScript. Huebee создаёт палитры цветов удобные для пользователей и отвечающие их запросам. Huebee отображает фиксированный набор цветов, поэтому пользователи сразу видят нужные цвета, что позволяет им быстрее принимать решение.

Автор создал Huebee, когда работал над стилизацией логотипа в одном из своих проектов. Он добавил функцию, позволяющую выбирать собственные цвета для логотипа. Глядя на другие палитры цветов, он не мог найти то, что хотел.

Большинство палитр цветов слишком сложно и предназначены для отображения и выбора из почти 17 миллионов доступных цветов. Но обычному пользователю не всегда нужна такая обширная палитра и тут вам на помощь придет Huebee, которая показывает ограниченный набор цветов, чтобы их было легче понять.

MiniColors

MiniColors — это мощная, элегантная, анимированная и полностью настраиваемая палитра цветов на основе jQuery для вашей веб-страницы / веб-приложения.

Основные особенности:

• Показывает палитру цветов при размытии и щелчке.
• Работает во встроенном режиме.
• Поддерживает форматы цвета Hex и rgb (a).
• Настраиваемая анимация открытия / закрытия.
• Пользовательские позиции.
• Возможность настройки элементов управления.
• Легко стилизовать с помощью собственного CSS.
• Методы API и обработчики событий.

Iro.js 

Iro.js – это красивая палитра цветов. Она полностью выполнена на JavaScript и использует HSV при реализации палитры цветов. Круговая палитра сделана на HTML5 и поддерживает ввод с сенсорных экранов.

Также предоставляет методы API, которые позволяют устанавливать, обновлять и преобразовывать цвета.

Основной функционал:

• Поддерживает любые цветовые форматы: Hex, Hex alpha, RGB, RGBA, объект RGB, объект RGBA, HSL, HSLA, объект HSL, объект HSLA, объект HSV, HSVA.
• Многоцветное выделение.
• Поддерживает 3 раскладки: Wheel, Slider, Box.

React Color

React Color — это набор средств выбора цвета из таких инструментов, как Photoshop, Chrome, Sketch, Github, Material Design, Twitter и других. На выбор доступно 13 палитр цветов. Используя данную цветовую палитру в JavaScript, веб-дизайнеры также могут рассчитывать на создание своих собственных цветовых диапазонов, используя существующие компоненты.

Установка может быть произведена установкой react-color с помощью NPM. Одновременно компоненты цвета могут быть включены в данную библиотеку с помощью импорта некоторого средства выбора цвета из react-color в верхней части компонента, а затем использования его в функции рендеринга.

Evol-colorpicker

Evol-colorpicker — это адаптируемая библиотека JavaScript для возможностей выбора цвета, которую можно использовать в оперативном режиме. Она может обеспечить поддержку прозрачного цвета, отслеживание истории цветов и выбор цветовой палитры.

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

Farbtastic

Farbtastic – является модулем для jQuery. С его помощью вы можете добавлять в нужные места вашей страницы палитры для выбора цветов. Каждая из таких палитр является отдельным виджетом, который можно связать с различными элементами, и которая будет обновляться в зависимости от изменения значения элемента.

Farbtastic 2 использует элемент холста html5 для рендеринга градиента насыщенности / яркости внутри круга оттенков. 

Colorjoe

Colorjoe — это хорошо масштабируемая палитра цветов. Она предлагает вам общую простоту мгновенного выбора цвета. С помощью этого инструмента вы можете получить RGB, а также другие цветовые коды или значения, выбрав и щелкнув доступную область выбора цвета. 

Масштабируемость, предлагаемая colorjoe, чрезвычайно функциональна. Это потому, что он не зависит от вечных изображений и основан на CSS. Следовательно, вы можете изменить размер colorjoe, используя CSS в соответствии с индивидуальными потребностями.

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне