diff --git a/lib/ice-coder.js b/lib/ice-coder.js
index b658fdc..f79387f 100644
--- a/lib/ice-coder.js
+++ b/lib/ice-coder.js
@@ -1224,12 +1224,33 @@ var ICEcoder = {
 			newBlock.style.width = newBlock.style.height = "20px";
 			newBlock.style.zIndex = "1000";
 			newBlock.style.background = match ? match[0] : '';
+			newBlock.style.cursor = "pointer";
+			newBlock.onclick = function() {top.ICEcoder.showColorPicker(match[0])};
 			if (newBlock.style.backgroundColor=="") {newBlock.style.display = "none"};
 			top.document.getElementById('header').appendChild(newBlock);
 			cM.addWidget(cM.getCursor(), top.document.getElementById('cssColor'), true);
 		}
 	},
 
+	// Show color picker
+	showColorPicker: function(color) {
+		top.document.getElementById('blackMask').style.visibility = "visible";
+		top.document.getElementById('mediaContainer').innerHTML = '<div id="picker" class="picker"></div><br><br><input type="text" id="color" name="color" value="#123456" style="border: 0; width: 70px; padding-left: 5px"><input type="button" onClick="top.ICEcoder.insertColorValue()" value="insert &gt;" style="background: #888; color: #fff; height: 18px; width: 70px; border: 0; margin-left: 5px; cursor: pointer">';
+		farbtastic('picker','color');
+		if (color) {
+			top.document.getElementById('picker').farbtastic.setColor(color);
+		}
+	},
+
+	// Insert new color value
+	insertColorValue: function(color) {
+		var cM, cursor;
+
+		cM = ICEcoder.getcMInstance();
+		cursor = cM.getTokenAt(cM.getCursor());
+		cM.replaceRange(top.document.getElementById('color').value,{line:cM.getCursor().line,ch:cursor.start},{line:cM.getCursor().line,ch:cursor.end});
+	},
+
 	// Change opacity of the file manager icons
 	fMIconVis: function(icon, vis) {
 		var i;