10 Best Color Picker Plugins In JavaScript (2023 Update)
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
Color picker is an essential element in a web design / web development workflow. You don’t want to stare at your screen for hours trying to pick color from a palette, do you?
In this post, we're going to introduce you to 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.
With these color picker plugins you can quickly and easily select desired color from your web page. Each plugin has a distinctive feature which may make them unique for you. Hope this list will help you to save some time!
Originally Published July 26 2019, updated Feb 01 2023
Table of contents:
jQuery Color Picker Plugins:
User-friendly Color Picker With Preset Colors - huebee.js
A highly-customizable, user-friendly color picker that allows the user to select a color from a predefined/restricted palette.
Lightweight jQuery Color Picker For Web App - Colpick Color Picker
A simple and lightweight jQuery plugin that enables you to implements a photoshop-style color picker slider on your web app. It currently supports RGB, HSB and HEX color formats.
Microsoft Office Style Color Picker Plugin - evol.colorpicker
A jQuery plugin used to create Microsoft Office style inline or popup color pickers that supports various configurations and themes based on jQuery UI.
Retina Ready jQuery Color Picker with CSS3 Gradients - Iris
An awesome jQuery plugin that makes use of jQuery UI and CSS3 gradients to embed a color picker with HiDPI display support within an input field. The plugin will popup a color selection dialog when a desired input field is focused/clicked.
Tiny HTML5 / jQuery Color Picker Plugin - Palette Color Picker
A small jQuery plugin for creating a tiny color picker for input fields that allows the user to pick a color from a palette selector with predefined colors.
Vanilla JS Color Picker Plugins:
Elegant Mobile-compatible Color Picker Component – pickr
The pickr JavaScript library helps you create an elegant, customizable, touch-enabled color picker for your app.
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.
colorjoe
Scaleable color picker with touch and AMD support (MIT).
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.
vanilla-picker
A vanilla JavaScript color picker with alpha channel support that can be attached to any element.
Conclusion:
Looking for more jQuery plugins or JavaScript libraries to create awesome Color Picker on the web & mobile? See jQuery Color Picker and JavaScript Color Picker sections for more details.
