20 Best jQuery Color Pickers

For every design, a web designer usually starts with a color and needs the variations of that color for hover, borders, gradients, etc. while designing/styling an element. If you want to add color picker interface to your website or application and don’t know where to start from then these jQuery Color Pickers might help you out. Following jQuery Color Pickers are easy to use and help your website users to pick a right color combination for the project they want to use for.

Following jQuery Color Pickers are packed with tons of features and tutorials for easy use.

Below you will find Top 20 jQuery Color Pickers.

1. TinyColorPicker

tiny jQuery color picker
Tiny jQuery colorPicker is a mobile first, tiny foot print, fast, scalable, flexible and pluggable color picker.

It supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks and a clean and rich API and model for developers to write plugins.
Demo & Download

2. xcolor

xcolor
xcolor jQuery plugin implements an extensive color parser and a feature full set of color-manipulation methods. There is also an animate() extension to smooth CSS colors. The color value can also be passed in different color models: RGB, HSV/HSB,HSL and their adequate alpha extensions.
Demo & Download

3. Evol-colorpicker

evol-colorpicker
evol-colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline or as a popup bound to a text box. It comes with several color palettes, can track selection history and supports “transparent” color. It is a full jQuery UI widget, supporting various configurations and themes.
Demo & Download

4. Picker

Picker
Picker is a simple, easy to use, versatile and customizable JavaScript colour picker.
Demo & Download

5. jQuery Pallet Color Picker

Colorpicker from palette
It is JS component to pick colors from a predefined / restricted palette. The name attribute is used to bind the color picker to the input, so its recommended to be unique if you have several inputs with the same name, all of them will change simultaneously when user picks a color.
Demo & Download

6. Colorify.js

Colorify.js
Colorify is a script written in Javascript, that allows you to extract colors from images, and manipulates them. From a simple plain color, based on the dominant color, to a beautiful gradient based on the image edges colors, colorify.js will spice up your designs!
Demo & Download

7. Colpick

colpick
colpick is a simple Photoshop-style color picker jQuery plugin. Its interface is familiar for most users and it’s also very lightweight loading less than 30 KB to the browser. It is lightweight (28kb) works and looks nice even on IE7, comes with easy and intuitive interface and extremely easy to implement.
Demo & Download

8. ColorPanel

colorpanel
It is a simple jQuery plugin to switch css stylesheet skin theme on your template demo. The plugin targeted people who sells their templates with multiple color skin choices. It will be quite easy to configure the color codes with css files.
Demo & Download

9. dynamicColorPage

dynamiccolorpage
dynamicColorChange is a small jQuery plugin to give your users the opportunity to style your page as they want. All you have to do, is, to define a couple of selectable colors and include a button with the class “color_changer-toggle” to toggle the color changer.
Demo & Download

10. jQuery Color Picker

jquery color picker
This minimal plugin allows you to easily and simple to display a color picker on your website. You can easily just copy and paste the one liner code, or get into some more of the detailed configuration.

It replaces all colors by your own favourite color, custom colors append to color list, insert hex color code directly and external JSON supported.
Demo & Download

11. Bootstrap Colorpicker

bootstrap colorpicker
Colorpicker plugin for Twitter Bootstrap, it basically adds a color picker to a field or any other element, it can be used as a component, alpha picker and works in multiple formats like hex, rgb, rgba, hsl hsla.
Demo & Download

12. jQuery Colorpicker in jQuery UI Style

jQuery.colorpicker
jQuery colorpicker with themeroller styling, RGB, HSL, CMYK and L*A*B support. It has standard look & feel, configurable layout and works as a popup or inline.
Demo & Download

13. Tiny Colorpicker

tinycolorpicker
Tiny Colorpicker is a crossbrowser lib that creates a color picker (form) input. Its a easy way to add color pickers to your forms or user interface.

It comes in 2 flavours as a vanilla JavaScript microlib and as a jQuery plugin. Browser support differs between the jQuery plugin and the plain JavaScript microlib. Specifically, the plain JavaScript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.
Demo & Download

14. Pick-a-Color

pick a color
Pick-a-Color is designed to be easy for anyone to use. The interface is based on Twitter Bootstrap styles so it looks lovely with the styles of almost any site. Accepts HEX, RGB, HSL, HSV, HSVA, and names, thanks to Brian Grinstead’s amazing Tiny Color.

It also tested in Chrome (Mac/PC/iOS), Safari (Mac/iOS), IE 8+, Firefox (Mac/PC), and Opera (Mac/PC).
Demo & Download

15. Chromoselector Color Picker

chromoselector
The chromoselector color picker is a jQuery plugin that uses the canvas API as a rendering engine. It provides an easy way to add color pickers to forms on your pages, thus allowing users to select colors in many formats in a user-friendly fashion. Currently supported color formats are RGB, HEX, HSL and CMYK (plus alpha, if necessary).
Demo & Download

16. jQuery Simple Color Picker

jquery simple color picker
Yet another jQuery color picker. This plugin is unobtrusive and integrates well with Twitter Bootstrap (it works just fine without). The source code only requires jQuery and is about 200 lines of JavaScript and 100 lines of CSS.
Demo & Download

17. jColor

jcolor
This jQuery plugin provides a zero-configuration color picker, compatible with all modern browsers. It lets the user select a color, either in the intuitive HSL (hue, saturation, lightness) color space or in the classic RGB (red, green, blue).
Demo & Download

18. Colorjoe

colorjoe
Unlike many other colorpickers out there, colorjoe is truly scaleable. It is based on CSS and does not depend on external images. As a result, you can tweak its size to fit your purposes. It supports touch and AMD module definition as well.

colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you’ll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts.
Demo & Download

19. Farbtastic Color Picker

farbtastic color picker
Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.

Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.
Demo & Download

20. jQuery Gradient Creator

jQuery Gradient Creator
jQuery Gradient Creator is a jQuery plugin that allows you to add gradient generators in your web apps and sites. Smart and fully cutomizable, it is suitable for any type of use : CSS generators, HTML5 canvas applications, and live usages.
Demo & Download

Read Also —
15 Best jQuery Syntax Highlighters

13 jQuery Plugins for Creating Flipbook Effects

30 Best jQuery Map Plugins for Your Next Project

Final Words

For every design, we probably think which colors to use as colors are one of the most important elements in visual communication. You just witnessed some of the best jQuery Color Picker Plugins which you can use for your projects to provide color picker functionality to your website users.

20 Best jQuery Color Pickers
5 (100%) 7 votes

Leave a Reply