diff --git a/.gitignore b/.gitignore
index 3b10ffb3848326714e44aff2c3c6b1c1f1e4fff2..2eb7d522e85e638008fb050132d5dcffb822968b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ Thumbs.db
 .cache
 .project
 .settings
+settings.xml
 .tmproj
 *.esproj
 nbproject
diff --git a/docs/customize.html b/docs/customize.html
index 0a6c65da91b23cda713389d2ff4d0a1644eb4956..8d50cb2500659fea616fa5b290143a29c76d7acf 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -246,24 +246,24 @@
 
                 <h3>Links</h3>
                 <label>@linkColor</label>
-                <input type="text" class="span3" placeholder="#08c">
+                <input type="color" class="span3" placeholder="#08c" value="#08c">
                 <label>@linkColorHover</label>
                 <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
                 <h3>Colors</h3>
                 <label>@blue</label>
-                <input type="text" class="span3" placeholder="#049cdb">
+                <input type="color" class="span3" placeholder="#049cdb" value="#049cdb">
                 <label>@green</label>
-                <input type="text" class="span3" placeholder="#46a546">
+                <input type="color" class="span3" placeholder="#46a546" value="#46a546">
                 <label>@red</label>
-                <input type="text" class="span3" placeholder="#9d261d">
+                <input type="color" class="span3" placeholder="#9d261d" value="#9d261d">
                 <label>@yellow</label>
-                <input type="text" class="span3" placeholder="#ffc40d">
+                <input type="color" class="span3" placeholder="#ffc40d" value="#ffc40d">
                 <label>@orange</label>
-                <input type="text" class="span3" placeholder="#f89406">
+                <input type="color" class="span3" placeholder="#f89406" value="#f89406">
                 <label>@pink</label>
-                <input type="text" class="span3" placeholder="#c3325f">
+                <input type="color" class="span3" placeholder="#c3325f" value="#c3325f">
                 <label>@purple</label>
-                <input type="text" class="span3" placeholder="#7a43b6">
+                <input type="color" class="span3" placeholder="#7a43b6" value="#7a43b6">
 
                 <h3>Sprites</h3>
                 <label>@iconSpritePath</label>
@@ -322,11 +322,11 @@
                 <label>@tableBackground</label>
                 <input type="text" class="span3" placeholder="transparent">
                 <label>@tableBackgroundAccent</label>
-                <input type="text" class="span3" placeholder="#f9f9f9">
+                <input type="color" class="span3" placeholder="#f9f9f9" value="#f9f9f9">
                 <label>@tableBackgroundHover</label>
-                <input type="text" class="span3" placeholder="#f5f5f5">
+                <input type="color" class="span3" placeholder="#f5f5f5" value="#f5f5f5">
                 <label>@tableBorder</label>
-                <input type="text" class="span3" placeholder="#ddd">
+                <input type="color" class="span3" placeholder="#ddd" value="#ddd">
 
                 <h3>Forms</h3>
                 <label>@placeholderText</label>
@@ -334,13 +334,13 @@
                 <label>@inputBackground</label>
                 <input type="text" class="span3" placeholder="@white">
                 <label>@inputBorder</label>
-                <input type="text" class="span3" placeholder="#ccc">
+                <input type="color" class="span3" placeholder="#ccc" value="#ccc">
                 <label>@inputBorderRadius</label>
                 <input type="text" class="span3" placeholder="3px">
                 <label>@inputDisabledBackground</label>
                 <input type="text" class="span3" placeholder="@grayLighter">
                 <label>@formActionsBackground</label>
-                <input type="text" class="span3" placeholder="#f5f5f5">
+                <input type="color" class="span3" placeholder="#f5f5f5" value="#f5f5f5">
                 <label>@btnPrimaryBackground</label>
                 <input type="text" class="span3" placeholder="@linkColor">
                 <label>@btnPrimaryBackgroundHighlight</label>
@@ -351,21 +351,21 @@
 
                 <h3>Form states &amp; alerts</h3>
                 <label>@warningText</label>
-                <input type="text" class="span3" placeholder="#c09853">
+                <input type="color" class="span3" placeholder="#c09853" value="#c09853">
                 <label>@warningBackground</label>
-                <input type="text" class="span3" placeholder="#fcf8e3">
+                <input type="color" class="span3" placeholder="#fcf8e3" value="#fcf8e3">
                 <label>@errorText</label>
-                <input type="text" class="span3" placeholder="#b94a48">
+                <input type="color" class="span3" placeholder="#b94a48" value="#b94a48">
                 <label>@errorBackground</label>
-                <input type="text" class="span3" placeholder="#f2dede">
+                <input type="color" class="span3" placeholder="#f2dede" value="#f2dede">
                 <label>@successText</label>
-                <input type="text" class="span3" placeholder="#468847">
+                <input type="color" class="span3" placeholder="#468847" value="#468847">
                 <label>@successBackground</label>
-                <input type="text" class="span3" placeholder="#dff0d8">
+                <input type="color" class="span3" placeholder="#dff0d8" value="#dff0d8">
                 <label>@infoText</label>
-                <input type="text" class="span3" placeholder="#3a87ad">
+                <input type="color" class="span3" placeholder="#3a87ad" value="#3a87ad">
                 <label>@infoBackground</label>
-                <input type="text" class="span3" placeholder="#d9edf7">
+                <input type="color" class="span3" placeholder="#d9edf7" value="#d9edf7">
 
                 <h3>Navbar</h3>
                 <label>@navbarHeight</label>
@@ -395,7 +395,7 @@
                 <label>@navbarSearchBorder</label>
                 <input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
                 <label>@navbarSearchPlaceholderColor</label>
-                <input type="text" class="span3" placeholder="#ccc">
+                <input type="color" class="span3" placeholder="#ccc" value="#ccc">
 
                 <h3>Dropdowns</h3>
                 <label>@dropdownBackground</label>
@@ -474,7 +474,5 @@
     <script src="assets/js/bootstrap-affix.js"></script>
     <script src="assets/js/application.js"></script>
 
-
-
   </body>
 </html>