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:
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:
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:
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).
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" style="background-color: rgb(237, 0, 47); ">
<img class="dot" id="csd3-dots" src="/img/e.png" style="left: 101px; top: 60px; ">
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