Сегодня у нас есть несколько инструментов для выбора и определения цвета, выполненных на JavaScript. Так называемые Color Picker-ы используется в веб-приложениях во многих случаях, когда пользователю нужно сделать выбор из цветовой палитры. Самостоятельное написание палитры цветов – это долгий процесс, которого можно избежать, используя готовые варианты. Мы подобрали для вас готовые модули,скрипты и библиотеки написанные на Javascript, которые вы можете легко использовать на своих веб-сайтах или при разработке.
Эти библиотеки просты в использовании и хорошо документированы, каждая из них также служит разным целям.
jscolor.js — это веб-подборщик цветов с непрозрачностью (альфа-канал) и настраиваемой палитрой.
Его основные преимущества:
Jscolor.js — это полностью самодостаточная библиотека JavaScript, состоящая только из одного файла ванильного JavaScript. Ей не нужны никакие фреймворки (jQuery, Dojo, MooTools и т. д.), но она, безусловно, может сосуществовать вместе с ними. Библиотека поддерживает все современные браузеры.
Гибко настраиваемый jscolor предоставляет множество вариантов конфигурации. Если вам нужно изменить размер или цвета средства выбора цвета или присоединить функцию к его событию onchange, конфигурацию библиотеки можно точно настроить для вашего веб-проекта.
Благодаря встроенной поддержке сенсорных событий, jscolor спроектирована таким образом, чтобы её было легко использовать на смартфонах или планшетах.
Если вам нужен быстрый и небольшой 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 и так далее).
FlexiColorPicker основан на цветовой модели HSV. Таким образом, единственными двумя частями палитры цветов являются ползунок для выбора значения оттенка и палитра для выбора насыщенности. И ползунок, и средство выбора являются элементами HTML (обычно <div>), которые служат оболочкой для прямоугольников градиента SVG / VML. Вы можете полностью настраивать внешний вид панели выбора цвета, изменять её размеры и отображение.
Функции:
Данная библиотека написана на JavaScript. Huebee создаёт палитры цветов удобные для пользователей и отвечающие их запросам. Huebee отображает фиксированный набор цветов, поэтому пользователи сразу видят нужные цвета, что позволяет им быстрее принимать решение.
Автор создал Huebee, когда работал над стилизацией логотипа в одном из своих проектов. Он добавил функцию, позволяющую выбирать собственные цвета для логотипа. Глядя на другие палитры цветов, он не мог найти то, что хотел.
Большинство палитр цветов слишком сложно и предназначены для отображения и выбора из почти 17 миллионов доступных цветов. Но обычному пользователю не всегда нужна такая обширная палитра и тут вам на помощь придет Huebee, которая показывает ограниченный набор цветов, чтобы их было легче понять.
MiniColors — это мощная, элегантная, анимированная и полностью настраиваемая палитра цветов на основе jQuery для вашей веб-страницы / веб-приложения.
Основные особенности:
Iro.js – это красивая палитра цветов. Она полностью выполнена на JavaScript и использует HSV при реализации палитры цветов. Круговая палитра сделана на HTML5 и поддерживает ввод с сенсорных экранов.
Также предоставляет методы API, которые позволяют устанавливать, обновлять и преобразовывать цвета.
Основной функционал:
React Color — это набор средств выбора цвета из таких инструментов, как Photoshop, Chrome, Sketch, Github, Material Design, Twitter и других. На выбор доступно 13 палитр цветов. Используя данную цветовую палитру в JavaScript, веб-дизайнеры также могут рассчитывать на создание своих собственных цветовых диапазонов, используя существующие компоненты.
Установка может быть произведена установкой react-color с помощью NPM. Одновременно компоненты цвета могут быть включены в данную библиотеку с помощью импорта некоторого средства выбора цвета из react-color в верхней части компонента, а затем использования его в функции рендеринга.
Evol-colorpicker — это адаптируемая библиотека JavaScript для возможностей выбора цвета, которую можно использовать в оперативном режиме. Она может обеспечить поддержку прозрачного цвета, отслеживание истории цветов и выбор цветовой палитры.
Поскольку данное средство выбора цвета представляет собой полноценный виджет пользовательского интерфейса, она также известна тем, что доступна с конфигурациями и темами, которые можно легко настроить в соответствии с вашими предпочтениями.
Farbtastic – является модулем для jQuery. С его помощью вы можете добавлять в нужные места вашей страницы палитры для выбора цветов. Каждая из таких палитр является отдельным виджетом, который можно связать с различными элементами, и которая будет обновляться в зависимости от изменения значения элемента.
Farbtastic 2 использует элемент холста html5 для рендеринга градиента насыщенности / яркости внутри круга оттенков.
Colorjoe — это хорошо масштабируемая палитра цветов. Она предлагает вам общую простоту мгновенного выбора цвета. С помощью этого инструмента вы можете получить RGB, а также другие цветовые коды или значения, выбрав и щелкнув доступную область выбора цвета.
Масштабируемость, предлагаемая colorjoe, чрезвычайно функциональна. Это потому, что он не зависит от вечных изображений и основан на CSS. Следовательно, вы можете изменить размер colorjoe, используя CSS в соответствии с индивидуальными потребностями.
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
Получение первого заказа на фрилансе может быть вызовом, особенно для новичков, которые еще не имеют…
Разработка сайтов и веб-приложений стала в наше время неизбежной потребностью. Тем не менее, существует несколько способов…
Компании и специалисты по маркетингу тратят много времени и денег на изучение языка поисковых систем,…
Адаптивные изображения - это набор методов, используемых для загрузки правильного изображения в зависимости от разрешения…
Политика конфиденциальности - это документ, в котором подробно описывается, как компания или организация обрабатывает любую…
В современном мире много специалистов занятых поддержанием работы сайтов, и довольно часто многих из них…