Color Picker

Best Color Picker Widget

  • Published on Monday, 21 October 2013 04:06
  • Hits: 3326
User Rating:  / 1

Hey, if you you need to add a color picker widget to your website then today is definitely your day as I have here all you might need.

You know, as I do, that everything, even the software you use daily, will be in the cloud very soon. ...Not as soon as Google wants for its Chrome OS as we still need to wait about 3 years for that to happen, but for sure it will happen.

If that is about to happen, why don't you get your hands in developing web based software Right NOW??.

What about image processing software?, what about an online store where you can select the colour of your clothes?, what about a site where kids can draw??, ..what about a graphical design software??, ....yeah, definitely you need a Color picker for any image or text manipulation application that you may think about.

Here you have the best 4:


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.

The set up is quite easy, although the number of customization capabilities are very, very close to ....0:

Include farbtastic.js and farbtastic.css in your HTML:

<script type="text/javascript" src="/farbtastic.js"></script>
<link rel="stylesheet" href="/farbtastic.css" type="text/css" />

Add a placeholder div and a text field to your HTML, and give each an ID:

<form><input type="text" id="color" name="color" value="#123456" /></form>
<div id="colorpicker"></div>

Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:

<script type="text/javascript">
  $(document).ready(function() {

Ref Color Picker

It surely does the job although we can surely say that the developers didn't spend many time, nor money, in the UX of these ASP widget (Yeah, it will only work in ASP server).

Get it here


Color Scheme Designer 3

This is not just a widget but a Complete Color Scheme Designer, but as many times i have mentioned you can always learn a lot from a site and this one has a really well designed html, Css and html combination. Very easy to read

..for example the the Scheme Saturation/Brightness box has just this html:

<div id="csd3-saturation-cover">
<div id="csd3-saturation" style="background-color: rgb(237, 0, 47); ">
<div class="slider">
<img class="dot" id="csd3-dots" src="/img/e.png" style="left: 101px; top: 60px; ">

Get it here


Color Picker

I call it simple. That is what this code bring to us, simplicity. But with some special features:

  • Get colors selection into favorites 10 possible favorites list.
  • Select colors which match with the selected one

Get it here

Music You like..

IT News to be aware of ..

Most Visited...

QR Codes: The best 9 QR Code Generators


QR Codes: The best 9 QR Code Generators

Last week we talked a little bit about how the QR Codes are becoming very, very popular and a bit of its history which is always good to know :)...

Read more

AngularJS, No more Dom Manipulation


AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more

Famous, the most beautiful javascript Li…


Famous, the most beautiful javascript Library

Yes, now there a couple of ways of becoming famous, ..the first one is following your dreams and becoming the best in class developer with a great idea, or use...

Read more