laktek · wemersonblend · Mar 26, 2013 · Mar 26, 2013 · Mar 26, 2013 · Mar 27, 2013
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## Really Simple Color Picker 
+ ## Really Simple Color Picker 
 
 This is a very minimal, yet robust Color Picker based on jQuery.
 
@@ -33,6 +33,17 @@ Then call 'colorPicker' method on the text field when document loads.
       }
     </script>
   ```
+### Add Personal Colors
+  Add a new color into the color picker
+  ```javascript
+    $.fn.colorPicker.addPersonalColor({element:'#color1',colors:['b35AF1', 'b35F5A', 'b5C7C7']});
+  ```
+
+### Reset Personal Colors
+  Reset all personal colors on the color picker
+  ```javascript
+    $.fn.colorPicker.resetPersonalColor({element:'#color1'});
+  ```
 
 ### Options
 

diff --git a/colorPicker.css b/colorPicker.css
@@ -1,31 +1,49 @@
-div.colorPicker-picker {
-  height: 16px;
-  width: 16px;
-  padding: 0 !important;
-  border: 1px solid #ccc;
-  background: url(arrow.gif) no-repeat top right;
-  cursor: pointer;
-  line-height: 16px;
+
+div.colorPicker-picker  {
+    background: transparent;
+    border: 1px solid #BBBBBB;
+    cursor: pointer;
+    height: 18px;
+    line-height: 13.5px;
+    padding: 0 !important;
+    width: 18px;
+    display: inline-block;
 }
 
 div.colorPicker-palette {
-  width: 110px;
+  width: 180px;
   position: absolute;
   border: 1px solid #598FEF;
   background-color: #EFEFEF;
-  padding: 2px;
+  padding: 5px;
   z-index: 9999;
+  box-shadow: 0px 2px 6px #333;
 }
   div.colorPicker_hexWrap {width: 100%; float:left }
   div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
-  div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
-
+  div.colorPicker_hexWrap input {
+    margin: 5px 2px; 
+    padding: 0; 
+    font-size: 95%; 
+    border: 1px solid #ccc;
+    border-radius: 0;
+    width: 65%; 
+  }
 div.colorPicker-swatch {
-  height: 12px;
-  width: 12px;
-  border: 1px solid #000;
-  margin: 2px;
+  width: 20px;
+  height: 20px;
+  margin: 0px;
   float: left;
   cursor: pointer;
   line-height: 12px;
+  border: 1px solid #eee !important;
+}
+
+div.colorPicker-swatch:hover {
+  border: 1px solid #333 !important;
+}
+
+
+div.colorPicker-swatch:hover {
+  border: 1px solid #333 !important;
 }
diff --git a/demo.html b/demo.html
@@ -1,92 +1,88 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title>Really Simple Color Picker</title>
 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script language="javascript" type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
 
-<script type="text/javascript">
-  //Run the code when document ready
-  $(function() {    
-   //use this method to add new colors to pallete
-   //$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
-
-   $('#color1').colorPicker();
+	<script type="text/javascript">
+		//Run the code when document ready
+		$(function() {    
+			//use this method to add new colors to pallete
+			//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
+
+			$.fn.colorPicker.defaults.colors = [
+				'ff0000','ff8800','ffff00','00ff00','00ffff','0000ff','8800ff','ff00ff',
+
+				'000000','222222','444444','666666','888888','aaaaaa','cccccc','ffffff',
+
+				'ffaaaa','ffcfaa','ffffaa','aaffaa','aaffff','aaaaff','cfaaff','ffaaff',
+				'ff8888','ffbc88','ffff88','88ff88','88ffff','8888ff','bc88ff','ff88ff',
+				'ff4444','ff8844','ffff44','44ff44','44ffff','4444ff','8844ff','ff44ff',
+				'cc0000','cc7400','cccc00','00cc00','00cccc','0000cc','7400cc','cc00cc',
+				'880000','884600','888800','008800','008888','000088','460088','880088',
+				'440000','441800','444400','004400','004444','000044','180044','440044',
+			];
+			$('#colorPicker').colorPicker();
+
+
+			$("#button1").click(function(){
+				var color = $('#color').val();
+				$.fn.colorPicker.addPersonalColor({element:'#colorPicker',colors:color});
+			});
+
+			$("#button2").click(function(){
+				$.fn.colorPicker.addPersonalColor({element:'#colorPicker',colors:['b35AF1', 'b35F5A', 'b5C7C7']});
+			});
+		});
+
+	</script>
+
+	<style type="text/css">
+		/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
+		/* General styles */
+		body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
+		h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
+		p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
+
+		/* Form styles */
+		div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
+
+		p.legend { margin-bottom: 1em; }
+		p.legend em { color: #C00; font-style: normal; }
+
+		div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
+
+		div.form-container div.controlset label, 
+		div.form-container div.controlset input,
+		div.form-container div.controlset div { display: inline; float: left; }
+
+		div.form-container div.controlset label { width: 100px;}
+	</style>
+	<link rel="stylesheet" href="colorPicker.css" type="text/css" />
 
-   $('#color2').colorPicker();
-
-   $('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true}); 
-
-   //fires an event when the color is changed
-   //$('#color1').change(function(){
-    //alert("color changed");
-   //});
-
-   $("#button1").click(function(){
-    $("#color1").val("#ffffff");   
-    $("#color1").change();
-   });
-
-   $("#button2").click(function(){
-    $("#color2").val("#000000");   
-    $("#color2").change();
-   });
-
-  });
-</script>
-
-<style type="text/css">
-/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
-/* General styles */
-body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
-h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
-p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
-
-/* Form styles */
-div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
-
-p.legend { margin-bottom: 1em; }
-p.legend em { color: #C00; font-style: normal; }
-
-div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
-
-div.form-container div.controlset label, 
-div.form-container div.controlset input,
-div.form-container div.controlset div { display: inline; float: left; }
-
-div.form-container div.controlset label { width: 100px;}
-</style>
-<link rel="stylesheet" href="colorPicker.css" type="text/css" />
 </head>
 
 <body>
-
-<div id="wrapper">
-
-	<h2>Really Simple Color Picker (jQuery)</h2>
-
-	<p>More information about this can be found in <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
-	<div class="form-container">
-	<form action="#" method="post">
-		<fieldset>
-			<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
-			<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
-			<div class="controlset"><label for="color3">Color 3 (customized with options)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
-
-		</fieldset>
-
-    <div class="buttonrow">
-      <div><button type="button" id="button1">Set Color 1 to #FFF</button></div>
-      <div><button type="button" id="button2">Set Color 2 to #000</button></div>
-    </div>
-
-	</form>
-</div>
-
+	<div id="wrapper">
+		<h2>Really Simple Color Picker (jQuery)<span style="font-size:16px;"> with add personal colors</span></h2>
+
+		<div class="form-container">
+			<form action="#" method="post">
+				<fieldset>
+					<div class="controlset"><label for="colorPicker">Color 1</label> <input id="colorPicker" type="text" name="colorPicker" value="#333399" /></div>
+				  	<div class="controlset"><label for="addcolor">Add Color</label> <input id="color" type="text" name="color" value="FF0000" /></div>
+				</fieldset>
+				<div><button type="button" id="button1">Add new color</button></div>
+				<div><button type="button" id="button2">Add new colors</button><label for="addcolor">["B35AF1", "BB35F5A", "B5C7C7"]</label></div>
+
+		  	</form>
+		</div>
+  	</div>
 </body>
 
 </html>

diff --git a/jquery-1.7.2.min.js b/jquery-1.7.2.min.js