Javascript

11 Javascript Color Pickers Plugins

Written by Kevin Liew on 06 Dec 2011
76,234 Views • Shares
12 comments

Introduction

It was pretty hard to find a good color picker a few years back, just recently I have seen many of Javascript color picker plugins released so I decided to make a compilation of what I can find. In this post, I found 11 Javascript Color Picker Plugins. Some of them are really complicated whereas other can be really simple, so I pretty sure one of them will meet your needs.

  • ExColor Javascript Color Picker - ExColorExColor is a jQuery plugin for enabling users to select colors from a Photoshop-like color picker. It is attached to input fields and can be activated by simply calling a single-line function.
  • JScolor Javascript Color Picker - JSColorJSColor is a simple and very easy-to-implement JavaScript library that transforms any given input into a color picker. The picker is a hidden layer, doesn't use any pop-ups and can be positioned on any side of the input field.
  • Advanced Javascript ColorPicker Javascript Color Picker - Advanced ColorPickerColorPicker is an advanced and highly customizable JavaScript color picker that doesn't rely on any JS frameworks. It can display the entire color palette (~16.78 mil. colors) in 6 different color modes.
  • Farbtastic Javascript Color Picker - FarbtasticFarbtastic is a jQuery color picker plugin for easily adding a color picker into any webpage. The picker is linked to an existing element (e.g. a text field) and updates the value of the element when a color is selected.
  • Javascript Color Picker Javascript Color PickerThis JavaScript color picker has HSB and RGB options, uses Prototype and compatible with all major browsers.
  • mooRainbox Javascript Color Picker - mooRainbowmooRainbow is an easy to integrate JavaScript color picker built with mootools. This color picker can be attached to any element in the DOM. A click event would automatically be attached to that element and simply clicking on it you will be able to show or hide mooRainbow.
  • ColorPicker Javascript Color PickerA simple component to select color in the same way you select color in Adobe Photoshop
  • jPicker Javascript Color Picker - jPickerjPicker is a fast, lightweight jQuery plugin for including an advanced color picker in your web projects. It has been painstakenly ported from John Dyers' awesome work on his picker using the Prototype framework.
  • SimpleColor Javascript Color Picker - SimpleColorjQuery Simple Color is a very simple color-picker plugin that displays a square grid of selectable colors.
  • Really Simple Color Picker Javascript Color Picker - Really Simple ColorpickerA color picker with predefined color palette, it's simple and straight forward.
  • Flexi Javascript Color Picker - FlexiFlexi is a lightweight (4.3kb) color picker that doesn't use any images (thanks to SVG/VML), CSS or 1px hacks but only JavaScript. It is a standalone script that doesn't require any JavaScript frameworks and can pass the color selected in hexadecimal, HSV and RGB formats.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

12 comments
Ankur 5 years ago
Pretty useful.
I am actually looking for app that could get me color HEX from anything I pick on desktop, do You have any idea about any such app ?
Reply
Kevin Liew Admin 5 years ago
Hi Ankur, I use the old fashion way: screencap, then pick the color from photoshop :) doesn't bother me as my photoshop is always running.

Anyway, I found these solutions seem to be able to meet your needs: http://www.makeuseof.com/tag/3-free-color-picking-tools-choose-colors-desktop/
Reply
Kevin Liew Admin 5 years ago
and the mac version: http://colorsnapper.com/
Reply
Ankur 5 years ago
Thanks so much for the app and links. Hopefully , it would solve my problem :)
Reply
barbie oyunlari 5 years ago
I think very usefull.
Reply
milo 5 years ago
Nice collection. Another javascript versions: <a href='http://www.menucool.com/color-picker'>Menucool Color Picker</a> offers two types of color picker that are pure javascript (only 3kb). They are Free and easy-to-use. Menucool Custom Color Picker allows you to customize your own colors and has event handlers to respond to a color select.
Reply
kc 5 years ago
Yep nice list, I did find this one also that I considered as the best I've seen : http://com.web-look.fr/jlcolorfont
Ok it's not free but the price is very low and i love the honeycomb style !
Reply
Blair 4 years ago
Handy and free. Bookmarked!

I recommend it again to all the other designers out there.
http://www.menucool.com/color-picker
Reply
Linda Singer 4 years ago
I was hoping to find some code that I could download and drop in to my programming?
Reply
Georg 4 years ago
that is a list, one can work with. Thank you very much!
Reply
Johan Rönnblom 9 months ago
I needed a user-resizable color picker so I wrote an MIT-licensed 8k color wheel. Get it from http://divvil.com/colorwheel.html
Reply
Taufik Nurrohman 5 months ago
This one is pure JavaScript and hook-able &rarr; https://github.com/tovic/color-picker
Reply