<link rel="Stylesheet" type="text/css" href="/a/plugins/color-pickers/wColorPicker/wColorPicker.1.2.min.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/wColorPicker/wColorPicker.1.2.min.js"></script>
<div id="wColorPicker1_holder">
<input id="wColorPicker1_input" type="text" value="" style="margin-top: 5px;"/><br/><br/>
</div>
<script type="text/javascript">
$("#wColorPicker1_holder").wColorPicker({
initColor: "#FF00FF",
onSelect: function(color){
$("#wColorPicker1_input").css("background", color).val(color);
},
onMouseover: function(color){
$("#wColorPicker1_input").css("background", color).val(color);
},
onMouseout: function(color){
$("#wColorPicker1_input").css("background", color).val(color);
}
});
</script>
1. Websanova Color Picker
This is the new and improved websanova JQuery Color Picker. It has a much nicer look and feel to it and is much more responsive. It supports multiple themes and effects out of the box. It also has a mode option for flat, hover and click with the latter creating a little palette button opens up the color picker for you. Also has other options for opacity and more.
• download & usage •
Try Now:
<link rel="Stylesheet" type="text/css" href="/a/plugins/color-pickers/wColorPicker/wColorPicker.1.2.min.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/wColorPicker/wColorPicker.1.2.min.js"></script>
<div id="wColorPicker2_1" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker2_2" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker2_3" style="float:left;margin-right:10px;"></div>
<div style="clear:both"></div>
<script type="text/javascript">
$("#wColorPicker2_1").wColorPicker({
color: "red",
mode: "hover",
showSpeed: 200,
hideSpeed: 200
});
$("#wColorPicker2_2").wColorPicker({
color: "green",
mode: "hover",
showSpeed: 400,
hideSpeed: 400
});
$("#wColorPicker2_3").wColorPicker({
color: "blue",
mode: "hover",
showSpeed: 600,
hideSpeed: 600
});
</script>
| |
<link rel="Stylesheet" type="text/css" href="/a/plugins/color-pickers/wColorPicker/wColorPicker.1.2.min.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/wColorPicker/wColorPicker.1.2.min.js"></script>
<div id="wColorPicker3_1" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker3_2" style="float:left;margin-right:10px;"></div>
<div id="wColorPicker3_3" style="float:left;margin-right:10px;"></div>
<div style="clear:both"></div>
<script type="text/javascript">
$("#wColorPicker3_1").wColorPicker({
color: "orange",
initColor: "#003366",
mode: "click",
effect: "fade",
showSpeed: 200,
hideSpeed: 200
});
$("#wColorPicker3_2").wColorPicker({
color: "cream",
initColor: "#663366",
mode: "click",
effect: "fade",
showSpeed: 400,
hideSpeed: 400
});
$("#wColorPicker3_3").wColorPicker({
color: "plum",
initColor: "#996633",
mode: "click",
effect: "fade",
showSpeed: 600,
hideSpeed: 600
});
</script>
|
2. Farbtastic jQuery Color Picker / Wheel
This is a great looking and original take on a color picker. It only comes in flat mode which means if you want any effects you will have to create them on your own. It does however allow you to set a holder and destination for the color picker, so it's really simple to use out of the box.
• download & usage •
Try Now:
<link rel="stylesheet" media="screen" type="text/css" href="/a/plugins/color-pickers/jquery/farbtastic/farbtastic.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/jquery/farbtastic/farbtastic.js"></script>
<div id="farbtastic1_holder"></div>
<input id="farbtastic1_input" type="text" value="#FFFFFF" style="margin-top: 5px;"/>
<script type="text/javascript">
$("#farbtastic1_holder").farbtastic("#farbtastic1_input");
</script>
| |
click me
<link rel="stylesheet" media="screen" type="text/css" href="/a/plugins/color-pickers/jquery/farbtastic/farbtastic.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/jquery/farbtastic/farbtastic.js"></script>
<div style="position:relative; display:inline-block; border:solid #AAAAAA 3px; border-radius:5px; cursor:pointer;">
<div id="farbtastic2" class="inner" style="background-color:#E41B17; padding:2px 10px; color:#FFFFFF; font-weight:bold; border:solid #FFFFFF 1px; border-radius:3px;">click me</div>
<div id="farbtastic2_holder" style="position:absolute;left:0px;top:25px;display:none;z-index:100;"></div>
</div>
<script type="text/javascript">
$("#farbtastic2_holder").farbtastic("#farbtastic2");
$("#farbtastic2").click(function()
{
$("#farbtastic2_holder").toggle();
});
</script>
| |
click me
<link rel="stylesheet" media="screen" type="text/css" href="/a/plugins/color-pickers/jquery/farbtastic/farbtastic.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/jquery/farbtastic/farbtastic.js"></script>
<div style="position:relative; display:inline-block; border:solid #AAAAAA 3px; border-radius:5px; cursor:pointer;">
<div id="farbtastic3" class="inner" style="background-color:#E41B17; padding:2px 10px; color:#FFFFFF; font-weight:bold; border:solid #FFFFFF 1px; border-radius:3px;">click me</div>
<div id="farbtastic3_holder" style="position:absolute;left:0px;top:25px;display:none;z-index:100;"></div>
</div>
<script type="text/javascript">
$("#farbtastic3_holder").farbtastic("#farbtastic3");
$("#farbtastic3").click(function()
{
var holder = $("#farbtastic3_holder");
holder.is(":visible") ? holder.fadeOut() : holder.fadeIn();
});
</script>
|
3. Eyecon jQuery Color Picker
This is a nice clean little color picker plugin with both simple and advanced features. It's pretty well built, easy to use and has a bunch of callbacks that are very useful for customization. It works well out of the box and allows for much more complexity if you want to get fancy with effects.
Try Now:
<link rel="stylesheet" media="screen" type="text/css" href="/a/plugins/color-pickers/jquery/eyecon/css/colorpicker.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/jquery/eyecon/js/colorpicker.js"></script>
<div id="eyecon1_holder"></div>
<input id="eyecon1_input" type="text" value="#FFFFFF" style="margin-top: 5px;"/>
<script type="text/javascript">
$("#eyecon1_holder").ColorPicker({
flat: true,
color: "#FFFFFF",
onChange: function (hsb, hex, rgb) {
$("#eyecon1_input").val("#" + hex.toUpperCase()).css("backgroundColor", "#" + hex.toUpperCase());
}
});
</script>
| |
click me
<link rel="stylesheet" media="screen" type="text/css" href="/a/plugins/color-pickers/jquery/eyecon/css/colorpicker.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/jquery/eyecon/js/colorpicker.js"></script>
<div style="position:relative; display:inline-block; border:solid #AAAAAA 3px; border-radius:5px; cursor:pointer;">
<div id="eyecon2" class="inner" style="background-color:#E41B17; padding:2px 10px; color:#FFFFFF; font-weight:bold; border:solid #FFFFFF 1px; border-radius:3px;">click me</div>
</div>
<script type="text/javascript">
$("#eyecon2").ColorPicker({
color: "#E41B17",
onChange: function (hsb, hex, rgb) {
$("#eyecon2").css("backgroundColor", "#" + hex);
}
});
</script>
| |
click me
<link rel="stylesheet" media="screen" type="text/css" href="/a/plugins/color-pickers/jquery/eyecon/css/colorpicker.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/jquery/eyecon/js/colorpicker.js"></script>
<div style="position:relative; display:inline-block; border:solid #AAAAAA 3px; border-radius:5px; cursor:pointer;">
<div id="eyecon3" class="inner" style="background-color:#E41B17; padding:2px 10px; color:#FFFFFF; font-weight:bold; border:solid #FFFFFF 1px; border-radius:3px;">click me</div>
</div>
<script type="text/javascript">
$("#eyecon3").ColorPicker({
color: "#E41B17",
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$("#eyecon3").css("backgroundColor", "#" + hex);
}
});
</script>
|
4. Laktek Simple jQuery Color Picker
This jquery plugin has almost no options other than it allows you to add and set some default colors. It's a very simple color picker that works right out of the box, it even creates a box selector for you. If you need a really simple color picker ready to go out of the box this is a descent one to go with.
• download & usage •
Try Now:
<link rel="Stylesheet" type="text/css" href="/a/plugins/color-pickers/jquery/laktek/colorPicker.css" />
<script type="text/javascript" src="/a/plugins/color-pickers/jquery/laktek/jquery.colorPicker.js"></script>
<input id="laktek1" type="text" name="laktek1" value="#336699" />
<script type="text/javascript">
$("#laktek1").colorPicker();
</script>
|
