diff --git a/src/index.html b/src/index.html
index 90562d8..abf377d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -66,11 +66,9 @@
 				<input title="Thickness" id="whiteboardThicknessSlider"
 					style="position: absolute; left:9px; width: 130px; top: 15px;" type="range" min="1" max="50"
 					value="3">
-				<div title="Colorpicker"
-					style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;">
-					<div id="whiteboardColorpicker" value="#000000"
-						style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;">
-					</div>
+				<div id="whiteboardColorpicker"
+					style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; border: 1px solid darkgrey;"
+					data-color="#000000">
 				</div>
 			</button>
 		</div>
diff --git a/src/js/main.js b/src/js/main.js
index 7622f6d..034fe38 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -510,9 +510,11 @@ $(document).ready(function () {
         whiteboard.dropIndicator.hide();
     });
 
-    $('#whiteboardColorpicker').colorPicker({
-        renderCallback: function (elm) {
-            whiteboard.setDrawColor(elm.val());
+    new Picker({
+        parent: $('#whiteboardColorpicker')[0],
+        color: "#000000",
+        onChange: function(color) {
+            whiteboard.setDrawColor(color.rgbaString);
         }
     });
 });