Originally published by Deven Rathore at dunebook.com

Color is part and parcel of the online world. Brands are all identified by their colors and preferred color schemes. Thank the heavens for JavaScript color picker libraries that help us the color codes of any color that we intend to use and apply on our web projects. By playing around or keying in the frequency values of the RGB (Red, Green, and Blue) mode you get your desired colors.

Table of Contents

1. ColorPicker (v. 1.0)
2. Evol- ColorPicker
3. Jscolor – Javascript Web Color Picker
4. Farbtastic Color Picker
5. Pick-a-color for Twitter Bootstrap
6. ColorJoe – Scalable Color Picker
7. FlexiColor Picker
8. PhotoShop-like JavaScript Color Picker
9. Tiny Colorpicker
10. Spectrum
11. ColorPick.js
12. Named Color Picker
Conclusion

The JavaScript color picker libraries come to the fore as they allow you to get your desired color value by simply clicking on the color provided and applying the resulting RGB values to your web projects.

1. ColorPicker (v. 1.0)

ColorPicker is a highly intuitive, convenient and lightweight JS framework independent color picking tool. With its multiple capabilities that cover color conversion and calculation, ColorPicker fully supports a bad range of colors spaces. Whatever you may need be it HSV, HSL, RGB, XYZ, HEX, LAB, CMY or CMYK, ColorPicker will deliver the results for you.

ColorPicker presents you with a color test or demo area where you can use the ColorPicker UI and test patches to get the color codes for the colors you pick out and test.

Working with ColorPicker is a breeze. You will discover that it has;

Four different UI sizes, the advanced, smaller, simple and tiny allow for both detailed expert use and simplified general color picking,
A great selection of color spaces for greater visualization RGB, HSV, and HSL,
A cursor rendering that is supportive, fast and responsive
Color comparison tools that are practical
A range of options and API allowing for non-conventional customization to suit individual needs
A design that aims at capturing all possible scenarios while presenting the best of relevant data

Visit Website

2. Evol- ColorPicker

Evol-ColorPicker is highly useful and adaptable color picker library that you can use inline or preferably as a pop that you can bind to a text box. Evol-ColorPicker pushes all the right buttons when it comes to having “transparent color support, multiple color palette selection, and color history tracker.

As a fully-fledged UI widget, it also comes with themes and configurations that you can tweak to suit your preferences.

One thing you will also note about Evol-ColorPicker is its uncanny resemblance to Microsoft’s 2010 color picker version.

To get Evol-ColorPicker you can download it from their website, fork it at GitHub, use an npm package or install it with bower.

Via GitHub git clone https://github.com/evoluteur/colorpicker

Via npm package installation npm install evol-colorpicker

Via bower installation bower install evol-colorpicker

Visit Website

3. Jscolor – Javascript Web Color Picker

With the aim of being super easy to use, jscolor is one of the web color pickers that are aimed at giving developers the smoothest of experience in installation and end use of the component.

The simplicity and ease of use hide some great things about jscolor that you shouldn’t pass you.

Jscolor is a totally self-sufficient JS library. A single JS file works colorful wonders without the need for other frameworks like MooTools, jQuery, Dojo, and the likes. Though it doesn’t depend on other frameworks, JScolor is still a good neighbor and does coexist fine with them around.

Jscolor supports all the latest browsers available, Safari, Opera, Firefox, Chrome, Internet Explorer 7 and above.

Customize jscolor to suit your web project at every level you need. You can adjust the size or color of the color picker or even append a function to the onchange event.

Touch devices have also been factored into the workings of jscolor. Jscolor supports touch events and will seamlessly work on your modern tablet or smartphone device.

Visit Website

4. Farbtastic Color Picker

Farbtastic presents you with a color picking plugin that will add a single or several color picker widgets onto your web project via JavaScript. By linking each widget to existing elements such as text fields, the element value will update automatically when a color is picked.

Insert a ready () handler to your project. The handler will initialize and then link color picker to the text field.

 //The syntax will appear as follows: < script type="text/javascript"> $(document).ready(function() { $('#colorpicker').farbtastic('#color'); }); </ script >

JsCopy

Visit Website

5. Pick-a-color for Twitter Bootstrap

Anyone can use the Pick-a-color color picker library as it was fundamentally built with the aim of being as simple and user-friendly as possible. The lovely interface that greets you is based on the Twitter Bootstrap style.

Through a simple download process, you have the color picker file that you can include in the HTML of your web project then go ahead and use it from there.

As a Pick-a-color user, you will enjoy the color picker’s memory that remembers and stores 16 colors that you have recently used.

The basic color palette presents no hassle. Lighten or darken the preset colors to meet your fancy.

The advanced palette adds some punch to your color selections by allowing you to control the hue, saturation, and spectrum so as to achieve whatever color you desire.

Pick-a-color also employs a quick, lightweight JS color converter and manipulator (Tiny Color) that allows you to work with HSV, RGB, HSVA, HSL, and other names.

The tried and tested part has been done with flying colors and it can be confidently said that Pick-a-color works great in IE 8+, Chrome (Mac/PC/iOS), Firefox (Mac/PC), Safari (Mac/iOS), and Opera (Mac/PC).

Initialize with ease by entering only one line of JS and three lines of HTML. You also don’t have to worry about jumbling up your code as the namespaced CSS and anonymous JS function won’t harm your code.

Visit Website

6. ColorJoe – Scalable Color Picker

Instantaneous color picking is what colorjoe offers. Get color RGB or other color mode values as you select and click on color selection area.

The scalability of colorjoe is on another level. This is because colorJoe does not depend on eternal images and is based on CSS. So go ahead and modify colojoe’s size using CCS to suit your needs as you enjoy the AMD module definition and touch support it also offers.

Get your installation of colorjoe;

npm i colorjoe

For a preferred standalone dist, add the following to your page; prepackaged dist/colorjoe.js and css/colorjoe.css

Alternatively, load the dependencies from src/ using AMD.

Visit Website

7. FlexiColor Picker

FlexiColorPicker is a simple color picker library that is based on the HSV color model. This color picker is simple consisting of only two sections, the slider, and picker. The picker allows you to select the saturation and values while the slider gives you the option of selecting hue values.

As you switch between the colors on the picker and slider, the background color of the web page changes to match your selection. This overall background color change helps you visually gauge the color blend balance and appeal for your web project.

Visit Website

8. PhotoShop-like JavaScript Color Picker

As its name suggests this color pickers interface looks pretty much like the one found in Adobe Photoshop. PhotoShop-like JavaScript Color Picker presents a depth of color option that is unique and unavailable other JS color pickers around. You will be gifted with a full array of HSB and RGB color options here.

Color select and pick on the left side of the color picker portion and have your color code displayed on the boxes on the right-hand side.

The JS that has been put together for this color picker consists of a slider controller, an input handler, color methods, and a ColorPicker object that packs it all together.

Visit Website

9. Tiny Colorpicker

If you are looking for color picker library that has cross-browser support then Tiny Colorpicker is the choice for you here. This JS color library comes in two versions the vanilla Javascript microlib and the jQuery plugin.

The basic Javascript microlib, however, lacks support for legacy type browsers like IE6-8. Alternatively, if you require browser support you are better placed working with the jQuery plugin.

While using Tiny Colorpicker you can expect to experience a color library that is;

easy to customize
useable inside or outside forms
supports requirejs, Node, commonjs and AMD
lightweight
supports Windows Phone, Android and IOS

Visit Website

10. Spectrum

The Spectrum color picker library was developed as a JS color picking solution that deviated from the norm of images, large plugins, and unfriendly customization options.

Interestingly this color picker is available inside the dev tools of Firefox, Chrome, and Safari and this makes it quite easy for you to pick colors for your web project.

With only two files that won’t interfere with your existing code in any way, you are well on your way with this color picker that is truly lightweight.

Even though Spectrum works 100% well without any customizations on your part you still have the option available to modify it using CSS with various options and modes available for exploration.

Visit Website

11. ColorPick.js

Another player in the colorpicking game is ColorPick.js, a minimalistic and simple jQuery plugin that was designed to sit today’s modern web.

ColorPick.js features local storage of colors that you have recently used, integration that is simple and an exquisite design that will definitely blend in with your web projects.

Visit Website

12. Named Color Picker

Named ColorPicker presents a different method of color selection. You won’t get the usual color spectrum or wheel; here you will get a fullscreen grid of colors arranged by name. Searching can be done via a dropdown list or by name.

You won’t find any duplicate names or colors in the entire color grid of 2,065 colors. The color names presented in the Named ColorPicker come courtesy of the color survey from XKCD and Resene Paints. The extra color names include those from the CSS3 spectrum that all major browsers support.

Visit Website

Conclusion

The JavaScript Color Pickers listed above are meant to help you save time and improve your efficiency as you work. With plenty of options available all you need to do is just chose one and get going.

Originally published by Deven Rathore at dunebook.com

===========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter