10 Best Color Picker Plugins In jQuery And Vanilla JavaScript

by jQueryScript,

What Is Color Picker?

Color picker is a UI component for mobile & web apps that allow the user to select a color from the palette and get the color code in RGB, HEX, HSL, HSV, or CMYK formats.

The Best Color Picker

In this post, we're going to introduce you the 10 best (top downloaded), open source jQuery and Pure (Vanilla) JavaScript plugins to quickly and easily create a color picker for your web application. Have fun.

Originally Published July 26 2019, updated Mar 16 2021

Table of contents:

jQuery Color Picker Plugins:

jQuery Colorpicker Plugin For Bootstrap

Colorpicker Plugin For Bootstrap 4 and Bootstrap 3 frameworks that allow you to add a color picker to an input field field or to any other element with multiple formats: hex, rgb, rgba, hsl, hsla.

jQuery Colorpicker Plugin For Bootstrap

[Demo] [Download]


Powerful Color Picker Plugin For jQuery - MiniColors

MiniColors is a powerful, elegant, animated, and fully customizable jQuery based color picker for your modern web page/web application.

Powerful Color Picker Plugin For jQuery - MiniColors

[Demo] [Download]


Flat HTML5 Palette Color Picker For jQuery - colorPick.js

colorPick.js is a simple, plain, flat style jQuery color picker plugin which allows the user to select colors from a predefined palette with support for recent selected colors.

Flat HTML5 Palette Color Picker For jQuery - colorPick.js

[Demo] [Download]


Simple Color Picker For Bootstrap 4 - colorPalettePicker.js

The colorPalettePicker.js jQuery plugin makes uses of Bootstrap 4 dropdown component to create a simple color picker on your web app.

Simple Color Picker For Bootstrap 4 - colorPalettePicker.js

[Demo] [Download]


Basic Simple Color Picker Plugin For jQuery - bcPicker

A basic, simple, easy, cross-browser, HEX/RGB color picker that works with dynamically added elements. Your users are able to select a color from a palette popup.

Basic Simple Color Picker Plugin For jQuery - bcPicker

[Demo] [Download]


Vanilla JS Color Picker Plugins:

Sleek HTML5 / Javascript Color Picker – iro.js

iro.js is a sleek, HSV color based JavaScript color picker for generating a pretty, HTML5 canvas based color wheel UI with touch support.

Sleek HTML5 / Javascript Color Picker – iro.js

[Demo] [Download]


Pick A Color From An Image Using Canvas and Javascript

A simple pure javascript solution to select a color and get the Html color code (RGB or HEX) as you click on an image, similar to the color picker tool in Photoshop.

Pick A Color From An Image Using Canvas and Javascript

[Demo] [Download]


Powerful Color Picker Component With Pure JavaScript – color-picker.js

color-picker.js is a pure JavaScript library for creating a color picker component with support for touch events and RGB/HEX/HSV color formats. You will find more examples in the zip.

Powerful Color Picker Component With Pure JavaScript – color-picker.js

[Demo] [Download]


vanilla-picker

A vanilla JavaScript color picker with alpha channel support that can be attached to any element.

Vanilla JS Color Picker With Alpha Channel – vanilla-picker

[Demo] [Download]


Colorpicker.Pro

A powerful, professional color picker JavaScript library to create basic Color Picker, Multi-Spectral Color Picker, Material Color Picker, Palette Color Picker, Tab Palette Color Picker on the app.

Powerful Color Picker Components In Pure JavaScript – Colorpicker.Pro

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Color Picker on the web & mobile? Check out the jQuery Color Picker and JavaScript Color Picker sections.