10 Best Color Picker Plugins In jQuery And Vanilla JavaScript

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.

Table of contents:

• jQuery Color Picker Plugins
• Vanilla JavaScript Color Picker Plugins

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.

[Demo] [Download]

---

Beautiful jQuery Color Picker For Bootstrap - Pick-a-Color

Pick-a-Color is a cool and easy-to-use jQuery plugin that helps you create beautiful and powerful color picker using Twitter's bootstrap framework.

[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.

[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.

[Demo] [Download]

---

Customizable and Touch-Friendly jQuery Color Picker Plugin - spectrum

spectrum is a powerful and high customizable Color Picker Plugin built with jQuery, no Flash and images required.

[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.

[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.

[Demo] [Download]

---

Canvas Based HTML5 HSV Color Picker Component

A simple and standalone JavaScript library used to render canvas based, mobile-friendly HSV color pickers in the document.

[Demo] [Download]

---

Tiny JavaScript Color Picker Library – piklor.js

piklor.js is a small, standalone JavaScript library that lets you select a color from a color palette and apply it to given elements.

[Demo] [Download]

---

Minimal HSLA Color picker With Pure JavaScript

A super simple, interactive HSLA (HUE, SATURATION, LIGHT and ALPHA) color picker with slider controls implemented in pure JavaScript.

[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.