diff --git a/lib/ice-coder.js b/lib/ice-coder.js
index 7323a0e..5d6457e 100644
--- a/lib/ice-coder.js
+++ b/lib/ice-coder.js
@@ -1303,7 +1303,11 @@ var ICEcoder = {
 	// 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">';
+		top.document.getElementById('mediaContainer').innerHTML = 	'<div id="picker" class="picker"></div><br><br>'+
+										'<input type="text" id="color" name="color" value="#000" class="colorValue">'+
+										'<input type="button" onClick="top.ICEcoder.insertColorValue(top.document.getElementById(\'color\').value)" value="insert &gt;" class="insertColorValue"><br>'+
+										'<input type="text" id="colorRGB" name="colorRGB" value="rgb(0,0,0)" class="colorValue">'+
+										'<input type="button" onClick="top.ICEcoder.insertColorValue(top.document.getElementById(\'colorRGB\').value)" value="insert &gt;" class="insertColorValue">';
 		farbtastic('picker','color');
 		if (color) {
 			top.document.getElementById('picker').farbtastic.setColor(color);
@@ -1366,7 +1370,7 @@ var ICEcoder = {
 
 		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});
+		cM.replaceRange(color,{line:cM.getCursor().line,ch:cursor.start},{line:cM.getCursor().line,ch:cursor.end});
 	},
 
 	// Change opacity of the file manager icons