12 лучших JavaScript плагинов Выбора Цвета (Color Picker)

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

JavaScript плагины помогают найти код любого цвета. Цвет состоит из цветовых кодов. Цветовые коды – это просто значение частоты трех цветов: красного, зеленого и синего. Значение частоты трех цветов колеблется от 0 до 255. Поэтому чем выше указана частота использования одного их цветов, тем больше он будет влиять на формирование окончательного цвета.

Каждый код HTML состоит из символа “#” и 6 букв или цифр. Используется шестнадцатеричная система счисления. Например, “FF” в шестнадцатеричной системе соответствует 255 в десятеричной.

Так первыми двумя символами в коде цвета HTML обозначается насыщенность красного цвета. 00 – наименее насыщенный и FF – наиболее насыщенный. Третий и четвертый символы означают насыщенность зеленого, а пятый и шестой – синего. Таким образом, комбинируя разные по насыщенности оттенки красного, зеленого и синего, мы можем получить любой нужный нам цвет.

Если Вы хотите недорого купить новые оригинальные iPhone, iPad, MacBook, iMac, то iStudio – это один из лучших магазинов техники Apple.

1. Плагин ColorPicker – Advance JavaScript Color Picker

Сайт плагина: “dematte.at/colorPicker/”
GitHub ссылка: “github.com/PitPik/colorPicker”

С помощью этого плагина мы можем получить числовое значение цвета. Цвет выбирается из заданного набора цветов.

2. Плагин Evol – ColorPicker

Сайт плагина: “evoluteur.github.io/colorpicker/”
GitHub ссылка: “github.com/evoluteur/colorpicker”

Дизайн данного плагина выбора цвета похож на Microsoft Office 2010 Color picker. Главное преимущество этого плагна является поддержка прозрачного цвета.

3. Плагин JS Color – Javascript Web Color Picker

Сайт плагина: “jscolor.com/”

Плагин обладает супер легкой установкой (в 2-е строчки). Механизм выбора цвета немного отличается – здесь мы вводим код, чтобы увидеть формирование цвета и выбрать нужное его сочетание.

4. Плагин Jquery Color Palette Picker

Сайт плагина: “htmlpreview.github.io/?https://raw.githubusercontent.com/carloscabo/jquery-palette-color-picker/master/demo.html”
GitHub ссылка: “github.com/carloscabo/jquery-palette-color-picker”

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

5. Плагин Farbtastic Color Picker

Сайт плагина: “acko.net/blog/farbtastic-jquery-color-picker-plug-in/”

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

6. Плагин Color Picker Jquery Plugin

Сайт плагина: “eyecon.ro/colorpicker/”

Интерфейс выбора цвета похож на интерфейс программы Adobe Photoshop. Как только мы выбираем цвет – коды цвета отображаются в нижнем поле.
Дизайн интерфейса стильный и простой.

7. Плагин Pick-a-color for Twitter Bootstrap

Сайт плагина: “lauren.github.io/pick-a-color/”
GitHub ссылка: “github.com/lauren/pick-a-color”

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

8. Плагин ColorJoe – Scaleable Color Picker

Сайт плагина: “bebraw.github.io/colorjoe/”
GitHub ссылка: “github.com/bebraw/colorjoe”

Выбор цвета дает значения цвета, как только мы выбираем цвет из палитры. Четыре типа выбора цвета доступны здесь. Мы обычно используем первый Выбор цвета one-RGB, так как весь цвет, который мы используем, – это комбинированная форма цвета RGB.

9. Плагин FlexiColor Picker

Сайт плагина: “daviddurman.com/flexi-color-picker/”
GitHub ссылка: “github.com/DavidDurman/FlexiColorPicker”

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

10. Плагин Photoshop-like Javascript Color Picker

Сайт плагина: “johndyer.name/photoshop-like-javascript-color-picker/”
Демонстрационная ссылка: “johndyer.name/lab/colorpicker/”

Интерфейс аналогичен интерфейсу Adobe Photoshop. При выборе цвета мы видим значения для всех цветов: красный, зеленый и синий, кроме того, в низу отображается общий цветовой код.

11. Плагин Simple Jquery Color Picker

Сайт плагина: “plnkr.co/edit/VVclW0?p=preview”
GitHub ссылка: “github.com/tkrotoff/jquery-simplecolorpicker”

Здесь представлены различные типы выбора цвета на веб-странице. Мы можем выбрать конкретный тип из представленных вариантов и использовать его на своем сайте.

12. Плагин Jquery Color Pickers

Сайт плагина: “vanderlee.com/martijn/?page_id=314”
Демонстрационная ссылка: “vanderlee.github.io/colorpicker/”

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

На этом всё! Красивых Вам плагинов!