Farbtastic Color Picker
Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.
Click and drag over the selector to try it out.
- Include farbtastic.js and farbtastic.css in your HTML:
<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>
- Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:
See demo1.html and demo2.html for an example (jquery.js is not included!).
The color picker is a block-level element and is 195×195195 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.