diff --git a/index.html b/index.html
index afdd0b7..f4e4869 100644
--- a/index.html
+++ b/index.html
@@ -76,7 +76,7 @@ <h2>ANAVI Light Demo</h2>
   <p>Connected to <span id="txtHost" class="txt"></span> on port <span id="txtPort" class="txt"></span></p>
   <p>Machine ID: <span id="txtMachineId" class="txt"></span></p>
   </div>
-  <p>Select color: </p>
+  <p>Select color: <input type="color" id="buttonColorCustom" /></p>
   <div class="row">
     <button id="buttonColorMax" class="buttonColor"><i class="fa fa-sun"></i></button>
     <button id="buttonColorRed" class="buttonColor"><i class="far fa-lightbulb"></i></button>
diff --git a/js/demo.js b/js/demo.js
index 2f51da2..56e4a42 100644
--- a/js/demo.js
+++ b/js/demo.js
@@ -109,6 +109,17 @@ $(document).ready(function() {
          $("#pageConnect").removeClass('d-none');
     });
 
+    $('#buttonColorCustom').on('change', function (e) {
+        e.preventDefault();
+        console.log(e.target.value);
+        if(e.target.value.length == 7){
+            var r = parseInt(e.target.value.substr(1,2),16);
+            var g = parseInt(e.target.value.substr(3,2),16);
+            var b = parseInt(e.target.value.substr(5,2),16);
+            changeColor(r,g,b);
+        }
+    });
+
     $('#buttonColorMax').on('click', function (e) {
          e.preventDefault();
          changeColor(255, 255, 255);