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 Email Address

Types of HTML Color Picker

Current tool can be present in four types:

Cube color picker Continious color picker Rainbow picker Grayscale picker
cube color picker continuous color picker rainbow color picker grayscale color 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:
1
<link rel="stylesheet" type="text/css" href="/css/cpicker.css" /> <script type="text/javascript" src="/js/prototype_reduced.js"></script> <script type="text/javascript" src="/js/cpicker.js"></script> <script type="text/javascript"> var picker = new ColorPicker(); function onPickerClick(color) { $('stroke_color').style.backgroundColor = color; $('strokecolor').value = color; picker.hide(); } picker.setCallback(onPickerClick); </script>
Call it whenever you need
2
... HTML Document ... <div id="stroke_color" style="background-color:#000000;" onclick="picker.show(this, 'background-color')"></div> <input type="hidden" name="strokecolor" value="#000000" id="strokecolor" /> ... HTML Document ...

Color Picker Methods
API
initialize(options)
Initialization function. Object Constructor Example Creating picker object var 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

Change text background color: click to change

See live example on myspace glitter text generator

 

Users comments about Color Picker

1. Benjamin (Jun, 22 2008 at 11:39 AM)


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?

2. Sergey Koksharov (Jun, 26 2008 at 12:32 AM)


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

3. Steve (Jun, 26 2008 at 10:37 PM)


Sergey,
Can you also send me the solution for multiple instances on the same page? Looks great!

Thanks,
Steve

4. Blair (Jun, 27 2008 at 06:31 AM)


I'd also love to know how to use this several times in one page - great script so far, I love it =)

5. Cosmin (Jun, 30 2008 at 01:42 AM)


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

6. Cosmin (Jun, 30 2008 at 01:50 AM)


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

7. argyris (Jul, 02 2008 at 12:13 PM)


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?

8. Chris (Jul, 15 2008 at 02:53 AM)


Could you please post an sample HTML file with the full package download?

9. Paul S (Sep, 06 2008 at 09:16 PM)


I tried using multiples ones how you said and it doesn't seem to work. Did you actually try it?


 

Leave your comment