Visuale Labs - Multitouch Computing. Farbtastic: jQuery color picker plug-in | Steven Wittens - Acko. Basic Usage 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() { $('#colorpicker').farbtastic('#color'); }); </script> See demo1.html and demo2.html for an example (jquery.js is not included!).
Styling The color picker is a block-level element and is 195x195 pixels large. You can control the position by styling your placeholder (e.g. floating it). Note that the black/white gradients inside wheel.png and mask.png were generated programmatically and cannot be recreated easily in an image editing program. CSS Drive: Image to Colors Palette Generator. Quick Highlighter: A simple to use code syntax highlighter.