jQuery color picker using Farbtastic and jQuery UI

March 22, 2011 • Javascript by Emanuele Feronato • 14 Comments

I want to share with you a little snippet of code I am using for a project. I was looking for a cute jQuery color picker and I found Farbtastic to be the best for my needs. Anyway, I also liked how jQuery UI used the Slider to make a simple color picker so I decided to merge both techniques to create a single color picker with more features.

Use the color wheel or the sliders and see how everything is linked.

I tried to keep the code in a single page, using Google as CDN when necessary. Here is the source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
     <script src="js/farbtastic.js" type="text/javascript"></script>
     
	<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" media = "all"/>
     <link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
     <style type="text/css">
     #red .ui-slider-range,#red .ui-slider-handle{
		background: #ef2929;
	}
	#green .ui-slider-range,#green .ui-slider-handle{
		background: #8ae234;
	}
	#blue .ui-slider-range,#blue .ui-slider-handle{
		background: #729fcf;
	}
	#swatch{
		width: 180px;
		height: 180px;
		background-image:none;
		float:right;
		margin:6px 20px 0px 0px;
		border:none;
		background-color:black;
	}
	#sliders{
		width:500px;
	}
	#colorpicker{
		float:left;
		margin:0px 0px 0px 20px;
	}
	#red,#green,#blue{
		margin:10px 0px 0px 0px;
	}
	#innerswatch{
		font:bold 24px arial;
		margin:75px 0px 0px 0px;
		text-align:center;
		color:white;
	}
	</style>
     <script type = "text/javascript">
     	$(document).ready(function(){
			var colorPicker = $.farbtastic("#colorpicker");
			colorPicker.linkTo(pickerUpdate);
			$("#red,#green,#blue").slider({
				orientation:"horizontal",
				range:"min",
				max:255,
				slide:sliderUpdate
			});
			function sliderUpdate() {
				var red=$("#red").slider("value");
				var green=$("#green").slider("value");
				var blue=$("#blue").slider("value");
				var hex=hexFromRGB(red,green,blue);
				colorPicker.setColor("#"+hex);
			}	
			function hexFromRGB(r,g,b){
				var hex = [r.toString(16),g.toString(16),b.toString(16)];
				$.each(hex,function(nr,val){
					if(val.length===1){
						hex[nr]="0"+val;
					}
				});
				return hex.join("").toUpperCase();
			}
			function pickerUpdate(color){
				$("#swatch").css("background-color",color);
				if(colorPicker.hsl[2]>0.5){
               		$("#innerswatch").css("color","#000000");     
          		}
          		else{
               		$("#innerswatch").css("color","#ffffff");   
          		}
				$("#innerswatch").html(color.toUpperCase())
				var red = parseInt(color.substring(1,3),16);
				var green = parseInt(color.substring(3,5),16);
				var blue = parseInt(color.substring(5,7),16);	
				$("#red").slider("value",red);
				$("#green").slider("value",green);
				$("#blue").slider("value",blue);		
			}
		});
     </script>
<head>
<body>
	<div id = "sliders">
		<div id="colorpicker"></div>
		<div id="swatch" class="ui-widget-content ui-corner-all">
			<div id="innerswatch">#000000</div>
		</div>
		<div style = "clear:both"></div>
		<div id="red"></div>
		<div id="green"></div>
		<div id="blue"></div>
	</div>
</body>
</html>

100

101

102

103

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

#red .ui-slider-range,#red .ui-slider-handle{

background: #ef2929;

}

#green .ui-slider-range,#green .ui-slider-handle{

background: #8ae234;

}

#blue .ui-slider-range,#blue .ui-slider-handle{

background: #729fcf;

}

#swatch{

width: 180px;

height: 180px;

background-image:none;

float:right;

margin:6px 20px 0px 0px;

border:none;

background-color:black;

}

#sliders{

width:500px;

}

#colorpicker{

float:left;

margin:0px 0px 0px 20px;

}

#red,#green,#blue{

margin:10px 0px 0px 0px;

}

#innerswatch{

font:bold 24px arial;

margin:75px 0px 0px 0px;

text-align:center;

color:white;

}

</style>

$(document).ready(function(){

var colorPicker = $.farbtastic("#colorpicker");

colorPicker.linkTo(pickerUpdate);

$("#red,#green,#blue").slider({

orientation:"horizontal",

range:"min",

max:255,

slide:sliderUpdate

});

function sliderUpdate() {

var red=$("#red").slider("value");

var green=$("#green").slider("value");

var blue=$("#blue").slider("value");

var hex=hexFromRGB(red,green,blue);

colorPicker.setColor("#"+hex);

}

function hexFromRGB(r,g,b){

var hex = [r.toString(16),g.toString(16),b.toString(16)];

$.each(hex,function(nr,val){

if(val.length===1){

hex[nr]="0"+val;

}

});

return hex.join("").toUpperCase();

}

function pickerUpdate(color){

$("#swatch").css("background-color",color);

if(colorPicker.hsl[2]>0.5){

$("#innerswatch").css("color","#000000");

}

else{

$("#innerswatch").css("color","#ffffff");

}

$("#innerswatch").html(color.toUpperCase())

var red = parseInt(color.substring(1,3),16);

var green = parseInt(color.substring(3,5),16);

var blue = parseInt(color.substring(5,7),16);

$("#red").slider("value",red);

$("#green").slider("value",green);

$("#blue").slider("value",blue);

}

});

</script>

<head>

<body>

</div>

</div>

</body>

</html>

You can also download the complete package along with Farbtastic color picker.

How would you improve it?

Rate this post: 1 Star

(8 votes, average: 4.50 out of 5)

Loading ...

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 14 comments

Rolpege

on March 22, 2011 at 1:08 am

Looks quite cool, but the div doesn’t play well with sliders when they’re at max/min, at least on Mac Google Chrome.

Also, what about making the hexadecimal representation editable as well?
vega

on March 22, 2011 at 10:55 pm

Looks fine in FF – atleast for me.
Bookmarked – might be handy in the future.
Wolfheat

on March 30, 2011 at 12:39 pm

This is really nice. Would like to translate this into flash though. Would be awesome to have the player pick his custom colors from this.
Ken Paulsen

on April 14, 2011 at 10:58 am

This works like a charm for my use case. Only thing I’m wondering is whether there might be some option to set the starting color of the picker?
Jquery and farbtastic, updating background using colorwheel

on December 12, 2011 at 8:37 am

[...] page http://www.emanueleferonato.com/2011/03/22/jquery-color-picker-using-farbtastic-and-jquery-ui/ has an example but i dont understand how it is changing the color. i dont need all the extra fancy [...]
Jay

on December 16, 2011 at 10:11 am

Hello Sir,

I want ot disable that wheel and color box in it.
I have required only right side box .where can I set the color.
I also want the he Horizontal scroll bar for managing the color shades.
Can you help to do so

Thanks & Regards,
Jay
Jay

on December 16, 2011 at 10:11 am

Hello Sir,

I want to disable that wheel and color box in it.
I have required only right side box .where can I set the color.
I also want the he Horizontal scroll bar for managing the color shades.
Can you help to do so

Thanks & Regards,
Jay
Dominik

on January 30, 2012 at 7:23 pm

Hi Emanuel,

First of all great tutorial and great tool you’ve found there. I just have one question: Do you know a way to call multiple divs with one update?

Problem is I can’t use classes because the divs are from another jquery plugin and they have some needed classes. So I’m searching for a way to say Farbtastic “When I Click Picker1, I want to change this, that and that div over there” or something like that. Hope u understand what i mean and it would be great if you could help me with that.

Greetings,
Dominik
Lari

on February 15, 2012 at 8:22 pm

When I add this, the only thing I get showing is the box where the color code is shown. I don’t get the sliders or the color picker.

Any idea why?
MrBeags

on August 21, 2012 at 2:48 pm

Any idea how the colour could be stored in a cookie so the background colour remained as chosen until page was closed or recached?

Cheers!
ArduinoPi web based controller for Arduino | Fritz-Hut

on August 31, 2012 at 11:55 am

[...] and I would like to thank the original authors: Bootstrap, jQuery, Farbtastic Color Picker, jQuery color picker using Farbtastic and jQuery UI and flot. The complete source is on Github, I’ll give a short overview of the different [...]
kalyan

on February 16, 2013 at 11:27 am

how can i link this plug-in to different element on a click.i have designed a color pallete and i need the link with the color-picker to change to different div on clicking a different color.
Meu

on February 28, 2013 at 7:16 am

Thank you Om ^^
Quelle couleur de fond pour les Chroniques ? | Chroniques de l'Iboga

on May 1, 2013 at 1:23 pm

[...] jQuery color picker using Farbtastic and jQuery UI par Emanuele Feronato This entry was posted in Dans l autre vie et la e-vie and tagged couleur, design, sémantique. Bookmark the permalink. [...]

italian geek and PROgrammer

This post has 14 comments

Wolfheat

MrBeags

kalyan

Meu