What is Color Picker?
Color Picker tool is a DHTML application for choosing color for some elements of your page.
The main aims of color tool are color management, creating color schemes, picking colors, and more.
Many such tools exist on the world wide web, and generally feature a color harmonization interface, a color picker,
RGB and HSL conversion and manipulation, a collection of saved schemes, and other similar characteristics.
Web masters, designers, developers, and professionals that work with other types of screen or print media use
these tools in their work.
Tool what present on this page is just color picker for online applications like myspace profile editors and so on.
HTML Color Picker uses a reduced size version of Prototype Javascript library, producing a smaller size, extremely functional and fast loading in browser. The total size of the application is about 35KB.
Tool is free for use and distribution and it doesn't require developer permission or approval to use.
Feel free to contact me by e-mail address 
- SEO Конкурс: антимаулнетизм на maulnet.sevasjack.info
Types of HTML Color Picker
Current tool can be present in four types:
| Cube color picker | Continious color picker | Rainbow picker | Grayscale picker |
|---|---|---|---|
 |
 |
 |
 |
How can I use DHTML Color Picker Tool?
Usage of javascript color tool is simple. Follow the steps below and enjoy!
Include CSS stylesheets and javascript files into your document and create Picker object whenever after page loading:
Call it whenever you need
Color Picker Methods
initialize(options)
Initialization function. Object Constructor Example Creating picker objectvar Picker = new ColorPicker();
live example | comments | up
show(element, selector, pickerType)
Show color picker beside element Parameter object element HTML element (or its ID) where need to show color picker string selector This parameter point for what style selector need to change color. Can be one of the following: color, border, outline, background. Default value is background string pickerType Type of color picker: cube, continious, rainbow or grayscale Example Show rainbow color picker when click span element<span onclick="picker.show(this, 'color', 'rainbow');"></span>
live example | comments | up
hide()
Hide color picker Example Hide picker when some color was choosed
function onPickerClick(color) {
$('stroke_color').style.backgroundColor = color;
$('strokecolor').value = color;
picker.hide();
}
picker.setCallback(onPickerClick);
live example | comments | up
setCallback(callback)
Set callback for color picker Parameter function callback Function what will called when user click some color on the picker Example
function onPickerClick(color) {
$('stroke_color').style.backgroundColor = color;
$('strokecolor').value = color;
picker.hide();
}
picker.setCallback(onPickerClick);
live example | comments | up
Download DHTML Color Picker Tool
Download the full package of DHTML Color Picker.
Please send me your feedback on this tool.
You can leave any comments you have below on the comment area.
Thank you.
DHTML Color Picker Example
Users comments about Color Picker
Leave your comment
Amazing script! I have it working beautifully, but I need 5 color selectors on my webpage. How can I set this up to use it on 5 separate instances?
Hi Benjamin!
Thanks for your comment. I've sent solution to your email address. Will fix my picker soon and upload updates in public.
Regards,
Sergey
Sergey,
Can you also send me the solution for multiple instances on the same page? Looks great!
Thanks,
Steve
I'd also love to know how to use this several times in one page - great script so far, I love it =)
This is one solution that i found for multiple instances on the same page. I hope it helps.
Thanks.
var picker = new ColorPicker();
var tag = 'custom_color';
function onPickerClick(color) {
$('picker_'+tag).style.backgroundColor = color;
$(tag).value = color;
picker.hide();
}
picker.setCallback(onPickerClick);
change
change
change
Sorry for the previous post. So .. here it is again
var picker = new ColorPicker();
var tag = 'custom_color';
function onPickerClick(color) {
$('picker_'+tag).style.backgroundColor = color;
$(tag).value = color;
picker.hide();
}
picker.setCallback(onPickerClick);
change
change
change
are you kidding us? the last two posts are exactly the same , anyway something wrong with this color picker, can you put a full working example anywhere please?
Could you please post an sample HTML file with the full package download?
I tried using multiples ones how you said and it doesn't seem to work. Did you actually try it?
Great script!
Here's my solution for having multiple color pickers on one page. Let me know what you think. (It works for me!)
Update cpicker.js
After landing: null, (around line 8)
Add caller: null,
Change these three lines...
show: function(element, selector, pickerType) {
var element = $(element);
var landing = $(this.options.pickerID);
To be these four lines...
show: function(elementin, selector, pickerType) {
var element = $(elementin);
var landing = $(this.options.pickerID);
this.caller=elementin;
Around line 345 change
this.callback(this.textValue.innerHTML);
To to be
this.callback(this.textValue.innerHTML, this.caller);
In your html page...
Add div tags for picking colors
Lastly, use call back function like
var picker = new ColorPicker();
function onPickerClick(color, caller) {
if (caller=='colorselector') {
$('colorselector').style.backgroundColor = color;
$('color_selector').value = color;
}
else if (caller=='framecolorselector') {
$('framecolorselector').style.borderColor = color;
$('frame_color_selector').value = color;
}
picker.hide();
}
picker.setCallback(onPickerClick);
Here's the div tags for the above post...(hopefully)
<div class="backgroundcolorselect" id="colorselector" onclick="picker.show('colorselector', 'background')"></div>
<div class="framecolorselect" id="framecolorselector" onclick="picker.show('framecolorselector', 'border')"></div>
Exactly what I was looking for! Thanks a lot!
Shawn, same for you! Works perfectly! Thanks!
Very nice color picker! However, it contains a notable bug:
On the continuous and cube view, the colors on the left side (grey shades, red, green, blue, yellow, etc) turn up as various shades of red, which is obviously incorrect.
It would be great if it were fixed. I am going to try and create a workaround for my implementation.
Thanks!
The fixed colors bug above lies in a problem in the regex in the RGB: function. Instead of fixing the regex, I changed the fixed values to the "rgb(r,g,b)" form and adjusted line that creates the fixed value pixels to:
var pixel = this.getPixel(((i - 1) % 3 == 0) ? this.fixed_values[Math.round((i - 2) / 3)] : 'rgb(0,0,0)');
I tried to run your code. I think prototype_reduced.js file is missing in the full package.
hey Sean, thanks for the fix. The only thing I ask is could you explain in more detail what to replace/how to fix it for morons like me? :)
I'd appreciate it
Thanks
Great looking picker! Terrible instructions. Missing file in download.
*Bug:
If we change the zoom of the page with ctrl + mousescroll,
we get a weird display when we open the colorpicker.
send by may address moor attract color
2 Sergey Koksharov
а есть ли решение color picker'а использующее jquery а не prototype?